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

.ydb-pool-usage {
    @include mixins.body-2-typography();

    &__info {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__pool-name {
        color: var(--g-color-text-primary);
    }

    &__value {
        display: flex;
        align-items: center;
    }

    &__threads {
        font-size: var(--g-text-body-1-font-size);

        color: var(--g-color-text-hint);
    }

    &__percents {
        margin-right: 2px;

        font-size: var(--g-text-body-1-font-size);

        color: var(--g-color-text-primary);
    }

    &__visual {
        position: relative;

        display: flex;
        overflow: hidden;
        justify-content: center;
        align-items: center;

        height: 6px;

        font-size: var(--g-text-body-2-font-size);

        border-radius: 4px;
        background-color: var(--g-color-base-generic-accent);
    }

    &__usage-line {
        position: absolute;
        top: 0;
        left: 0;

        height: 100%;

        &_type_green {
            background-color: var(--ydb-color-status-green);
        }
        &_type_blue {
            background-color: var(--ydb-color-status-blue);
        }
        &_type_yellow {
            background-color: var(--ydb-color-status-yellow);
        }
        &_type_red {
            background-color: var(--ydb-color-status-red);
        }
    }
}