//
//  Amasty Steps Component
//  ____________________________________________

//
//  Variables
//  _____________________________________________

@amsteps-count-of-steps: 3;
@amsteps-active-step__color: #333;
@amsteps-active-step__background: #1e79c2;
@amsteps-active-step__size: 30px;
@amsteps-inactive-step__color: #c2c2c2;
@amsteps-inactive-step__size: 20px;
@amsteps-done-step__background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMSA0bDMuNSAzTDkgMSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) center no-repeat;
@amsteps-error-step__background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0uMjkzIDEuNzA3QTEgMSAwIDAgMSAxLjcwNy4yOTNMNiA0LjU4NiAxMC4yOTMuMjkzYTEgMSAwIDEgMSAxLjQxNCAxLjQxNEw3LjQxNCA2bDQuMjkzIDQuMjkzYTEgMSAwIDAgMS0xLjQxNCAxLjQxNEw2IDcuNDE0bC00LjI5MyA0LjI5M2ExIDEgMCAwIDEtMS40MTQtMS40MTRMNC41ODYgNiAuMjkzIDEuNzA3eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) center no-repeat;
@amsteps-error__color: #d80f33;
@amsteps-line-between-steps__height: 2px;

//
//  Common
//  ----------------------------------------------

& when (@media-common = true) {
    .amsteps-container {
        .amsteps-icons-wrapper {
            & {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-bottom: 5px;
                list-style: none;
                color: #fff;;
                counter-reset: step;
            }

            .amsteps-icon {
                & {
                    position: relative;
                }

                &:after {
                    content: '';
                    position: relative;
                    z-index: 2;
                    display: block;
                    width: @amsteps-inactive-step__size;
                    height: @amsteps-inactive-step__size;
                    margin: auto;
                    text-align: center;
                    background: @amsteps-inactive-step__color;
                    border-radius: 20px;
                    counter-increment: step;
                }
            }

            .amsteps-icon:not(:nth-of-type(1)) {
                &:before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 50%;
                    z-index: 1;
                    display: block;
                    width: 100%;
                    height: @amsteps-line-between-steps__height;
                    background: @amsteps-inactive-step__color;
                    transform: translateY(-50%);
                }
            }

            .amsteps-icon.-active:after {
                content: counter(step);
                z-index: 3;
                display: flex;
                justify-content: center;
                align-items: center;
                width: @amsteps-active-step__size;
                height: @amsteps-active-step__size;
                font-weight: 600;
                font-size: 14px;
                background: @amsteps-active-step__background;
            }

            .amsteps-icon.-active:not(:nth-of-type(1)),
            .amsteps-icon.-done:not(:nth-of-type(1)) {
                &:before {
                    background: @amsteps-active-step__background;
                }
            }

            .amsteps-icon.-done:after {
                content: '';
                z-index: 4;
                display: block;
                background: @amsteps-active-step__background @amsteps-done-step__background-image;
                background-size: 60%;
            }

            .amsteps-icon.-error:after {
                content: '';
                background: @amsteps-error__color @amsteps-error-step__background-image;
                background-size: 40%;
            }
        }

        .amsteps-titles-wrapper {
            & {
                display: flex;
                width: 100%;
                margin: 0;
                list-style: none;
                font-weight: 600;
                color: @amsteps-active-step__color;
            }

            .amsteps-title {
                position: relative;
                font-weight: 400;
                font-size: 14px;
                text-align: center;
                word-break: break-word;
                word-wrap: break-word;
                color: #666666;
                visibility: visible;
            }

            .amsteps-title.-active {
                font-weight: 600;
            }

            .amsteps-title.-done,
            .amsteps-title.-active {
                color: @amsteps-active-step__color;
            }

            .amsteps-title.-error {
                color: @amsteps-error__color;
            }
        }

        .amsteps-icon,
        .amsteps-title {
            width: 100% / @amsteps-count-of-steps;
        }
    }
    .amcustomerimport-result-container {
        display: flex;
        flex-direction: column;
    }

    .amcustomerimport-modal-container .modal-inner-wrap {
        width: 50%;
    }

    .amsteps-result-container {
        & {
            align-self: center;
            flex-basis: 33%;
            margin-top: 20px;
            width: 33.33333333%;
            text-align: center;
        }

        .amcustomerimport-button {
            & {
                box-sizing: border-box;
                padding: 5px 10px;
                border: 1px solid #adadad;
                background: #e3e3e3;
                color: #545454;
                text-decoration: none;
            }

            &:hover {
                background-color: #dbdbdb;
                box-shadow: none;
                color: #514943;
            }
        }
    }

    .amcustomerimport-modal-container .messages {
        padding-top: 30px;
        margin-top: 30px !important;
        border-top: 1px solid #ccc;
    }
}
