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

.widget-item-dialog {
    width: 960px;
    max-height: 507px;
    display: flex;

    &_long {
        max-height: 547px;
    }

    &_without-sidebar {
        width: 705px;
    }

    & {
        --dl-dropdown-navigation-width: 330px;
    }

    &__sidebar {
        max-height: 100%;
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 255px;
        padding-block-end: var(--dialog-footer-vertical-padding, var(--g-spacing-6));
    }

    &__add-icon {
        margin-left: 6px;
    }

    &__dialog-sidebar {
        display: flex;
        flex-direction: column;
    }

    &__main {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    &__navigation-input-container {
        display: grid;
        grid-auto-rows: 40px;
        align-items: center;
    }

    &__textarea {
        height: 80px;
        width: 330px;
    }

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

    &__settings-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 5px;
        gap: 8px;
    }

    &__checkbox {
        margin-block-start: var(--g-spacing-2);
    }

    .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__params-collapse {
        margin-top: 20px;
    }

    .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;
        }
    }

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

    &__section-title {
        @include text-subheader-2();
        font-weight: 500;
        margin: 16px 0;
    }

    &__beta {
        margin-left: 4px;
    }

    &__content {
        display: flex;
        flex-direction: column;
    }

    &__content-body {
        overflow-y: auto;
    }

    &__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;
    }
}
