:host {
  .clone-form-button {
    margin-top: 1rem;
  }

  .required-question {
    @apply com-text-red-500 com-ml-2px;
  }

  div.data-form-container {
    max-width: 920px;
    margin: 0 auto;

    .submit-button {
      @apply com-mx-2;
    }

    .card-body {
      input {
        @apply com-mt-2 com-mb-0;
      }

      .description {
        @apply com-mt-4;
        label {
          textarea {
            @apply com-mt-2;
          }
        }
      }
    }

    label {
      @apply com-text-base com-font-medium com-text-Charcoal;
    }

    .data-form-question-choices-container {
      margin-bottom: 0;
    }

    .add-question-button {
      @apply com-mb-10 com-mx-2;
    }

    .cdk-drag-animating {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
    .custom-placeholder {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
      @apply com-min-h-[120px] com-border-0 com-rounded-xl com-bg-slate-200 com-min-w-full;
    }

    .question-container {
      @apply com-flex com-flex-col com-font-semibold com-text-xl com-justify-start;

      .required-question {
        @apply com-text-red-500 com-ml-2px;
      }

      textarea {
        @apply com-mb-0 com-mt-1;
      }

      input {
        @apply com-mt-2 com-mb-0;
      }

      label {
        @apply com-text-xl com-font-semibold;
      }

      nb-icon {
        @apply com-mr-1;
      }
    }

    .choices-container {
      @apply com-flex com-flex-col com-font-semibold com-text-xl com-justify-start;

      .choice-container {
        nb-icon {
          @apply com-text-base;
        }
      }
    }
  }
}

.questions-form-section {
  .drag-button {
    @apply com-p-0 com-flex com-justify-center;

    button {
      @apply com-cursor-move;
    }
  }

  .question-form-footer {
    @apply com-flex md:com-flex-row com-text-primary-500 com-gap-3 com-mt-12 com-justify-between com-items-end md:com-items-center;

    .add-question-footer {
      @apply com-text-sm com-font-medium com-pl-0 com-text-black com-mt-2;

      nb-icon {
        @apply com-h-5 com-w-5;
      }
    }

    .toggles {
      @apply md:com-border-l com-border-Bright-Gray com-border-0 com-border-solid com-border-y-0 md:com-flex com-block com-mt-3 com-text-sm;
      .toggle {
        @apply com-text-sm com-font-medium com-border-0;
        @apply com-mr-0 com-ml-0 md:com-ml-4 com-mt-1;

        span {
          @apply com-text-black;
        }
      }
    }

    .delete-question-footer {
      @apply com-text-sm com-font-medium com-p-0;

      nb-icon {
        @apply com-h-5 com-w-5;
      }
    }

    .context-menu {
      @apply md:com-hidden com-block com-justify-end;
    }
  }
}

.disable {
  @apply com-pointer-events-none com-cursor-none;
}

.has-response-info {
  @apply com-my-2;
}
.required-text {
  @apply com-text-black;
}
.description-textbox {
  @apply com-mt-1 com-w-full;
}
.field {
  @apply com-flex com-gap-x-4 com-mt-4;
  .add-description-button {
    @apply com-bg-white com-text-black md:com-flex com-hidden;

    nb-icon {
      @apply com-mr-1;
    }
  }

  .question-settings {
    @apply com-flex com-flex-col com-font-semibold com-text-xl com-justify-start com-flex-wrap com-w-full md:com-w-auto;

    label {
      @apply com-flex com-flex-col com-font-semibold com-text-xl com-mb-4 com-mr-6;
    }
    .dropdown {
      @apply com-w-max com-flex com-items-center com-h-8 com-p-3 com-cursor-pointer com-bg-white hover:com-bg-[#eef2f7]/50 com-border com-border-solid com-border-gray-400 com-rounded com-w-full md:com-w-auto;
      select {
        @apply com-bg-white hover:com-bg-[#eef2f7]/50 com-cursor-pointer com-text-xs com-w-full md:com-w-auto com-border-0;
      }
    }
  }
}
.required-choice {
  @apply com-mt-5 com-w-full com-flex;
}
.close-circle-outline {
  @apply com-ml-2 com-mt-5 com-text-red-500 com-h-5 com-w-5;
}
.add-choice-button {
  @apply com-mt-3;
}
.required-below {
  @apply com-align-middle com-flex;
}
.required-title {
  @apply com-flex com-items-center;
}
.toggle-disable {
  @apply com-mb-1 com-ml-3 md:com-ml-4 md:com-mt-1;
}
.required-disable-laptop {
  @apply com-hidden md:com-flex;
}
.required-disable-mobile {
  @apply md:com-hidden;
}
.footer-icons {
  @apply md:com-flex com-hidden;
}
