.ucla-progress {
    width: 100%;
    
    &__bar {
        all: revert;
        width: 100%;
        display: block;

        &[value] {
            --color: #00598c;
            --background: #e5e5e5;
          
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
            width: 100%;
            border-radius: 10em;
            height: .75rem;
            background: var(--background);
          }
          &[value]::-webkit-progress-bar {
            border-radius: 10em;
            background: var(--background);
          }
          &[value]::-webkit-progress-value {
            border-radius: 10em;
            background: var(--color);
          }
          &[value]::-moz-progress-bar {
            border-radius: 10em;
            background: var(--color);
          }

        &--ucla-blue[value] {
            --color: #2774ae;
        }
        &--gold[value] {
            --color: #ffd100;
        }

        &--light-blue[value] {
            --color: #8bb8e8;
        }

        &--thin[value] {
            height: .375rem;
        }

        &--thick[value] {
            height: 1.125rem;
        }

        &--thicker[value] {
            height: 1.5rem;
        }
    }

    

    &__info {
        display: flex;
        justify-content: space-between;
        margin-bottom: .5rem;
    }

    &__assistive {
        font-size: .75rem;
        line-height: 1.3333;
        margin-top: .5rem;
        color: #666666;
    }
}