@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

.c-adjust-value-bar {

}
    $c-adjust-value-bar--main-color: $grey-super-dark;
    $c-adjust-value-bar__icon--size: 24px;
    $c-adjust-value-bar__icon--left--margin: 15px;
    $c-adjust-value-bar__icon--right--margin: 12px;
    $c-adjust-value-bar__element--height: 64px;

    .c-adjust-value-bar__icon {
        cursor: pointer;
        transform: translateY(#{
            -$c-adjust-value-bar__element--height / 2 +
            $c-adjust-value-bar__icon--size / 2
        });
    }
        .c-adjust-value-bar__icon--left {
            margin-right: $c-adjust-value-bar__icon--left--margin;
        }
        .c-adjust-value-bar__icon--right {
            margin-left: $c-adjust-value-bar__icon--right--margin;
        }

    .c-adjust-value-bar__element {
        width: calc(100% - #{
            2 * $c-adjust-value-bar__icon--size +
            $c-adjust-value-bar__icon--left--margin +
            $c-adjust-value-bar__icon--right--margin
        });
        height: $c-adjust-value-bar__element--height;
        cursor: pointer;
        position: relative;
        display: inline-block;
    }

        .c-adjust-value-bar__element__bar {
            $c-adjust-value-bar__bar--height: 1px;
            border: $c-adjust-value-bar__bar--height
                solid $c-adjust-value-bar--main-color;
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

            .c-adjust-value-bar__element__bar--background {
                border-color: $grey-middle;
            }

        .c-adjust-value-bar__element__toggle {
            $c-adjust-value-bar__bar__toggle--size: 18px;
            background: $c-adjust-value-bar--main-color;
            height: $c-adjust-value-bar__bar__toggle--size;
            width: $c-adjust-value-bar__bar__toggle--size;
            border-radius: 50%;
            position: absolute;
            top: calc(50% - #{$c-adjust-value-bar__bar__toggle--size / 2});
            transform: translateX(-50%);
            pointer-events: none;
        }