@use '../../variables' as *;

$b: '.pagination';

#{$b} {
    align-items: center;
    display: flex;
    justify-content: center;

    &__item {
        align-items: center;
        color: $pagination-item-color;
        display: flex;
        justify-content: center;
        padding: 4px * 2;
        transition-duration: var(--duration-micro-s);
        transition-property: color;
        transition-timing-function: var(--easing-standard);

        @include font($pagination-item-font);

        &:first-child {
            padding-right: 4px * 2;
        }

        &:last-child {
            padding-left: 4px * 2;
        }

        &:any-link {
            text-decoration: none;

            &:hover,
            &:focus-visible {
                color: $pagination-item-active-color;
            }
        }

        &_disabled {
            color: $pagination-item-disabled-color;
        }

        &_active {
            color: $pagination-item-active-color;
        }
    }

    &__arrow {
        fill: currentcolor;
        height: 1em;
        width: 1em;

        &_prev {
        }

        &_next {
        }
    }
}