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

//
//  Variables
//  _____________________________________________

@checkout-progress-bar__font-size: 16px;
@checkout-progress-bar__font-weight: @font-weight__light;
@checkout-progress-bar__margin: @indent__base;

@checkout-progress-bar-item__background-color: @color-gray-middle1;
@checkout-progress-bar-item__border-radius: 6px;
@checkout-progress-bar-item__color: @primary__color;
@checkout-progress-bar-item__margin: @indent__s;
@checkout-progress-bar-item__width: 185px;
@checkout-progress-bar-item__active__background-color: @active__color;
@checkout-progress-bar-item__complete__color: @link__color;

@checkout-progress-bar-item-element__height: @checkout-progress-bar-item-element__width;
@checkout-progress-bar-item-element__width: 38px;

@checkout-progress-bar-item-element-inner__background-color: @page__background-color;
@checkout-progress-bar-item-element-inner__color: @checkout-progress-bar-item__color;
@checkout-progress-bar-item-element-inner__height: @checkout-progress-bar-item-element-inner__width;
@checkout-progress-bar-item-element-inner__width: @checkout-progress-bar-item-element__width - (@checkout-progress-bar-item-element-outer-radius__width * 2);
@checkout-progress-bar-item-element-inner__active__content: @icon-checkmark;
@checkout-progress-bar-item-element-inner__active__font-size: 28px;
@checkout-progress-bar-item-element-inner__active__line-height: 1;

@checkout-progress-bar-item-element-outer-radius__width: 6px;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {

    //
    //  Checkout Progress Bar
    //  ---------------------------------------------
    .checkout-container {
        .opc-progress-bar {
        margin: 0 0 32px;
        counter-reset: i;
        font-size: 0;
        display: block;
        width: calc(~'66.66666667% - 15px');
            @media only screen and (max-width: 1199px) {
                display: none;
            }
            .opc-progress-bar-item {
                > span {
                    display: inline-block;
                    padding-top: 45px;
                    width: 100%;
                    word-wrap: break-word;
                    color: #c2c2c2;
                    font-size: 16px;
                    &:after {
                        content: counter(i);
                        font-size: 15px;
                        line-height: 26px;
                        font-family: "Poppins", arial, tahoma;
                        color: #c2c2c2;
                        font-weight: 400;
                    }
                }
                &._active {
                    > span {
                        color: #eb5202;
                        &:after {
                            color: #eb5202;

                        }
                    }
                }
                &._complete {
                    &::before {
                        background: #14ab00;
                    }
                    > span {
                        color: #14ab00;
                        &:after {
                            color: #14ab00;
                            content: '\e610';
                            font-family: 'icons-blank-theme';
                            font-size: 28px;
                        }
                        &::before {
                            background: #14ab00;
                        }
                    }
                }
            }
        }
    }
    .opc-progress-bar-item {
        .lib-css(margin, 0 0 @checkout-progress-bar-item__margin);
        display: inline-block;
        position: relative;
        text-align: center;
        vertical-align: top;
        width: 50%;

        &:before { // Horizontal line
            .lib-css(background, @checkout-progress-bar-item__background-color);
            .lib-css(top, @checkout-progress-bar-item-element__width/2);
            content: '';
            height: 7px;
            left: 0;
            position: absolute;
            width: 100%;
        }

        &:first-child {
            &:before {
                .lib-css(border-radius, @checkout-progress-bar-item__border-radius 0 0 @checkout-progress-bar-item__border-radius);
            }
        }

        &:last-child {
            &:before {
                .lib-css(border-radius, 0 @checkout-progress-bar-item__border-radius @checkout-progress-bar-item__border-radius 0);
            }
        }

        > span {
            display: inline-block;
            padding-top: 45px;
            width: 100%;
            word-wrap: break-word;
            color: #e4e4e4;
            font-weight: 300;
            font-size: 16px;

            &:before, // Item element
            &:after {
                .lib-css(background, @checkout-progress-bar-item__background-color);
                .lib-css(height, @checkout-progress-bar-item-element__height);
                .lib-css(margin-left, -(@checkout-progress-bar-item-element__width/2));
                .lib-css(width, @checkout-progress-bar-item-element__width);
                border-radius: 50%;
                content: '';
                left: 50%;
                position: absolute;
                top: 0;
            }

            &:after { // Item element inner
                .lib-css(background, @checkout-progress-bar-item-element-inner__background-color);
                .lib-css(height, @checkout-progress-bar-item-element-inner__height);
                .lib-css(margin-left, -(@checkout-progress-bar-item-element-inner__width/2));
                .lib-css(top, @checkout-progress-bar-item-element-outer-radius__width);
                .lib-css(width, @checkout-progress-bar-item-element-inner__width);
                content: counter(i);
                counter-increment: i;
                .lib-typography(
                @_color: @checkout-progress-bar-item-element-inner__color,
                @_font-family: false,
                @_font-size: @checkout-progress-bar__font-size,
                @_font-style: false,
                @_font-weight: @font-weight__semibold,
                @_line-height: false
                );
            }
        }

        &._active {
            &:before {
                background: @checkout-progress-bar-item__active__background-color;
            }

            > span {
                .lib-css(color, @checkout-progress-bar-item__color);

                &:before {
                    .lib-css(background, @checkout-progress-bar-item__active__background-color);
                }

                &:after {
                    .lib-css(content, @checkout-progress-bar-item-element-inner__active__content);
                    .lib-css(font-family, @icons__font-name);
                    .lib-css(line-height, @checkout-progress-bar-item-element-inner__active__line-height);
                    .lib-font-size(@checkout-progress-bar-item-element-inner__active__font-size);
                }
            }
        }

        &._complete {
            cursor: pointer;

            > span {
                .lib-css(color, @checkout-progress-bar-item__color);

                &:after {
                    .lib-css(content, @checkout-progress-bar-item-element-inner__active__content);
                    .lib-css(font-family, @icons__font-name);
                    .lib-css(line-height, @checkout-progress-bar-item-element-inner__active__line-height);
                    .lib-font-size(@checkout-progress-bar-item-element-inner__active__font-size);
                }
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

}
