$analog-picker-tick-color: black !default;
$border: 1px solid $analog-picker-tick-color;
$analog-picker-handle-color: #d42c2c !default;
$analog-picker-width: 150px !default;
$analog-picker-min-height: 400px !default;
$analog-picker-max-height: 800px !default;
$q-pad-left: 0px !default;
$q-pad-right: 0px !default;


@mixin ticks($orientation: "vertical") {
    @if $orientation=="horizontal" {
        span {
            padding: 4px 0;
            background-image: linear-gradient(270deg, $analog-picker-tick-color 1px, transparent 0px);
            background-repeat: repeat-x;
            background-origin: content-box;
            background-size: 10% 100%;
        }
    }

    @else {
        span {
            padding: 0 25%;
            background-image: linear-gradient(0deg, $analog-picker-tick-color 1px, transparent 0px);
            background-repeat: repeat-y;
            background-origin: content-box;
            background-size: 100% 10%;
        }
    }
}

.or-analog-scale-initialized {
    position: relative;

    // Using a dirty trick, knowing that only original question-labels have a lang attribute
    .label-content {
        display: flex;
        flex-direction: column;
        .question-label.active {
            display: inline;

            &[lang] {
                display: none;
            }
        }
    }

    // Overridden by show value box.
    .range-widget__current {
        visibility: hidden;
    }

    >.widget:not(.or-comment-widget) {
        // override main.scss style
        // The margin-bottom is maintained to
        // have space for the constraint message in the horizontal
        // analog scale widget.
        margin: 0 0 9px 0;
    }

    .show-value__box {
        background-color: black;
        text-align: center;
        color: white;
        max-width: 170px;
        padding: 10px 35px;
        margin: 20px auto;

        @extend h5;

        @include font-normal;
    }

    .show-value__value {
        font-weight: bold;
        font-size: $font-size-base * 1.25;
        padding: 8px;
        display: block;
        min-width: 1px;
        min-height: $font-size-base * 1.25 + 22px;
    }

    .max-label,
    .min-label {
        @include font-normal;

        text-align: center;
    }

    .min-label {
        order: 1;
    }

    .range-widget {
        order: 4; // same as set by Grid Theme
    }

    .max-label {
        order: 5;
    }


    &:not(.or-appearance-no-ticks) {

        .range-widget {
            &__ticks {
                @include ticks('vertical');

                &__scale {

                    &__start,
                    &__end {
                        display: none;
                    }
                }
            }
        }

        &.or-appearance-horizontal {
            .range-widget {
                &__ticks {
                    @include ticks('horizontal');
                }
            }
        }
    }

    &.or-appearance-no-ticks {
        .range-widget {
            &__scale {

                &__start,
                &__end {
                    display: none;
                }
            }
        }
    }

    &.or-appearance-horizontal {

        .analog-scale-widget {
            display: flex;
        }

        .range-widget {
            flex: 100%;

            // adjust default range widget
            &__wrap {
                height: 117px
            }

            // adjust default range widget
            &__current {
                line-height: 38.5px;
                min-height: 48.5px;
            }

            // adjust default range widget
            [type=range] {
                top: 33.5px;
            }

            .btn-reset {
                // center when there is no min and max scale value
                margin-left: auto;
                margin-right: auto;
            }
        }

        .max-label,
        .min-label {
            width: 80px;
            align-self: center;
        }

    }

    &.or-appearance-vertical:not(.disabled) {
        @include display-flex;

        @include flex(100%);

        @include flex-direction(row);

        .label-content {
            @include flex(100%);
        }

        .analog-scale-widget {
            // same width as range-widget inside it
            width: 200px;
        }
    }

    &.or-appearance-show-scale:not(.or-appearance-horizontal) {
        .range-widget {
            &__wrap {
                flex-direction: row-reverse;
                flex-wrap: wrap;
            }

            &__scale {
                position: relative;
                text-align: end;
                align-items: flex-end;
                padding: 0 13px;

                &__start,
                &__end,
                &__between {
                    width: 24px;
                }
            }

            &__current {
                padding: 0 13px;
            }

            .btn-reset {
                position: absolute;
                top: 140px;
                left: 100px;
            }
        }
    }

    [class*="or-constraint"],
    .or-required-msg {
        order: 5;
    }
}

// corrections for pages mode
.pages.or [role="page"] {
    &.or-analog-scale-initialized {
        &.current:not(.or-appearance-horizontal) {
                @include display-flex;
        }

        &:not(.current) {
            display: none;
        }
    }
}