/* Progress indicators
   ========================================================================== */

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Styled progress indicators.
 *
 * Example HTML:
 *
 * <progress class="txp-upload-progress"></progress>
 */

.txp-upload-progress {
    box-sizing: border-box;
    width: 100%;
    max-width: 30em; // 390px / 13px
    height: 8px;
    border: 1px solid $color-border;
    background-color: $color-gradient-to;
    appearance: none;
}

// WebKit/Blink.

.txp-upload-progress::-webkit-progress-bar {
    background-color: $color-gradient-to;
}

.txp-upload-progress::-webkit-progress-value {
    animation: progressbar-stripes linear 4s infinite;
    background-color: $color-accent-gradient-to;
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.33) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.33) 50%,
            rgba(255, 255, 255, 0.33) 75%,
            transparent 75%,
            transparent
        );
    background-size: 24px 24px;
}

.txp-upload-progress:indeterminate::-webkit-progress-bar {
    animation: progressbar-stripes linear 4s infinite;
    background-color: $color-border;
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.25) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.25) 75%,
            transparent 75%,
            transparent
        );
    background-size: 24px 24px;
}

// Stop animation at 100% progress.

.txp-upload-progress[value="1"]::-webkit-progress-value {
    background-image: none;
}

// Gecko/Quantum.

.txp-upload-progress::-moz-progress-bar {
    /* autoprefixer: off */
    animation: progressbar-stripes linear 4s infinite;
    background-color: $color-accent-gradient-to;
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.33) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.33) 50%,
            rgba(255, 255, 255, 0.33) 75%,
            transparent 75%,
            transparent
        );
    background-size: 24px 24px;
}

.txp-upload-progress:indeterminate::-moz-progress-bar {
    /* autoprefixer: off */
    animation: progressbar-stripes linear 4s infinite;
    background-color: $color-border;
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.25) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.25) 75%,
            transparent 75%,
            transparent
        );
    background-size: 24px 24px;
}

// Stop animation at 100% progress.

.txp-upload-progress[value="1"]::-moz-progress-bar {
    background-image: none;
}

// Trident/EdgeHTML.

.txp-upload-progress::-ms-fill {
    /* autoprefixer: off */
    animation: progressbar-stripes linear 4s infinite;
    border: 0;
    background-color: $color-accent-gradient-to;
    background-image:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.33) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.33) 50%,
            rgba(255, 255, 255, 0.33) 75%,
            transparent 75%,
            transparent
        );
    background-size: 24px 24px;
}

// Stop animation at 100% progress.

.txp-upload-progress[value="1"]::-ms-fill {
    background-image: none;
}

@include dark-mode {
    .txp-upload-progress {
        border-color: $dark-color-border;
        background-color: $dark-color-background-box;
    }

    // WebKit/Blink.

    .txp-upload-progress::-webkit-progress-bar {
        background-color: $dark-color-background-box;
    }

    .txp-upload-progress:indeterminate::-webkit-progress-bar {
        background-color: $dark-color-border;
    }

    // Gecko/Quantum.

    .txp-upload-progress:indeterminate::-moz-progress-bar {
        background-color: $dark-color-border;
    }
}

/**
 * Reverse the progress direction in RTL languages.
 */

// WebKit/Blink.

[dir="rtl"] .txp-upload-progress::-webkit-progress-value {
    animation-direction: reverse;
}

[dir="rtl"] .txp-upload-progress:indeterminate::-webkit-progress-bar {
    animation-direction: reverse;
}

// Gecko/Quantum.

[dir="rtl"] .txp-upload-progress::-moz-progress-bar {
    /* autoprefixer: off */
    animation-direction: reverse;
}

[dir="rtl"] .txp-upload-progress:indeterminate::-moz-progress-bar {
    /* autoprefixer: off */
    animation-direction: reverse;
}

// Trident/EdgeHTML.

[dir="rtl"] .txp-upload-progress::-ms-fill {
    /* autoprefixer: off */
    animation-direction: reverse;
}