$limit-box-width: 300px;
$limit-box-height: 124px;
$limit-progress-bar-height: 10px;

.limit-box {
    width: $limit-box-width;
    min-width: $limit-box-width;
    min-height: $limit-box-height;
    border: $default-border;
    border-radius: $border-radius;
}

.limit-box-usage,
.limit-box-limit {
    width: 50%;
}

.limit-box-usage-value,
.limit-box-limit-value {
    display: block;
    width: 100%;
    height: $input-height;
    padding: $input-padding;
    color: var(--title-text-color);
    font-size: $input-font-size;
}

.limit-box-footer {
    width: 100%;
    height: $limit-progress-bar-height;
    background-color: var(--deprecated-light-grey);

    &.no-limit {
        background-color: var(--white);
    }
}

.limit-box-bar {
    height: 100%;
    background-color: var(--bright-turquoise-40);
}

@for $i from 0 through 100 {
    .limit-box-bar.progress-#{$i} {
        width: $i * 1%;

        @if $i >= 75 {
            background-color: var(--deprecated-orange);
        }

        @if $i == 100 {
            background-color: var(--critical-70);
        }
    }
}

.limit-box-bar.mod-green {
    background-color: var(--bright-turquoise-40);
}

.limit-box-bar.mod-orange {
    background-color: var(--deprecated-orange);
}

.limit-box-bar.mod-red {
    background-color: var(--critical-70);
}