.ydb-tenant-storage-summary-card {
    display: flex;
    flex-direction: column;
    gap: var(--g-spacing-4);

    padding: var(--g-spacing-4);

    border-radius: var(--g-border-radius-xs);
    background: var(--g-color-base-generic);

    &_first {
        padding-bottom: var(--g-spacing-3);

        border-radius: var(--g-border-radius-m) var(--g-border-radius-xs) var(--g-border-radius-xs)
            var(--g-border-radius-xs);
    }

    &_last {
        border-radius: var(--g-border-radius-xs) var(--g-border-radius-xs) var(--g-border-radius-m)
            var(--g-border-radius-m);
    }

    &_grouped {
        gap: var(--g-spacing-3);
    }

    &__copy {
        display: flex;
        flex-direction: column;
        gap: var(--g-spacing-half);

        min-width: 0;
    }

    &__rows {
        display: flex;
        flex-direction: column;
        gap: var(--g-spacing-3);
    }

    &__row {
        display: flex;
        flex-direction: column;
        gap: 0;

        min-width: 0;
    }

    &__row_grouped {
        gap: 0;
    }

    &__row-header {
        min-width: 0;
    }

    &__row-label {
        min-width: 72px;
        padding-top: var(--g-spacing-2);
    }

    &__metrics {
        display: flex;
        flex: 0 0 auto;
        align-items: stretch;
        gap: var(--g-spacing-10);
    }

    &__row_grouped &__metrics {
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }

    &__metric {
        display: flex;
        flex-direction: column;
        justify-content: center;

        min-width: 101px;
        padding-left: var(--g-spacing-10);

        border-left: 1px solid var(--g-color-line-generic);

        &_emphasize {
            width: auto;
            margin-top: calc(-1 * var(--g-spacing-2));
            margin-bottom: calc(-1 * var(--g-spacing-2));
            padding: var(--g-spacing-2) var(--g-spacing-3);

            border-left: 0;
            border-radius: var(--g-border-radius-m);
            background: var(--g-color-base-generic-accent);
        }

        &_no-data {
            background: transparent;
        }

        &_hide-divider {
            min-width: 70px;
            padding-left: 0;

            border-left: 0;
        }

        &_grouped {
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            gap: var(--g-spacing-1);

            width: auto;
            min-width: 88px;
            padding-left: var(--g-spacing-6);

            white-space: nowrap;
        }

        &_grouped#{&}_hide-divider {
            min-width: 118px;
            padding-left: 0;
        }

        &_grouped#{&}_emphasize {
            gap: var(--g-spacing-1);

            width: auto;
            padding: 0;

            background: transparent;
        }
    }

    &__metric-label {
        margin-top: var(--g-spacing-1);
    }

    &__metric-note {
        display: flex;
        flex-direction: column;
        gap: var(--g-spacing-2);

        max-width: 280px;
    }

    &__row_grouped &__metric-label {
        margin-top: 0;
    }

    &__metric-value {
        flex-shrink: 0;
    }

    &__progress {
        width: 100%;
        margin-top: var(--g-spacing-4);
    }

    &__legend {
        margin-top: var(--g-spacing-3);
    }

    &__row_grouped &__progress,
    &__row_grouped &__legend {
        margin-top: var(--g-spacing-2);
    }

    &__row_grouped &__progress-bar,
    &__row_grouped .ydb-tenant-storage-segments__progress {
        height: 10px;
    }

    &__progress-bar {
        --g-progress-empty-background-color: var(--g-color-sfx-shadow);

        overflow: hidden;

        height: 20px;

        border-radius: var(--g-border-radius-xs);
    }

    &__progress-bar .g-progress__item {
        border-radius: var(--g-border-radius-xs);

        transition: none;
    }

    &__used {
        white-space: nowrap;
    }
}