@import 'theme/variables.scss';
@import 'scss/styles.scss';

.progress-bar {
    .progress-bar-line-container {
        &.full-line {
            width: 100%;
        }
        &.small-line {
            width: 24px;
        }
        height: 8px;
        overflow: hidden;
        position: relative;

        .progress-bar-line-back {
            opacity: 0.2;
            width: 100%;
            height: 8px;
            position: absolute;
        }

        .progress-bar-line-front {
            height: 8px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .expired {
            background: $ta-red-10;
            opacity: 1;
        }

        .back-gray {
            background: $muted;
            opacity: 0.2;
        }

        .back-yellow {
            background: $ta-yellow-5;
            opacity: 0.2;
        }

        .back-red {
            background: $ta-red-10;
            opacity: 0.2;
        }

        .front-gray {
            background: $muted;
        }
        .front-yellow {
            background: $ta-yellow-5;
        }
        .front-red {
            background: $ta-red-10;
        }

        &.small-line {
            .expired,
            .front-red {
                background: $ta-red-10;
                opacity: 1;
            }

            .front-yellow {
                background: $ta-yellow-1;
            }
        }
    }
}