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

.ydb-pdisk-space-distribution {
    --entity-state-border-color-green: var(--g-color-base-positive-medium);
    --entity-state-border-color-blue: var(--g-color-base-info-heavy);
    --entity-state-border-color-yellow: var(--g-color-base-warning-medium);
    --entity-state-border-color-orange: var(--ydb-color-status-orange);
    --entity-state-border-color-darkgrey: var(--g-color-base-neutral-heavy);

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

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

        min-width: 500px;
        max-width: 800px;
        height: auto;
        padding: var(--g-spacing-2);
    }

    &__slot-wrapper {
        z-index: 1;

        width: 100%;

        border-radius: var(--disk-border-radius);
        background-color: var(--g-color-base-background);
    }

    &__slot {
        display: flex;

        width: 100%;
        height: 100%;
    }

    &__slot-content {
        z-index: 1;

        display: flex;
        flex-grow: 1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        padding: 0 var(--g-spacing-2);

        line-height: 15px;
    }

    &__slot-id {
        margin-right: var(--g-spacing-3);

        font-weight: 600;
    }

    &__vdisk-popup {
        --g-definition-list-item-gap: var(--g-spacing-2);
        @include mixins.body-2-typography();
    }
}