@use 'sass:math';
@use '../../variables' as *;

$b: '.slider-pagination';

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

    &_lock {
        display: none;
    }

    &_clickable {
    }

    &_light {
    }

    &_dark {
    }

    &.swiper-pagination-bullets-dynamic {
        justify-content: flex-start;
        overflow: visible;
        position: relative;
    }

    &__bullet {
        border: 1px solid transparent;
        border-radius: 50%;
        display: block;
        flex-shrink: 0;
        height: $slider-pagination-bullet-size;
        margin-left: math.div($slider-pagination-bullet-gap, 2);
        margin-right: math.div($slider-pagination-bullet-gap, 2);
        opacity: 1;
        transition-duration: var(--duration-micro-s);
        transition-property: background-color, border-color, left, transform;
        transition-timing-function: var(--easing-standard);
        width: $slider-pagination-bullet-size;

        #{$b}_clickable &:hover,
        #{$b}_clickable &:focus-visible {
            cursor: pointer;
            transform: scale(1.5);
        }

        #{$b}.swiper-pagination-bullets-dynamic & {
            position: relative;
            transform: scale(0);
        }

        &_active {
            transform: scale(1.5);

            #{$b}_clickable &:hover,
            #{$b}_clickable &:focus-visible {
                cursor: default;
                transform: scale(1.5);
            }

            #{$b}.swiper-pagination-bullets-dynamic & {
                transform: scale(1.5);

                &-next,
                &-prev {
                    transform: scale(1);
                }

                &-next-next,
                &-prev-prev {
                    transform: scale(0.5);
                }
            }
        }

        #{$b}_light & {
            background-color: $slider-pagination-bullet-light-bg;
            border-color: $slider-pagination-bullet-light-border-color;

            &_active {
                background-color: $slider-pagination-bullet-light-selected-bg;
                border-color: $slider-pagination-bullet-light-selected-border-color;
            }
        }

        #{$b}_light#{$b}_clickable & {
            &:hover,
            &:focus-visible {
                background-color: $slider-pagination-bullet-light-active-bg;
                border-color: $slider-pagination-bullet-light-active-border-color;
            }

            &_active {
                &:hover,
                &:focus-visible {
                    background-color: $slider-pagination-bullet-light-selected-bg;
                    border-color: $slider-pagination-bullet-light-selected-border-color;
                }
            }
        }

        #{$b}_dark & {
            background-color: $slider-pagination-bullet-dark-bg;
            border-color: $slider-pagination-bullet-dark-border-color;

            &_active {
                background-color: $slider-pagination-bullet-dark-selected-bg;
                border-color: $slider-pagination-bullet-dark-selected-border-color;
            }
        }

        #{$b}_dark#{$b}_clickable & {
            &:hover,
            &:focus-visible {
                background-color: $slider-pagination-bullet-dark-active-bg;
                border-color: $slider-pagination-bullet-dark-active-border-color;
            }

            &_active {
                &:hover,
                &:focus-visible {
                    background-color: $slider-pagination-bullet-dark-selected-bg;
                    border-color: $slider-pagination-bullet-dark-selected-border-color;
                }
            }
        }
    }
}