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

//
//  Variables
//  _____________________________________________

$checkout-progress-bar__font-size: 18px;
$checkout-progress-bar__font-weight: 400;
$checkout-progress-bar__margin: 1rem;

$checkout-progress-bar-item__background-color: $gray-200;
$checkout-progress-bar-item__border-radius: 6px;
$checkout-progress-bar-item__color: $gray-400;
$checkout-progress-bar-item__margin: 1rem;
$checkout-progress-bar-item__transition: background .3s;
$checkout-progress-bar-item__width: 185px;

$checkout-progress-bar-item__active__background-color: orange;
$checkout-progress-bar-item__active__color: #333;
$checkout-progress-bar-item__active__font-weight: 700;
$checkout-progress-bar-item__complete__color: $link-color;
$checkout-progress-bar-item__hover__background-color: darken($checkout-progress-bar-item__background-color, 5%);

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

$checkout-progress-bar-item-element-inner__background-color: #FFF;
$checkout-progress-bar-item-element-inner__border-color: $checkout-progress-bar-item__background-color;
$checkout-progress-bar-item-element-inner__color: #333;
$checkout-progress-bar-item-element-inner__height: 30px;
$checkout-progress-bar-item-element-inner__width: 30px;
$checkout-progress-bar-item-element-inner__active__border-color:orange;
$checkout-progress-bar-item-element-inner__active__content: "1";


.opc-progress-bar {
    display: none;
}


@include media-breakpoint-up(md){


    .opc-progress-bar {
        margin: 0 0 $checkout-progress-bar__margin;
        counter-reset: i;
        display: block;
        font-size: 0;
    }

    .opc-progress-bar-item {
        margin: 0 0 $checkout-progress-bar-item__margin;
        width: $checkout-progress-bar-item__width;
        display: inline-block;
        position: relative;
        text-align: center;
        vertical-align: top;

        &:before { // Horizontal line
                   background: $checkout-progress-bar-item__background-color;
                   border: 1px solid $checkout-progress-bar-item-element-inner__border-color;
                   top: $checkout-progress-bar-item-element__width/2;
                   transition: $checkout-progress-bar-item__transition;
                   content: '';
                   height: 7px;
                   left: 0;
                   position: absolute;
                   width: 100%;
        }

        &:first-child {
            &:before {
                border-radius: $checkout-progress-bar-item__border-radius 0 0 $checkout-progress-bar-item__border-radius;
            }
        }

        &:last-child {
            &:before {
                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;

            //STYLE FONT
            color: #333333;
            font-weight: 600;
            font-size: .5rem;

            &:before, // Item element
                &:after {
                background: $checkout-progress-bar-item__background-color;
                border: 1px solid $checkout-progress-bar-item-element-inner__border-color;
                height: $checkout-progress-bar-item-element__height;
                margin-left: -($checkout-progress-bar-item-element__width/2);
                transition: $checkout-progress-bar-item__transition;
                width: $checkout-progress-bar-item-element__width;
                border-radius: 50%;
                content: '';
                left: 50%;
                position: absolute;
                top: 3px;
            }

            &:after { // Item element inner
                      background: $checkout-progress-bar-item-element-inner__background-color;
                      height: $checkout-progress-bar-item-element-inner__height;
                      margin-left: -($checkout-progress-bar-item-element-inner__width/2);
                      top: 7px;
                      width: $checkout-progress-bar-item-element-inner__width;
                      content: counter(i);
                      counter-increment: i;

                      //STYLE FONR
                      color: #333333;
                      font-size: 1rem;                               
                      line-height: $checkout-progress-bar-item-element-inner__height;
            }
        }

        &._complete {
            cursor: pointer;

            &:hover {
                &:before {
                    background: $checkout-progress-bar-item__hover__background-color;
                }

                > span {
                    &:before {
                        background: $checkout-progress-bar-item__hover__background-color;
                    }
                }
            }

            > span {
                color: $checkout-progress-bar-item__complete__color;

                &:after {
                    font-family: "";
                    content: $checkout-progress-bar-item-element-inner__active__content;
                }
            }
        }

        &._active {
            &:before {
                background: $checkout-progress-bar-item__active__background-color;
                border-color: $checkout-progress-bar-item-element-inner__active__border-color;
            }

            > span {
                color: $checkout-progress-bar-item__active__color;
                font-weight: $checkout-progress-bar-item__active__font-weight;

                &:before {
                    background: $checkout-progress-bar-item__active__background-color;
                    border-color: $checkout-progress-bar-item-element-inner__active__border-color;
                }

                &:after {
                    border-color: $checkout-progress-bar-item-element-inner__active__border-color;
                    content: $checkout-progress-bar-item-element-inner__active__content;
                    font-family: "";
                }
            }
        }
    }
}
