@import '~@gravity-ui/uikit/styles/mixins';

.widget-item-dialog {
    height: min(728px, 90vh);
    min-height: 400px;
    display: flex;

    $class: &;

    --_--sidebar-width: 276px;

    --dl-dropdown-navigation-width: 100%;

    &__body {
        overflow: hidden;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: var(--g-spacing-8);
            right: var(--g-spacing-8);
            border-top: 1px solid var(--g-color-base-generic);
        }
    }

    &__tab-panel {
        $tabs-height: 36px;
        $tab-top-margin: var(--g-spacing-4);
        margin-block-start: $tab-top-margin;
        height: calc(100% - $tabs-height - $tab-top-margin);
    }

    &__tab-content {
        height: 100%;

        &_with-sidebar {
            display: grid;
            grid-template-columns: var(--_--sidebar-width) 33px 1fr;
        }
    }

    &__sidebar {
        --dl-tab-menu-scroll-compensation: var(--g-spacing-4);
        --dl-tab-menu-items-width: calc(
            var(--_--sidebar-width) - var(--dl-tab-menu-scroll-compensation)
        );
        width: var(--_--sidebar-width);
        height: fit-content;
        overflow-y: hidden;
    }

    &__divider {
        margin-block: 0 calc(var(--g-spacing-2) * -1);
    }

    &__content-wrapper {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding-inline-end: var(--g-spacing-4);
        margin-inline-end: calc(
            var(--g-spacing-4) * -1
        ); // scroll width compensation for avoiding form shrinking
    }

    &__content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--g-spacing-6);
    }

    &__section {
        width: 526px;
    }

    &__section-title {
        @include text-subheader-2();
        display: flex;
        height: 28px;
        align-items: center;
        margin-block-end: var(--g-spacing-3);
    }

    &__navigation-input-container {
        display: grid;
        grid-auto-rows: 40px;
        grid-template-columns: var(--dl-dropdown-navigation-width);
        align-items: center;
    }

    &__navigation-input-row {
        display: contents;
    }

    &__textarea {
        height: 80px;
        flex-grow: 1;
    }

    &__input {
        width: var(--dl-dropdown-navigation-width);
    }

    &__row {
        margin-bottom: var(--g-spacing-2);
    }

    &__settings-container {
        width: var(--dl-dropdown-navigation-width);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;
        gap: 8px;
    }

    &__markdown-control {
        width: calc(100% - 14px - 8px);
    }

    .widget-item-dialog__line {
        display: grid;
        grid-template-columns: 140px auto;
        line-height: 40px;
    }

    .widget-item-dialog__line-caption {
        display: flex;
        align-items: flex-start;
        color: var(--g-color-text-primary);
    }

    .widget-item-dialog__params-title {
        @include text-subheader-3();
    }

    .widget-item-dialog__line-content {
        display: flex;
        align-items: center;
    }

    &__add-param-button {
        margin-left: 175px;
    }

    &__params {
        min-height: 65px;
        display: flex;
        flex-wrap: wrap;

        &_empty {
            align-items: center;
            justify-content: center;
            color: var(--g-color-text-secondary);
        }
    }

    &__dialog-params {
        width: 550px;
        display: grid;
        grid-row-gap: 15px;

        &-row {
            display: grid;
            grid-template-columns: 15% auto;
            align-items: center;
        }
    }

    &__tag-label {
        max-width: 250px;
    }

    &__error {
        color: var(--g-color-text-danger);
        padding: 10px;
    }

    &__beta {
        margin-left: 4px;
    }

    &__info-comment {
        color: var(--g-color-text-secondary);
        line-height: var(--g-text-body-1-line-height);
        margin: var(--g-spacing-2) 0 0 0;
    }
}
