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

$b: '.range-input';

#{$b} {
    &__track {
        &.noUi-target {
            background-color: $range-input-track-color;
            border-bottom-style: none;
            border-left-style: none;
            border-radius: 0;
            border-right-style: none;
            border-top-style: none;
            box-shadow: none;
            cursor: pointer;
        }

        .noUi-base {
            width: calc(100% - $range-input-handle-size);
        }

        .noUi-connects {
            border-radius: 0;
        }

        .noUi-connect {
            background-color: $range-input-connect-color;
        }

        .noUi-handle {
            background-color: $range-input-handle-color;
            border-bottom-style: none;
            border-left-style: none;
            border-radius: 10000px;
            border-right-style: none;
            border-top-style: none;
            box-shadow: none;
            transition-duration: var(--duration-micro-s);
            transition-property: background-color;
            transition-timing-function: var(--easing-standard);

            &::before,
            &::after {
                content: none;
            }

            &:hover {
                background-color: $range-input-handle-active-color;
            }
        }

        &.noUi-horizontal {
            align-items: center;
            display: flex;
            flex-direction: column;
            height: $range-input-track-height;

            .noUi-handle {
                height: $range-input-handle-size;
                top: math.div($range-input-handle-size - $range-input-track-height, 2) * -1;
                width: $range-input-handle-size;

                html:not([dir='rtl']) &-lower,
                html:not([dir='rtl']) &-upper {
                    right: math.div($range-input-handle-size, 2) * -1;
                }
            }
        }

        &[disabled='true'] {
            &.noUi-target {
                background-color: $range-input-track-disabled-color;
            }

            .noUi-connect {
                background-color: $range-input-connect-disabled-color;
            }

            .noUi-handle {
                background-color: $range-input-handle-disabled-color;
            }
        }
    }

    &__wrapper {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        position: relative;

        &::before {
            background-color: $range-input-separator-color;
            content: '';
            height: 1px;
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translateX(-50%);
            width: 1em;
        }
    }

    &__input {
        &.input {
            width: calc(50% - (1em + 12px) / 2);
        }
    }
}