@import '../../../../../styles/variables.scss';

$titleHeight: 57px;

.conn-form-yadocs {
    --container-height-offset: #{$titleHeight} - #{$actionPanelHeight};
    --settings-height: 60px;

    &__title {
        width: 100%;
        height: #{$titleHeight};
        padding: 12px 20px;
        background-color: var(--g-color-base-generic-ultralight);
        border-bottom: 1px solid var(--g-color-line-generic);
    }

    &__title-add {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
        margin-left: 14px;
    }

    &__title-add-content {
        display: flex;
        align-items: center;
    }

    &__help-btn {
        position: relative;
        top: 1px;
        left: 5px;

        &_with-margin-right {
            margin-right: 20px;
        }
    }

    &__content {
        display: flex;
        height: calc(100vh - var(--container-height-offset));
    }

    &__list {
        display: flex;
        flex-direction: column;
        flex: 0 0 256px;
        overflow-y: auto;
        border-right: 1px solid var(--g-color-line-generic);
        background-color: var(--g-color-base-generic-ultralight);
    }

    &__list-container {
        flex-grow: 0;
    }

    &__list-item-wrap {
        cursor: pointer;
    }

    &__add-section {
        padding: 12px 16px 0;
    }

    &__add-section-controls {
        display: grid;
        grid-template:
            'a a' 1fr
            'b b' 1fr
            'c d' 1fr;
        row-gap: 8px;
        column-gap: 6px;
    }

    &__add-section-controls-area-a {
        grid-area: a;
    }

    &__add-section-controls-area-b {
        display: flex;
        align-items: center;
        grid-area: b;
    }

    &__add-section-controls-area-b-input {
        margin-right: 5px;
    }

    &__workspace {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow-x: auto;

        &_empty {
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        &_readonly .data-table {
            height: calc(100vh - var(--container-height-offset) - var(--conn-column-filter-height));
        }
    }

    &__workspace-error {
        height: calc(100vh - var(--container-height-offset));
        min-height: unset;
    }

    &__workspace-loader {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    &__settings {
        display: flex;
        align-items: center;
        height: var(--settings-height);
        padding: 0 20px;
        border-bottom: 1px solid var(--g-color-line-generic);
    }

    &__preview-table {
        height: calc(
            100vh - var(--container-height-offset) - var(--settings-height) - var(
                    --conn-column-filter-height
                )
        );
    }

    &__workspace_readonly &__preview-table {
        height: calc(100vh - var(--container-height-offset) - var(--conn-column-filter-height));
    }
}
