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

$block: '.ydb-storage-expert-mode-panel';

#{$block} {
    display: flex;
    flex-direction: column;
    gap: var(--g-spacing-2);

    width: 100%;
    height: 80px;
    padding: var(--g-spacing-3);

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

    &__empty-statistics {
        font-style: italic;
    }

    &__label-danger-heavy {
        color: var(--g-color-text-light-primary);
        background-color: var(--g-color-base-danger-heavy);
    }

    &__capacity-alert-option {
        width: 100%;
    }

    &__capacity-alert-option-abbreviation {
        width: 40px;
        margin-inline-start: auto;

        .g-label__text {
            justify-content: center;
        }
    }
}

// When the expert-mode panel is rendered inside the table layout, grow the
// controls slot height so its sticky-header offset accounts for the panel
// (62px controls row + 8px Flex gap + 80px panel = 150px), and align the
// extra-controls (column setup) with the top controls row instead of the
// vertical center of the taller controls block.
.ydb-table-with-controls-layout:has(#{$block}) {
    --ydb-table-with-controls-layout-controls-height: 150px;
    --ydb-table-with-controls-layout-controls-align-items: baseline;
}