/* Allow buttons outside forms */
.button {
  @apply mt-2 inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-500 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;

  &.primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  &.secondary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-primary-700 bg-primary-200 hover:bg-primary-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  &.destructive {
    @apply inline-flex items-center px-4 py-2 border border-red-300 dark:border-red-500 text-sm font-medium rounded-md text-red-700 dark:text-red-500 bg-white dark:bg-gray-800 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }

  &.warning {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-yellow-300 bg-yellow-100 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500;
  }

  &.harmful {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-semibold rounded-md bg-red-600 text-white shadow-sm hover:bg-red-500;
  }
}

form {
  @apply mb-0;

  .form-label {
    @apply block text-xs text-gray-400 dark:text-gray-300 uppercase;

    &.required:after {
      content: "*";
    }
  }

  input.form-control,
  select.form-control {
    @apply rounded w-full py-2 px-3 h-12 text-gray-800 dark:text-gray-300 leading-tight border-gray-300 dark:bg-gray-900 dark:drop-shadow dark:border-none;
  }

  textarea.form-control {
    @apply rounded w-full py-2 px-3 text-gray-800 dark:text-gray-300 leading-tight border-gray-300 dark:bg-gray-900 dark:drop-shadow dark:border-none;
  }

  .form-select {
    @apply rounded w-full py-2 px-3 h-12 text-gray-800 dark:text-gray-300 leading-tight border-gray-300 dark:bg-gray-900 dark:drop-shadow dark:border-none;
  }

  .form-multiselect {
    @apply rounded w-full py-2 px-3 text-gray-800 dark:text-gray-300 leading-tight border-gray-300 dark:bg-gray-900 dark:drop-shadow dark:border-none;
  }

  .custom-select {
    @apply block pl-3 pr-10;
  }

  .invalid-feedback {
    @apply text-sm text-red-600;
  }

  input.is-invalid,
  select.is-invalid {
    @apply border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500;
  }

  input[type="checkbox"].custom-control-input {
    @apply border-gray-300 dark:bg-gray-800 rounded;
    margin-right: 0.5rem;

    &:checked {
      @apply border border-primary-600  bg-primary-600;
    }
  }

  .custom-checkbox {
    .custom-control-label {
      @apply text-sm;
    }
  }

  input[type="radio"].custom-control-input {
    @apply border-gray-300 dark:bg-gray-800;
    margin-right: 0.5rem;

    &:checked {
      @apply border border-primary-900  bg-primary-900;
    }
  }

  .editor {
    @apply h-32 border border-gray-300 dark:bg-gray-800 rounded overflow-hidden;

    .CodeMirror-wrap {
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    .CodeMirror-gutters,
    .CodeMirror-scroll {
      border-top-left-radius: 3px;
    }
    .CodeMirror * {
      font-size: 13px !important;
      font-family: "Courier New", Courier, monospace !important;
    }

    &.is-invalid {
      @apply border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500;
    }
  }

  trix-editor {
    @apply border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
  }

  .fields_for {
    @apply dark:bg-gray-800;
    .field-for-bg{
      @apply dark:bg-gray-800;
    .template {
      @apply dark:bg-gray-800;
      .fields {
        @apply opacity-50 dark:bg-gray-800;
      }
      &:hover {
        .fields {
          @apply opacity-100;
        }
      }
    }
    }
  }

  .form-text {
    @apply dark:text-gray-300 text-gray-500;
  }

  .nested-fields {
    margin-top: 1rem;
    margin-bottom: 2rem;
    position: relative;

    &:nth-child(odd) {
      background-color: rgba(0, 0, 0, .02);
    }

    &:before {
      content: "";
      position: absolute;
      left: 35%;
      bottom: -1rem;
      height: 1rem;
      width: 30%;
      border-bottom: 1px dashed #e5e7eb;
    }

    .nested-fields_action {
      @apply bg-white dark:bg-gray-800;
      margin-left: -1rem;
      border-radius: 1rem;
      padding: 0.3rem 0.2rem 0.1rem;
      width: 2rem;
      text-align: center;
    }
  }
}