//
//  Amasty Progressbar Component
//  ____________________________________________

//
//  Variables
//  _____________________________________________

@amprogressbar__height: 20px;
@amprogressbar__background-color: #e1e1e1;
@amprogressbar-value__background-color: #1e79c2;
@amprogressbar-percentage__background-color: #51adef;
@amprogressbar-clock-icon__background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwIDBDNC40ODYgMCAwIDQuNDg2IDAgMTBzNC40ODYgMTAgMTAgMTAgMTAtNC40ODYgMTAtMTBTMTUuNTE0IDAgMTAgMHptMCAxOS4xM0M0Ljk2NiAxOS4xMy44NyAxNS4wMzYuODcgMTAgLjg3IDQuOTY1IDQuOTY2Ljg3IDEwIC44N2M1LjAzNCAwIDkuMTMgNC4wOTYgOS4xMyA5LjEzIDAgNS4wMzQtNC4wOTYgOS4xMy05LjEzIDkuMTN6IiBmaWxsPSIjMUU3OUMyIi8+PHBhdGggZD0iTTEwLjgyIDEwLjIwNWEuODQzLjg0MyAwIDAgMCAuMDI4LS4yMDUuODQ0Ljg0NCAwIDAgMC0uMDI4LS4yMDZsMS40NS0xLjQ1YS40MzUuNDM1IDAgMSAwLS42MTQtLjYxNWwtMS40NSAxLjQ1QS44NDguODQ4IDAgMSAwIDEwIDEwLjg0OGEuODMuODMgMCAwIDAgLjIwNS0uMDI4bDIuNzU2IDIuNzU2YS40MzMuNDMzIDAgMCAwIC42MTQgMCAuNDM0LjQzNCAwIDAgMCAwLS42MTVsLTIuNzU2LTIuNzU2eiIgZmlsbD0iIzFFNzlDMiIvPjxwYXRoIGQ9Ik0xOC4xNTcgOS45OTdBOC4xMyA4LjEzIDAgMCAwIDE1LjggNC4yNzFjLS4wMS0uMDEzLS4wMi0uMDI3LS4wMzItLjA0LS4wMTItLjAxMS0uMDI2LS4wMi0uMDQtLjAzMUE4LjEzIDguMTMgMCAwIDAgMTAgMS44NDMgOC4xMyA4LjEzIDAgMCAwIDQuMjcgNC4yYy0uMDEyLjAxLS4wMjYuMDItLjAzOC4wMzJzLS4wMjEuMDI2LS4wMzEuMDM5QTguMTMgOC4xMyAwIDAgMCAxLjg0MyAxMCA4LjEzIDguMTMgMCAwIDAgNC4yIDE1LjcyOWMuMDEuMDEzLjAyLjAyNy4wMzIuMDM5cy4wMjYuMDIxLjA0LjAzMmE4LjEzIDguMTMgMCAwIDAgNS43MjUgMi4zNTdoLjAwNmE4LjEzIDguMTMgMCAwIDAgNS43MjYtMi4zNTdjLjAxMy0uMDEuMDI3LS4wMi4wNC0uMDMyLjAxMS0uMDEyLjAyLS4wMjYuMDMxLS4wNGE4LjEzIDguMTMgMCAwIDAgMi4zNTctNS43MjV2LS4wMDZ6bS0yLjIzMy40MzhoMS4zNWE3LjI1OCA3LjI1OCAwIDAgMS0xLjgyNiA0LjM5OGwtLjk1Mi0uOTUyYS40MzUuNDM1IDAgMCAwLS42MTUuNjE1bC45NTIuOTUyYTcuMjU3IDcuMjU3IDAgMCAxLTQuMzk4IDEuODI1di0xLjM1YS40MzUuNDM1IDAgMCAwLS44NyAwdjEuMzVhNy4yNTYgNy4yNTYgMCAwIDEtNC4zOTgtMS44MjVsLjk1Mi0uOTUyYS40MzUuNDM1IDAgMSAwLS42MTUtLjYxNWwtLjk1Mi45NTJhNy4yNTcgNy4yNTcgMCAwIDEtMS44MjUtNC4zOThoMS4zNWEuNDM1LjQzNSAwIDEgMCAwLS44N2gtMS4zNWE3LjI1OCA3LjI1OCAwIDAgMSAxLjgyNS00LjM5OGwuOTUyLjk1MmEuNDMzLjQzMyAwIDAgMCAuNjE1IDAgLjQzNS40MzUgMCAwIDAgMC0uNjE1bC0uOTUyLS45NTJhNy4yNTggNy4yNTggMCAwIDEgNC4zOTgtMS44MjZ2MS4zNWEuNDM1LjQzNSAwIDEgMCAuODcgMHYtMS4zNWMxLjY4Mi4xIDMuMjEyLjc3MyA0LjM5OCAxLjgyNmwtLjk1Mi45NTJhLjQzNS40MzUgMCAxIDAgLjYxNS42MTVsLjk1Mi0uOTUyYTcuMjYgNy4yNiAwIDAgMSAxLjgyNiA0LjM5OGgtMS4zNWEuNDM1LjQzNSAwIDEgMCAwIC44N3oiIGZpbGw9IiMxRTc5QzIiLz48L3N2Zz4=) center no-repeat;
@amprogressbar-clock-icon__size: 20px;

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

& when (@media-common = true) {
    .amprogressbar-progress-timer {
        & {
            display: flex;
        }

        & > .amprogressbar-clock {
            margin: 0 5px 0 15px;
            width: @amprogressbar-clock-icon__size;
            height: @amprogressbar-clock-icon__size;
            background: @amprogressbar-clock-icon__background;
            background-size: cover;
        }
    }

    .amprogressbar-progress-container {
        & {
            position: relative;
            flex: auto;
            margin: auto;
        }

        & > .amprogressbar-percentage {
            & {
                position: absolute;
                bottom: ~"calc(100% + 10px)";
                padding: 3px 10px;
                border-radius: 5px;
                color: #fff;
                background: @amprogressbar-percentage__background-color;
                transform: translateX(-50%);
            }

            &:before {
                position: absolute;
                bottom: -2px;
                left: 50%;
                z-index: -1;
                display: block;
                width: 10px;
                height: 10px;
                content: '';
                background: @amprogressbar-percentage__background-color;
                transform: translateX(-50%) rotate(45deg);
            }
        }
    }

    .amprogressbar-progress-wrapper {
        & {
            width: 100%;
            height: @amprogressbar__height;
            overflow: hidden;
            border-radius: 20px;
        }

        & > .amprogressbar-progress {
            & {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                border: 0;
                text-align: right;
                background: @amprogressbar__background-color;
            }


            &::-webkit-progress-bar {
                border: 0;
                background: @amprogressbar__background-color;
            }

            &::-moz-progress-bar {
                border: 0;
                background: @amprogressbar-value__background-color;
            }

            &::-webkit-progress-value {
                border: 0;
                background: @amprogressbar-value__background-color;
            }

            &::-ms-fill {
                border: 0;
                background: @amprogressbar-value__background-color;
            }
        }
    }
}