progress {
    display: inline-block;
    vertical-align: baseline;
}

progress {
    -webkit-appearance: none;
    -moz-appearance: none;
        appearance: none;
    display: inline-block;
    width: 100%;
    height: var(--progress-height);
    margin-bottom: calc(var(--spacing) / 2);
    overflow: hidden;
    border: 0;
    border-radius: var(--border-radius);
    background-color: var(--progress-background-color);
    color: var(--progress-color);
    
    &::-webkit-progress-bar {
        border-radius: var(--border-radius);
        background: transparent;
    }

    &[value]::-webkit-progress-value {
        background-color: var(--progress-color);
    }
    &::-moz-progress-bar {
        background-color: var(--progress-color);
    }

    @media (prefers-reduced-motion: no-preference) {
        &:indeterminate {
            background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left / 150% 150% no-repeat;
            animation: progressIndeterminate 1s linear infinite;
        
            &[value]::-webkit-progress-value {
                background-color: transparent;
            }
            &::-moz-progress-bar {
                background-color: transparent;
            }
        }
    }
}

@keyframes progressIndeterminate {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
}