//## Website Sale frontent design
//## ----------------------------

// Theming variables
@o-wsale-wizard-thickness: 2px;
@o-wsale-wizard-dot-size: 10px;
@o-wsale-wizard-dot-active-glow: 4px;

@o-wsale-wizard-color-inner: white;
@o-wsale-wizard-color-default: @gray-lighter;

@o-wsale-wizard-dot-active: @brand-primary;
@o-wsale-wizard-dot-completed: @brand-success;

@o-wsale-wizard-label-default: @text-muted;
@o-wsale-wizard-label-active: @text-color;
@o-wsale-wizard-label-completed: @state-success-text;


.progress-wizard {
    // Scoped variables
    @tmp-dot-radius: (@o-wsale-wizard-dot-size + @o-wsale-wizard-thickness)*0.5;
    @tmp-check-size: max(@font-size-base, @o-wsale-wizard-dot-size + @o-wsale-wizard-thickness + @o-wsale-wizard-dot-active-glow*2);
    @tmp-check-pos: @o-wsale-wizard-dot-size*0.5 - @tmp-check-size*0.5;

    margin-top: @grid-gutter-width*0.5;
    padding: 0 @grid-gutter-width*0.5;

    @media (min-width: @screen-sm-min) {
        padding: 0;
    }

    .progress-wizard-step {
        position: relative;

        @media (min-width: @screen-sm-min) {
            margin-top: @tmp-dot-radius + @o-wsale-wizard-thickness*3.5;
            float: left;
            width: 100%/3;

            .o_wizard_has_extra_step + & {
                width: 100%/4;
            }
        }
        @media (max-width: @screen-xs-max) {
            &.disabled, &.complete {
                display:none;
            }
        }
        .progress-wizard-dot {
            .square(@o-wsale-wizard-dot-size);
            position: relative;
            display: inline-block;
            background-color: @o-wsale-wizard-color-inner;
            border-radius: 50%;
            box-shadow: 0 0 0 @o-wsale-wizard-thickness @o-wsale-wizard-color-default;

            @media (min-width: @screen-sm-min) {
                .o-position-absolute(@left: 50%);
                margin: -@tmp-dot-radius 0 0 -(@o-wsale-wizard-dot-size*0.5);
            }
        }

        .progress-wizard-steplabel {
            color: @o-wsale-wizard-label-default;
            margin: 5px 0 5px 5px;
            font-size: @font-size-base;
            display: inline-block;

            @media (min-width: @screen-sm-min) {
                display: block;
                margin: (10px + @tmp-dot-radius) 0 20px 0;
            }
            @media (max-width: @screen-xs-max) {
                margin-left: -15px;
                font-size:24px;
            }
        }

        .progress-wizard-bar {
            height: @o-wsale-wizard-thickness;
            background-color: @o-wsale-wizard-color-default;
        }

        &.active {
            .progress-wizard-dot {
                .o-animation(fadeIn, 1s);
                background: @o-wsale-wizard-dot-active;
                box-shadow: 0 0 0 @o-wsale-wizard-dot-active-glow - 1px @o-wsale-wizard-color-inner,
                            0 0 0 @o-wsale-wizard-dot-active-glow fade(@o-wsale-wizard-dot-active, 50%);
            }

            .progress-wizard-steplabel {
                color: @o-wsale-wizard-label-active;
                font-weight: bolder;
            }
        }

        &.complete {
            .progress-wizard-dot {
                background: none;
                box-shadow: none;

                &:after {
                    .o-position-absolute(@tmp-check-pos, @left: @tmp-check-pos);
                    .square(@tmp-check-size);
                    border-radius: 100%;

                    background: @o-wsale-wizard-color-inner;
                    color: @o-wsale-wizard-dot-completed;
                    text-align: center;
                    line-height: 1;
                    font-size: @tmp-check-size;
                    font-family: FontAwesome;

                    content: "\f058";
                }
            }

            .progress-wizard-steplabel {
                color: @o-wsale-wizard-label-completed;
            }

            &:hover:not(.disabled) {
                .progress-wizard-dot:after {
                    color: @o-wsale-wizard-label-completed;
                }

                .progress-wizard-steplabel {
                    color: @o-wsale-wizard-label-active;
                }
            }
        }

        &.disabled {
            cursor: default;
        }
    }
}
