.sv-pagination__button {
    position: relative;
    overflow: hidden;

    border-color: rgba(135, 140, 150, .75);
    background: transparent;
    color: var(--sv-text);

    letter-spacing: .08em;
    text-transform: uppercase;

    transition:
        border-color .3s ease,
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.sv-pagination__button-text {
    display: inline-block;
    transform: translateY(0);
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        opacity .35s ease;
}

.sv-pagination__button:hover {
    background: transparent;
    border-color: var(--sv-text);
    color: var(--sv-text);
    transform: translateY(-2px);
}

.sv-pagination__button:hover .sv-pagination__button-text {
    transform: translateY(-120%);
    opacity: 0;
}


/* =========================
   Kinetic Incoming Text
   ========================= */

.sv-pagination__button::after {
    position: absolute;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateY(120%);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        opacity .35s ease;
}

.sv-pagination__button--previous::after {
    content: "← Previous";
}

.sv-pagination__button--next::after {
    content: "Next →";
}

.sv-pagination__button:hover::after {
    opacity: 1;
    transform: translateY(0);
}


/* =========================
   Current Page
   ========================= */

.sv-pagination__current {
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}


/* =========================
   Mobile
   ========================= */

@media(max-width:640px) {

    .sv-pagination__button:hover {
        transform: none;
    }

    .sv-pagination__button:hover .sv-pagination__button-text {
        transform: translateY(-105%);
    }

    .sv-pagination__button::after {
        transform: translateY(105%);
    }
}