@import "app/styles/variables";

bl-quota-display {
    height: 100%;
    padding: 0;
    vertical-align: top;
    display: block;
    overflow: auto;
    position: relative;

    > .details > .label {
        color: $secondary-text;
    }

    > .details > .value {
        color: $primary-text;
    }

    > .progress {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    > .progress mat-progress-bar {
        margin-top: 0;

        &.low-usage > .mat-progress-bar-fill:after {
            background-color: $success-color;
        }
        &.medium-usage > .mat-progress-bar-fill:after {
            background-color: $warn-color;
        }
        &.high-usage > .mat-progress-bar-fill:after {
            background-color: $danger-color;
        }
    }

    &[type="normal"] {
        > .details > .label {
            font-size: $font-size-small;
            height: 35%;
            margin: 3px 5px 0;
        }

        > .details > .value {
            font-size: 15px;
            color: $primary-color;
            margin: 0 5px;

            > .statistic {
                margin-bottom: 2px;
            }
        }

        > .progress mat-progress-bar {
            height: 4px;
            margin-top: 15px;

            .mat-progress-bar-buffer {
                background-color: transparent;
            }

            .mat-progress-bar-background {
                display: none;
            }
        }
    }

    &[type="compact"] {
        > .details {
            display: flex;
            > .label {
                flex: 1;
            }
        }

        > .progress {
            position: relative;
        }

        > .progress mat-progress-bar {
            height: 3px;
            margin-top: 3px;
        }
    }
}
