:root {
    --color-white: #fff;
    --color-nero: #212121;
    --color-white-smoke: #f8f8f8;
    --color-whisper: #e4e4e4;
    --color-whisper-light: #ececec;
    --color-ivory: #fbfbf9;
    --color-grey: #7d7d7d;
    --color-tahiti-gold: #e86f2a;
    --color-blue-gem: #534496;
    --color-lavender-blue: #d7ceff;
    --color-apricot: #fed3ac;
    --color-seashell: #fff6ee;
    --color-astronaut-blue: #17455f;
    --color-sapphire: #12326e;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pagination__btn-icon {
    display: none;
}

.pagination__btn {
    display: block;
    width: 160px;
    padding: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    border: 1px solid var(--color-nero);
    border-radius: 100px;
    text-align: center;
    color: var(--color-nero);
    background-color: transparent;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.pagination__btn:not(.pagination__btn--disabled):hover,
.pagination__btn:not(.pagination__btn--disabled):focus-visible {
    outline: none;
    color: var(--color-tahiti-gold);
    background-color: var(--color-apricot);
    border-color: var(--color-apricot);
}

.pagination__btn--disabled {
    color: var(--color-grey);
    border-color: var(--color-grey);
}

.pagination__link {
    display: block;
    width: 60px;
    padding: 20px 5px;
    border-radius: 50%;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    text-align: center;
    color: var(--color-grey);
    background-color: transparent;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.pagination__link:not(.pagination__link--current):not(.pagination__link--dots):hover,
.pagination__link:not(.pagination__link--current):not(.pagination__link--dots):focus-visible {
    outline: none;
    color: var(--color-tahiti-gold);
    background-color: var(--color-apricot);
}

.pagination__link--current {
    color: var(--color-ivory);
    background-color: var(--color-tahiti-gold);
}

.pagination__btn--prev {
    margin-right: 50px;
}

.pagination__btn--next {
    margin-left: 50px;
}

@media (max-width: 1200px) {
    .pagination__btn--prev {
        margin-right: 15px;
    }

    .pagination__btn--next {
        margin-left: 15px;
    }

}

@media (max-width: 992px) {
    .pagination__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        font-size: 0;
        padding: 0;
        border-radius: 50%;
        background-color: var(--color-whisper-light);
        border-color: var(--color-whisper-light);
    }

    .pagination__btn--disabled {
        color: var(--color-grey);
        border-color: var(--color-whisper-light);
    }

    .pagination__btn-icon {
        display: block;
        flex-shrink: 0;
    }

    .pagination__link {
        width: 40px;
        font-size: 15px;
        padding: 12px 5px 13px;
    }

    .pagination__btn--prev {
        margin-right: 15px;
    }

    .pagination__btn--next {
        margin-left: 15px;
    }

     .pagination__btn--next .pagination__btn-icon {
        transform: rotate(-180deg);
     }
}

@media (max-width: 425px) {
    .pagination {
        gap: 5px;
    }

    .pagination__btn--prev {
        margin-right: 0;
    }

    .pagination__btn--next {
        margin-left: 0;
    }
}