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

.ydb-clusters {
    @include mixins.body-2-typography();

    &__clusters-count {
        padding-bottom: var(--g-spacing-2);
    }

    &__availability-popup .g-select-list__option {
        align-items: flex-start;

        padding-block: var(--g-spacing-2);
    }

    &__cluster-name-wrapper {
        min-width: 0;
    }

    &__cluster-name {
        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &__unavailable-label {
        display: inline-flex;
        flex-shrink: 0;

        border-radius: var(--g-focus-border-radius);

        &:focus-visible {
            outline: 2px solid var(--g-color-line-focus);
            outline-offset: 2px;
        }
    }
    &__cluster-versions {
        text-decoration: none;
    }

    &__cluster-dc {
        white-space: normal;
    }

    &__empty-cell {
        color: var(--g-color-text-secondary);
    }

    &__status-button {
        display: inline-flex;

        padding: 0;

        cursor: pointer;

        border: 0;
        background: transparent;
    }

    & .g-progress__item {
        transition: none;
    }

    &__description {
        max-width: 200px;

        white-space: pre-wrap;
    }

    &__table-wrapper {
        --data-table-cell-align: top;
        --data-table-cell-vertical-padding: var(--g-spacing-3);
    }

    &__balancer-copy-icon {
        color: var(--g-color-text-secondary);
    }
    &__search-icon {
        margin: 0 var(--g-spacing-1);

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

    &__progress {
        --g-progress-filled-background-color: var(--ydb-color-status-green);
    }
}