@import "shared/mixins-and-vars";

/*
 * Example 2: more graphical
 */

/* All HTML5 progress enabled browsers */
.uam {
    display: block;

    /* Turns off styling - not usually needed, but good to know. */
    .appearance(none);

    /* Apply border. */
    border: inset 3px;

    /* Dimensions */
    width: 242px;
    height: 45px;
}

progress.uam {
    /*
    * Background of the progress bar background
    */

    /* Firefox and Polyfill */
    & {
        background: data-uri("../images/example2BW.png") #cccccc;
    }
    /* Chrome */
    &::-webkit-progress-bar {
        background: data-uri("../images/example2BW.png") #cccccc;
    }

    /*
    * Background of the progress bar value
    */

    /* Firefox */
    &::-moz-progress-bar {
        background: data-uri("../images/example2Color.png") #8f6534;
    }
    /* Chrome */
    &::-webkit-progress-value {
        background: data-uri("../images/example2Color.png") #8f6534;
    }

}

.uam[role="progressbar"] {
    background: data-uri("../images/example2BW.png") #cccccc;

    /* Polyfill */
    &:after {
        background-image: none; /* removes default background from polyfill */
    }

    & strong {
        display: none;
    }

    /* Polyfill */
    &[aria-valuenow]:before {
        content: "";
        display: block;
        height: 100%;
        background: data-uri("../images/example2Color.png") #8f6534;
    }

    .generate-progress-frames(10);

    .generate-progress-frames(@n, @i: 0) when (@i =< @n) {
        @val: @i * 10;
        &[aria-valuenow="@{val}"]:before {
            width: (@i * 100% / @n);
        }
        .generate-progress-frames(@n, (@i + 1));
    }
}

.uam,
.progress-test__button {
    display: block;
    margin: 0 auto;
}

.progress-test__button {
    margin-top: 10px;
}

.verbose {
    .generate-verbose-progress-frames(7);

    .generate-verbose-progress-frames(@n, @i: 0) when (@i =< @n) {
        &[aria-valuenow="@{i}"] li:nth-child(-n + @{i}) {
            font-weight: bold;
        }
        .generate-verbose-progress-frames(@n, (@i + 1));
    }

    progress& {
        appearance: none;
    }
}


.simplebar {
    display: block;
    .appearance(none);
    width: 242px;
    height: 30px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
}

progress.simplebar {
    /* Firefox and Polyfill */
    & {
        background-color: #cccccc;
        .common-progress-styles();
    }
    /* Chrome */
    &::-webkit-progress-bar {
        background-color: #cccccc;
        .common-progress-styles();
    }

    &::-moz-progress-bar {
        background-color: rgb(43, 194, 83);
        .common-progress-styles();
    }
    &::-webkit-progress-value {
        background-color: rgb(43, 194, 83);
        .common-progress-styles();
    }
}

.simplebar[role="progressbar"] {
    background-color: rgb(43, 194, 83);
    .common-progress-styles();

    /* Polyfill */
    &:after {
        background-image: none; /* removes default background from polyfill */
    }

    & strong {
        display: none;
    }

    &[aria-valuenow]:before {
        content: "";
        display: block;
        height: 100%;
        background-color: rgb(43, 194, 83);
        .common-progress-styles();
    }

    .generate-progress-frames(10);

    .generate-progress-frames(@n, @i: 0) when (@i =< @n) {
        @val: @i * 10;
        &[aria-valuenow="@{val}"]:before {
            width: (@i * 100% / @n);
        }
        .generate-progress-frames(@n, (@i + 1));
    }
}

.simplebar > div {
    background: #cccccc;
    width: 100%;
    height: 20px;
    border-radius: 10px;
}

@keyframes shine {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 50px;
    }
}

.common-progress-styles() {
    background-image: linear-gradient(
        center bottom,
        rgb(43, 194, 83) 37%,
        rgb(84, 240, 84) 69%
    );
    box-shadow:
        inset 0 2px 9px rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.4),
        0 0 5px 0 lightgray;
    position: relative;
    background-repeat: repeat;
    animation:
        shine 4s ease-in infinite,
        end 1s ease-out 1;
    transition: width 3s;
}

.gradientbar {
    display: block;
    .appearance(none);
    width: 242px;
    height: 30px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
}

progress.gradientbar {
    & {
        background-color: #cccccc;
    }
    &::-webkit-progress-bar {
        background-color: #cccccc;
    }
    &::-moz-progress-bar {
        background-color: rgb(43, 194, 83);
        .gradient-progress-styles();
    }
    &::-webkit-progress-value {
        background-color: rgb(43, 194, 83);
        .gradient-progress-styles();
    }
}

.gradientbar[role="progressbar"] {
    .gradient-progress-styles();

    /* Polyfill */
    &:after {
        background-image: none; /* removes default background from polyfill */
    }

    & strong {
        display: none;
    }

    &[aria-valuenow]:before {
        content: "";
        display: block;
        height: 100%;
        .gradient-progress-styles();
    }

    .generate-progress-frames(10);

    .generate-progress-frames(@n, @i: 0) when (@i =< @n) {
        @val: @i * 10;
        &[aria-valuenow="@{val}"]:before {
            width: (@i * 100% / @n);
        }
        .generate-progress-frames(@n, (@i + 1));
    }
}

progress.gradientbar > div {
    background: #cccccc;
    width: 100%;
    height: 20px;
    border-radius: 10px;
}

.gradient-progress-styles() {
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    z-index: 1;
    background-size: 50px 50px;
    animation: move 2s linear infinite;
    overflow: hidden;
}