.pagination__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.pagination__item {
    font-size: 1rem;
    line-height: 2;
    position: relative;
    display: flex;
    min-width: 1.625rem;
    padding: 0 .25rem;
    height: 2rem;
    color: var(--primaryColor);
    justify-content: center;
    align-items: center;
    margin: 0 .125rem;
    background-color: transparent;
    transition: background-color .1s ease-in, color .1s ease-in;
}

.pagination__item:hover {
    color: var(--primaryColorDark);
    color: color-mix(in srgb, var(--primaryColorDark), #000 50%);
    background-color: rgba(255, 255, 255, .5);
}

.pagination__item.pagination__item--active {
    color: #FFF;
    background-color: var(--primaryColor);
    cursor: pointer;
}

.pagination__item.pagination__item--active:hover {
    color: #FFF;
    background-color: var(--primaryColor);
}

.pagination__item.pagination__item--spacer {
    color: var(--greyColor20);
}

.pagination__item.pagination__item--previous {
    background-image: url("/frontend/assets/Shared/Component/Pagination/Presentation/Images/Previous-0bdf02a1b3.svg");
}

.pagination__item.pagination__item--next {
    background-image: url("/frontend/assets/Shared/Component/Pagination/Presentation/Images/Next-8102300464.svg");
}

.pagination__item:is(.pagination__item--previous, .pagination__item--next) {
    background-size: .5rem .875rem;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, .08);
    margin: 0;
    width: 2rem;
}

.pagination__link {
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination__link:is(:link, :visited) {
    color: inherit;
}

.pagination__link:is(.pagination__link--previous, .pagination__link--next) {
    display: inline-block;
    width: 2rem;
    height: 0;
    padding-top: 2rem;
    overflow: hidden;
}
