:host {
  .dialog-wrapper {
    width: 850px;
    height: 530px;

    .dialog-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      height: 400px;

      .tabs-element {
        ::ng-deep .tabs {
          margin-right: 0 !important;

          .tab {
            font-weight: 400 !important;
          }
        }
      }
    }

    .prefix-input {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .code-form-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: space-between;

        .logic-type-select {
          width: 250px;
        }

        .code-input-wrapper {
          display: flex;
          flex-direction: row;
          align-items: center;

          .code-input {
            width: 350px;
          }
        }
      }

      .suggestions {
        display: flex;
        flex-direction: row;
        gap: 5px;
        align-items: center;

        .suggestion-button {
          cursor: pointer;

          padding: 5px;

          font: inherit;
          color: inherit;

          background: var(--color-gray-eee);
          border: none;
          border-radius: 5px;
          outline: inherit;
        }

        .suggestion-button.selected {
          color: var(--color-gray-444);
          background-color: color-mix(in srgb, var(--accent-color-bg) 10%, var(--color-gray-fff));
        }
      }
    }

    .dialog-footer {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;

      .actions {
        display: flex;
        flex-direction: row;
        gap: 5px;
      }

      .primary-button.disabled {
        opacity: 0.6;
      }
    }

    .checkboxes {
      margin-bottom: 10;
    }

    .checkbox {
      display: block;
    }
  }
}

.select-option {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  .option-prefix {
    color: var(--color-gray-666);
  }
}

wg-field {
  display: flex;
  flex-direction: column;
}