.source-editor-dialog {
    width: 800px;

    $baseClass: &;

    &__label {
        height: 24px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    &__label-error {
        line-height: 20px;
        color: var(--g-color-text-danger);
    }

    &__params {
        height: 280px;
        display: flex;
        flex-direction: column;
    }

    &__param {
        margin-top: 10px;

        &_with-monaco {
            flex: 1 1 auto;
        }
    }

    &__param-content {
        display: flex;
        gap: 8px;

        &_column {
            flex-direction: column;
        }
    }

    &__param-add-button {
        width: fit-content;
    }

    &__param-add-button-sql {
        margin-top: 8px;
    }

    &__param-select-popup {
        border-radius: var(--g-border-radius-m);
        width: 320px;
    }

    &__param-select-filter {
        padding: 8px;
        border-bottom: 1px solid var(--g-color-line-generic);

        &_empty {
            border-bottom: none;
        }
    }

    &__param-select-add-button {
        --g-button-height: 44px;
        border-top: 1px solid var(--g-color-line-generic);

        &:active {
            transform: scale(1);
        }
    }

    &__param-select-option {
        display: flex;
        align-items: center;
        gap: 10px;

        &:hover #{$baseClass}__param-select-option-dropdown {
            opacity: 1;
        }
    }

    &__param-select-option-dropdown {
        opacity: 0;
        margin-left: auto;
    }

    &__param-select-empty-placeholder {
        color: var(--g-color-text-primary);
    }

    &__chover-yt-switcher {
        margin-bottom: 3px;
    }

    &__select-form-item {
        display: flex;
        width: 200px;
    }

    &__tooltip-item {
        margin-bottom: 5px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    &__tooltip-body {
        display: inline-block;

        &:not(:last-child) {
            margin-bottom: 10px;
        }
    }

    &__example {
        margin-bottom: 3px;
    }

    &__example-path {
        margin-top: 3px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5px;
        background-color: var(--g-color-base-info-light);
        border: 1px solid var(--g-color-base-info-light);
        border-radius: 4px;
    }

    &__example-row:not(:last-child) {
        margin-bottom: 3px;
    }

    &__code {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2px 4px;
        background-color: var(--g-color-base-info-light);
        border: 1px solid var(--g-color-base-info-light);
        border-radius: 4px;

        &_inline {
            display: inline-flex;
        }
    }

    &__data-source-error {
        margin-top: 10px;
    }

    &__data-source-error-content {
        font-family: var(--g-font-family-monospace);
        margin-top: 15px;
        padding: 15px;
        font-size: 13px;
        border-radius: 4px;
        background-color: var(--g-color-base-generic-ultralight);
        overflow: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    &__monaco {
        border: 1px solid var(--g-color-line-generic);
        border-radius: 6px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover:not(#{&}_error) {
            border-color: var(--g-color-line-generic-hover);
        }

        &:focus-within:not(#{&}_error) {
            border-color: var(--g-color-line-generic-active);
        }

        &_error {
            border-color: var(--g-color-line-danger);
        }
    }

    & .g-dialog-body {
        padding-bottom: 0;
    }

    & .textarea,
    &__monaco {
        height: 176px;
    }
}
