MusicTopus/sass/pagination.scss

.pagination {
    font-size: 1rem;
    align-items: center;
    display: flex;
    text-align: center;
    justify-content: space-between;
    margin: 0.75rem 0;


    .pagination-list {
        align-items: center;
        display: flex;
        text-align: center;
        flex-wrap: wrap;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-end;

        @include respond-to("small") {
            justify-content: center;
        }

        .pagination-link {
            align-items: center;
            border: 1px solid transparent;
            border-radius: .375em;
            box-shadow: none;
            display: inline-flex;
            font-size: 1rem;
            height: 2.5em;
            justify-content: flex-start;
            line-height: 1.5;
            padding: calc(.5em - 1px) calc(.75em - 1px);
            position: relative;
            vertical-align: top;
            text-decoration: none;
            user-select: none;
            text-align: center;
            font-size: 1em;
            justify-content: center;
            margin: .25rem;
            border-color: var(--pagination-border-color);
            color: var(--pagination-text-color);
            min-width: 2.5em;
            white-space: nowrap;

            @include transition() {}

            &:hover {
                border-color: var(--pagination-border-hover-color);
                color: var(--pagination-text-hover-color);
            }

            &.is-disabled {
                background-color: var(--default-hl-color);
                border-color: var(--default-hl-color);
                box-shadow: none;
                color: var(--disabled-color);
                opacity: .5;
            }

            &.is-current {
                background-color: var(--primary-bg-color);
                border-color: var(--primary-bg-color);
                color: var(--primary-font-color);
            }
        }
    }
}