//
//  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-bar {
        & {
            margin-top: 20px;
        }

        .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;
                display: flex;
                max-width: 60%;
            }

            .amprogressbar-value {
                margin-left: 20px;
                min-width: 50px;
            }

            & > .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: 94%;
                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;
                }
            }
        }
    }
}
