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

$b: '.slider-nav';

#{$b} {
    &__button {
        align-items: center;
        background-color: $slider-nav-button-bg;
        border: $slider-nav-button-border-width solid $slider-nav-button-border-color;
        border-radius: $slider-nav-button-radius;
        cursor: pointer;
        display: flex;
        height: 4px * 8;
        justify-content: center;
        opacity: 1;
        transition-duration: var(--duration-micro-s);
        transition-property: border-color, color, opacity;
        transition-timing-function: var(--easing-standard);
        width: 4px * 8;

        @media (--tablet-portrait-down) {
            display: none;
        }

        @media (--tablet-landscape-up) {
            height: 4px * 12;
            width: 4px * 12;
        }

        &_disabled {
            cursor: default;
            opacity: 0.5;
        }

        &_lock {
            display: none;
        }

        &_prev {
        }

        &_next {
        }

        &_autohide {
            .swiper:not(:hover) & {
                opacity: 0;
            }
        }

        &_fill-white {
            background-color: $slider-nav-button-fill-white-bg;
            border-color: $slider-nav-button-fill-white-border-color;
            box-shadow: $slider-nav-button-fill-white-shadow;
            color: $slider-nav-button-fill-white-color;

            &:not(#{$b}__button_disabled):hover,
            &:not(#{$b}__button_disabled):focus-visible {
                background-color: $slider-nav-button-fill-white-active-bg;
                border-color: $slider-nav-button-fill-white-active-border-color;
                color: $slider-nav-button-fill-white-active-color;
            }
        }
    }

    &__icon {
        fill: currentcolor;
        height: 4px * 4;
        width: 4px * 4;

        @media (--tablet-landscape-up) {
            height: 4px * 6;
            width: 4px * 6;
        }

        #{$b}__button_prev & {
            transform: translateX(-2px);
        }

        #{$b}__button_next & {
            transform: translateX(1px);
        }
    }
}