@layer components {
    .pagination {
        display: flex;
        justify-content: center;
        padding-left: 0;
        list-style: none;
        border-radius: 0.25rem;
    }

    .pagination__link {
        position: relative;
        display: block;
        padding: 0.5rem 0.75rem;
        margin-left: -1px;
        line-height: 1.25;
        color: #007bff;
        background-color: #fff;
        border: 1px solid #dee2e6;
    }

    .pagination__link:hover {
        z-index: 2;
        color: #0056b3;
        text-decoration: none;
        background-color: #e9ecef;
        border-color: #dee2e6;
    }

    .pagination__link:focus {
        z-index: 3;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .pagination__item:first-child .pagination__link {
        margin-left: 0;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

    .pagination__item:last-child .pagination__link {
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }

    .pagination__item.active .pagination__link {
        z-index: 3;
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .pagination__item.disabled .pagination__link {
        color: #6c757d;
        pointer-events: none;
        cursor: auto;
        background-color: #fff;
        border-color: #dee2e6;
    }

    .pagination__item.active .pagination__link {
        z-index: 1;
        color: #fff;
        background-color: var(--theme-color-main-dark);
        border-color: var(--theme-color-dark-prev);
    }

    .pagination__link,
    .prev span {
        position: relative;
        display: block;
        padding: 0.5rem 0.75rem;
        margin-left: -1px;
        line-height: 1.25;
        color: inherit;
        background-color: #fcfcfc;
        border: 1px solid var(--theme-color-dark-prev);
    }

    .pagination__item.prev span {
        margin-left: 0;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
        border-color: inherit;
    }

    .pagination__link:hover {
        color: #fff;
        background-color: var(--theme-color-dark-prev);
        border-color: var(--theme-color-dark-prev);
    }

    .disabled span {
        color: #888;
    }
}