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

.ydb-diagnostics-table-info {
    &__compaction-disabled-button-wrapper {
        display: inline-flex;
    }

    &__compaction-popover {
        max-width: 260px;
        padding: var(--g-spacing-2) var(--g-spacing-3);
    }

    &__compaction-banner {
        width: 100%;
        max-width: 656px;
        margin-bottom: var(--g-spacing-4);
        padding: var(--g-spacing-4) var(--g-spacing-5);

        border-radius: var(--g-border-radius-m);
        background-color: var(--g-color-base-info-light);
    }

    &__compaction-banner-icon {
        flex-shrink: 0;

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

    &__compaction-banner-content {
        flex: 1 1 auto;

        min-width: 0;
    }

    &__compaction-progress {
        overflow: hidden;

        width: 100%;
        height: 6px;

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

    &__compaction-progress-fill {
        height: 100%;

        border-radius: inherit;
        background-color: var(--g-color-base-info-heavy);

        transition: width 0.4s ease;
    }

    &__compaction-dialog-body {
        padding-top: var(--g-spacing-3);
        padding-bottom: 0;
    }

    &__compaction-dialog-row {
        width: 100%;
    }

    &__compaction-label-wrapper {
        width: 100%;
        max-width: 150px;
    }

    &__compaction-label {
        color: var(--g-color-text-secondary);

        @include mixins.body-1-typography();
    }

    &__compaction-input {
        max-width: 140px;
    }

    &__compaction-error {
        overflow-wrap: anywhere;
    }
}