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

.pdisk-storage {
    --pdisk-vdisk-width: 8px;
    --pdisk-gap-width: 2px;

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-width: var(--pdisk-min-width);

    &__content {
        position: relative;

        display: block;
        flex: 1;

        border-radius: 4px;
    }

    &__vdisks {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;

        margin-bottom: 4px;

        white-space: nowrap;

        &_expert {
            gap: var(--g-spacing-half);

            margin-bottom: 6px;
        }
    }

    &__vdisks-row {
        display: flex;
        gap: var(--pdisk-gap-width);
    }

    &__vdisks-item {
        flex: 0 0 var(--pdisk-vdisk-width);

        min-width: var(--pdisk-vdisk-width);

        &_all {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .ydb-stack__item {
            .data-table__row:hover & {
                background: var(--ydb-data-table-color-hover);
            }
        }
    }

    &__vdisk-size-indicator {
        flex: none;
        align-self: center;

        max-width: 100%;
        height: 2px;

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

    &__vdisk-progress-bar_expert {
        --progress-bar-full-height: 14px;
        --progress-bar-compact-height: 14px;
        --progress-bar-compact-placeholder-margin-left: var(--g-spacing-half);
    }

    &__vdisk-progress-bar_all {
        --disk-border-radius: 3px;

        min-width: 0;
    }

    &__vdisk-indicator {
        flex-shrink: 0;

        margin: var(--g-spacing-half);
    }

    &__node-bar-content {
        position: absolute;
        z-index: 2;
        inset: 0;

        display: grid;
        align-items: center;
        grid-template-columns: 1fr auto 1fr;
    }

    &__node-bar-left {
        justify-self: start;
    }

    &__node-bar-center {
        justify-self: center;

        .storage-disk-progress-bar__title {
            margin-right: 0;
        }
    }

    &__node-bar-type {
        --ydb-progress-bar-font-color: var(--entity-state-font-color);

        display: flex;
        align-items: center;
        justify-self: end;

        gap: var(--g-spacing-1);
    }
}