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

.c-adjust-value-bar {
    display: flex;
    align-items: center;
}
    $c-adjust-value-bar--main-color: $grey-super-dark !default;
    $c-adjust-value-bar--bar-height: 1px !default;
    $c-adjust-value-bar--bar-border-radius: 0 !default;
    $c-adjust-value-bar--bar-color: $c-adjust-value-bar--main-color !default;
    $c-adjust-value-bar--bar-background-color: $grey-middle !default;
    $c-adjust-value-bar--scrubber-color: $c-adjust-value-bar--main-color !default;
    $c-adjust-value-bar--scrubber-size: 18px !default;
    $c-adjust-value-bar--scrubber-box-shadow: none !default;
    $c-adjust-value-bar__icon--size: 24px !default;
    $c-adjust-value-bar__icon--left--margin: 15px !default;
    $c-adjust-value-bar__icon--right--margin: 12px !default;
    $c-adjust-value-bar__element--height: 64px !default;

    .c-adjust-value-bar__icon {
        cursor: pointer;
    }
        .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 {
            border: $c-adjust-value-bar--bar-height
                solid $c-adjust-value-bar--bar-color;
            position: absolute;
            width: 100%;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            border-radius: $c-adjust-value-bar--bar-border-radius;
        }

            .c-adjust-value-bar__element__bar--no-background {
                border: none;
            }

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

        .c-adjust-value-bar__element__toggle {
            background: $c-adjust-value-bar--scrubber-color;
            height: $c-adjust-value-bar--scrubber-size;
            width: $c-adjust-value-bar--scrubber-size;
            border-radius: 50%;
            position: absolute;
            top: calc(50% - #{$c-adjust-value-bar--scrubber-size / 2});
            transform: translateX(-50%);
            box-shadow: $c-adjust-value-bar--scrubber-box-shadow;
        }

        .c-adjust-value-bar__element__mask {
            position: fixed;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }