// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________

@nav__background-color: @color-white-fog;
@nav__border-color: @color-gray89;
@nav__indent-right: 1.5rem;

@nav-bar__color: @color-brownie;
@nav-bar__font-size: 1.2rem;
@nav-bar__height__base: @btn__base__font-size * @base__line-height + @btn__base__font-size * @btn__base__padding-top + @btn__base__font-size * @btn__base__padding-bottom;
@nav-bar__indent-top: 3rem;
@nav-bar__min-height: 5.8rem;

@nav-bar-bullet-wrap__background-color: @color-gray84;
@nav-bar-bullet-wrap__border-bottom-color: @color-gray85;
@nav-bar-bullet-wrap__border-top-color: @color-gray75;

@nav-bar-dot__size: 2.2rem;
@nav-bar-dot__border-width: .1rem;
@nav-bar-items__indent-bottom: 1.7rem;
@nav-bar-item__color: @color-gray65;

@nav-bar-point__border-width: .4rem;
@nav-bar-point__size: .7rem;

@nav-bar-step__width: 10.3rem;

//
//  Styles
//  _____________________________________________

//
//  Navigation
//  ---------------------------------------------

.nav {
    &:extend(.abs-clearer all);
    background-color: @nav__background-color;
    border-bottom: 1px solid @nav__border-color;
    border-top: 1px solid @nav__border-color;
    display: none;
    margin-bottom: @nav-bar__indent-top;
    padding: @nav-bar-dot__size @nav__indent-right 0 0;
}

//  Buttons panel
.nav .btn-group,
.nav-bar-outer-actions {
    float: right;
    margin-bottom: @nav-bar-items__indent-bottom;

    .btn-wrap {
        float: right;
        margin-left: .5rem;
        margin-right: .5rem;

        .btn {
            padding-left: .5rem;
            padding-right: .5rem;
        }
    }
}

.nav-bar-outer-actions {
    margin-top: -(@nav-bar__indent-top + @nav-bar__min-height + @nav-bar-items__indent-bottom + .1rem);
    padding-right: @nav__indent-right;
}

.btn-wrap-try-again {
    width: 9.5rem;
}

.btn-wrap-prev,
.btn-wrap-next {
    width: 8.5rem;
}

//
//  Progress bar
//  ---------------------------------------------

.nav-bar {
    counter-reset: i;
    float: left;
    margin: 0 1rem @nav-bar-items__indent-bottom 0;
    padding: 0;
    position: relative;
    white-space: nowrap;

    //  Progress line tunnel
    &:before {
        .lib-background-gradient( @_background-gradient: true, @_background-gradient-direction: vertical, @_background-gradient-color-start: @color-gray82, @_background-gradient-color-end: @color-gray83 );
        border-bottom: 1px solid @nav-bar-bullet-wrap__border-bottom-color;
        border-top: 1px solid @nav-bar-bullet-wrap__border-top-color;
        content: '';
        height: 1rem;
        left: @nav-bar-step__width / 2;
        position: absolute;
        right: @nav-bar-step__width / 2;
        top: @nav-bar-point__size;
    }

    //  Step link wrap
    > li {
        display: inline-block;
        font-size: 0;
        position: relative;
        vertical-align: top;
        width: @nav-bar-step__width;

        //  Discard progress line for first item
        &:first-child {
            &:after {
                display: none;
            }
        }

        //  Progress line
        &:after {
            background-color: @nav-bar__color;
            content: '';
            height: .5rem;
            left: ~'calc(-50% + .25rem)';
            position: absolute;
            right: ~'calc(50% + .7rem)';
            top: .9rem;
        }

        //  Disabled state
        &.disabled,
        &.ui-state-disabled {
            &:before {
                bottom: 0;
                content: '';
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 1;
            }
        }

        //  Active step link wrap
        &.active,
        &.ui-state-active {
            //  Not visited
            ~ li {
                //  Not visited progress line (discard)
                &:after {
                    display: none;
                }

                a {
                    //  Not visited step link bullet
                    &:after {
                        background-color: transparent;
                        border-color: transparent;
                        color: @nav-bar-item__color;
                    }
                }
            }

            //  Active link
            a {
                color: darken(@nav-bar__color, 30%);

                &:hover {
                    cursor: default;
                }

                //  Active step link bullet
                &:after {
                    background-color: @color-white;
                    content: '';
                }
            }
        }
    }

    //  Visited step link
    a {
        color: @nav-bar__color;
        display: block;
        font-size: @nav-bar__font-size;
        font-weight: @font-weight__semibold;
        line-height: 1.2;
        overflow: hidden;
        padding: 3rem .5em 0;
        position: relative;
        text-align: center;
        text-overflow: ellipsis;

        &:hover {
            text-decoration: none;
        }

        //  Visited step link bullet
        &:after {
            background-color: @nav-bar__color;
            border: .4rem solid @nav-bar__color;
            border-radius: 100%;
            color: @color-white;
            content: counter(i);
            counter-increment: i;
            height: @nav-bar-point__size + @nav-bar-point__border-width * 2;
            left: 50%;
            line-height: .6;
            margin-left: -@nav-bar-point__size - .1;
            position: absolute;
            right: auto;
            text-align: center;
            top: @nav-bar-dot__size / 2 - (@nav-bar-point__size / 2) - @nav-bar-point__border-width + .05;
            width: @nav-bar-point__size + @nav-bar-point__border-width * 2;
        }

        //  Visited step link bullet wrap
        &:before {
            background-color: @nav-bar-bullet-wrap__background-color;
            border: 1px solid transparent;
            border-bottom-color: @nav-bar-bullet-wrap__border-bottom-color;
            border-radius: 100%;
            border-top-color: @nav-bar-bullet-wrap__border-top-color;
            content: '';
            height: @nav-bar-dot__size + @nav-bar-dot__border-width * 2 - @nav-bar-dot__border-width;
            left: 50%;
            line-height: 1;
            margin-left: -(@nav-bar-dot__size / 2) - @nav-bar-dot__border-width;
            position: absolute;
            top: 0;
            width: @nav-bar-dot__size + @nav-bar-dot__border-width * 2 - @nav-bar-dot__border-width;
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
    .nav {
        padding-bottom: @nav-bar__height__base + @nav-bar-items__indent-bottom;
        padding-left: 1.5rem;
        text-align: center;
    }

    .nav-bar {
        display: inline-block;
        float: none;
        margin-right: 0;
        vertical-align: top;
    }

    .nav .btn-group,
    .nav-bar-outer-actions {
        display: inline-block;
        float: none;
        margin-top: -(@nav-bar__indent-top + @nav-bar__height__base + @nav-bar-items__indent-bottom + .1rem);
        text-align: center;
        vertical-align: top;
        width: 100%;
    }

    .nav-bar-outer-actions {
        padding-right: 0;
        .outer-actions-inner-wrap {
            display: inline-block;
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .nav {
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .nav-bar-outer-actions {
        margin-top: 0;
    }

    .nav-bar {
        &:extend(.abs-clearer-mobile all);
        display: block;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        width: @nav-bar-step__width * 3;

        &:before {
            display: none;
        }

        > li {
            float: left;
            min-height: 9rem;

            &:after {
                display: none;
            }

            &:nth-child(4n) {
                clear: both;
            }
        }

        a {
            line-height: 1.4;
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
    .nav-bar {
        width: @nav-bar-step__width * .75 * 3;

        > li {
            width: @nav-bar-step__width * .75;
        }
    }

    .nav .btn-group,
    .nav-bar-outer-actions {
        .btn-wrap-try-again {
            clear: both;
            display: block;
            float: none;
            margin-left: auto;
            margin-right: auto;
            margin-top: 1rem;
            padding-top: 1rem;
        }
    }
}