.ydb-gravity-graph {
    &__block {
        cursor: auto;

        border: none;
        background: none;
    }

    &__block-content {
        width: 100%;
        padding: 8px 12px;

        font-family: var(--g-font-family);
        font-size: var(--g-text-body-short-font-size);
        line-height: var(--g-text-body-short-line-height);

        border: 1px solid var(--g-color-line-generic);
        background: var(--g-color-base-float);
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);

        &[aria-haspopup='dialog'] {
            cursor: pointer;
        }
    }

    &__block-id {
        position: absolute;
        top: 4px;
        right: 4px;

        font-size: 10px;
        line-height: 1;

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

    &__block-content.query {
        height: 100%;

        border-radius: 50%;
    }

    &__block-content.result {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &__block-content.stage {
        border-radius: 6px;
    }

    &__stage-table-row {
        overflow: hidden;

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

    &__block-content.connection {
        display: flex;
        align-items: center;
        gap: 4px;

        color: var(--g-color-text-info-heavy);
        border: 1px solid var(--g-color-line-info);
        border-radius: 6px;
        background: var(--g-color-base-info-light);
        box-shadow: none;
    }

    &__tooltip-content {
        overflow: auto;

        width: 300px;
        max-height: 90vh;
        padding: 0 8px 8px;

        font-family: var(--g-font-family);
        font-size: var(--g-text-body-short-font-size);
        line-height: var(--g-text-body-short-line-height);
    }

    &__tooltip-tabs {
        margin-bottom: 8px;
    }

    &__tooltip-stat-row {
        display: grid;
        grid-template-columns: 100px auto;
        gap: 8px;

        margin: 4px 0 0;

        span {
            overflow: hidden;

            text-overflow: ellipsis;
        }
        span:nth-child(1) {
            color: var(--g-color-text-secondary);
        }
        span:nth-child(2) {
            word-wrap: break-word;
        }
    }

    &__tooltip-stat-group {
        margin-top: 8px;
    }

    &__tooltip-stat-group + &__tooltip-stat-group {
        padding-top: 8px;

        border-top: 1px dotted var(--g-color-line-generic);
    }

    &__tooltip-stat-group-name {
        font-weight: bold;
    }

    &__zoom-controls {
        position: absolute;
        z-index: 999;
        top: 8px;
        right: 50px;

        display: flex;
        gap: 2px;
    }
}