capacity-bar {
    align-items: center;
    color: @at-color-body-background-dark;
    display: flex;
    font-size: @at-font-size;
    min-width: 100px;
    white-space: nowrap;

    .CapacityBar {
        background-color: @default-bg;
        border-radius: 100vw;
        border: 1px solid @default-link;
        display: flex;
        flex: 1;
        height: 10px;
        margin-right: @at-space-2x;
        min-width: 100px;
        overflow: hidden;
        width: 100%;
    }

    .CapacityBar-remaining {
        background-color: @default-link;
        flex: 0 0 auto;
    }

    .CapacityBar-consumed {
        flex: 0 0 auto;
    }

    .CapacityBar--offline {
        color: @at-red;
        border-color:  @at-gray-a9;

        .CapacityBar-remaining {
            background-color:  @at-gray-b7;
        }
    }

    .Capacity-details--label {
        margin-right: @at-space-2x;
        text-align: right;
        text-transform: uppercase;
    }

    .Capacity-details--percentage {
        width: 40px;
    }

    &:only-child {
        margin-right: 50px;
    }
}