DiskStateProgressBar.scss

@use '../../styles/mixins';

.storage-disk-progress-bar {
    $block: &;

    $border-width: 1px;
    $outer-border-radius: 4px;
    $inner-border-radius: $outer-border-radius - $border-width;

    --progress-bar-full-height: var(--g-text-body-3-line-height);
    --progress-bar-compact-height: 12px;

    position: relative;
    z-index: 0;

    min-width: 50px;
    height: var(--progress-bar-full-height);

    text-align: center;

    color: var(--g-color-text-primary);
    border: $border-width solid var(--entity-state-border-color);
    border-radius: $outer-border-radius;
    background-color: var(--entity-state-background-color);
    @include mixins.entity-state-colors();

    &_compact {
        min-width: 0;
        height: var(--progress-bar-compact-height);

        border-radius: 2px;
    }

    &_faded {
        background-color: unset;
    }

    &_inactive {
        opacity: 0.5;
    }

    &_empty {
        color: var(--g-color-text-hint);
        border-style: dashed;
        background-color: unset;
    }

    &__fill-bar {
        position: absolute;
        top: 0;
        left: 0;

        height: 100%;

        border-radius: $inner-border-radius 0 0 $inner-border-radius;
        background-color: var(--entity-state-fill-color);

        &_faded {
            // Bg color is light variant, use it to make bar less bright
            background-color: var(--entity-state-background-color);
        }

        &_compact {
            border-radius: 1px;
        }

        &_inverted {
            right: 0;
            left: auto;

            border-radius: 0 $inner-border-radius $inner-border-radius 0;
        }
    }

    &__title {
        position: relative;
        z-index: 2;

        font-size: var(--g-text-body-1-font-size);
        // bar height minus borders
        line-height: calc(var(--progress-bar-full-height) - #{$border-width * 2});

        color: inherit;
    }
}