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

.ydb-query-simplified-plan {
    $block: &;

    // Allow table cell to be more than default 40px
    // It is needed to properly display long operation names (with many columns) in Firefox
    --ydb-table-cell-height: unset;
    overflow: auto;

    width: 100%;
    height: 100%;
    padding: 0 15px 15px;

    &__name {
        display: flex;
        align-items: center;
        gap: var(--g-spacing-1);

        max-width: 100%;
    }

    &__metrics-cell {
        padding: var(--g-spacing-1) var(--g-spacing-2);
    }

    &__operation-params {
        color: var(--g-color-text-secondary);
    }
    &__operation-name {
        position: relative;

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

        font-weight: 500;
    }

    &__divider {
        position: absolute;
        bottom: 0;

        width: 12px;
        height: 100%;

        box-shadow: 1px 0 0 0 var(--g-color-line-generic) inset;

        &_last {
            top: 0;
            bottom: unset;

            width: 12px;
            height: 14px;

            border-radius: 0 0 0 1px;
            box-shadow: 1px -1px 0 0 var(--g-color-line-generic) inset;
        }
        &_horizontal {
            top: 0;
            bottom: unset;

            width: 12px;
            height: 14px;

            box-shadow: 0 -1px 0 0 var(--g-color-line-generic) inset;
        }
        &_first {
            height: calc(100% - 30px);
        }
    }

    &__operation-content {
        max-width: 100%;
        height: 100%;
        padding: var(--g-spacing-1) 0;

        word-break: break-word;
    }

    &__operation-name-content {
        display: flex;
        flex-grow: 1;
    }
}