.form-element {
  &:not(.form-element-inline) {
    @apply flex flex-col mb-4;
    .form-label {
      @apply mb-2;
    }
    .form-hint,
    .form-error,
    .form-success {
      @apply mt-2;
    }
  }
  &.form-element-inline {
    @apply flex flex-row items-center justify-start;
    .form-label {
      @apply whitespace-nowrap;
    }
    > * {
      @apply mr-2;
    }
  }
  .form-input,
  .form-textarea {
    @apply w-full block text-xs xl:text-base py-2 px-3;
    &.form-input-valid {
      @apply border border-green-500;
    }
    &.form-input-invalid {
      @apply border border-red-500;
    }
    @apply bg-slate-50 border-slate-50;
    [data-background="dark"] & {
      @apply bg-slate-800 border-slate-800 text-white;
      &::placeholder {
        @apply text-slate-400 dark:text-slate-500;
      }
    }
  }
  .form-input {
    @apply h-9;
  }
  .form-select {
    @apply w-full h-9 block appearance-none text-xs xl:text-base py-2 px-3;
    line-height: normal;
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, transparent, transparent);
    background-position:
      calc(100% - 20px) 1em,
      calc(100% - 15px) 1em,
      calc(100% - 2.5em) 0.5em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
    &.form-select-valid {
      @apply border border-green-500;
    }
    &.form-select-invalid {
      @apply border border-red-500;
    }
    [data-background="dark"] & {
      @apply bg-slate-800 border-slate-700 text-white;
    }
  }
  .form-radio {
    &.form-radio-valid {
      @apply text-green-500;
      + span {
      @apply text-green-500;
      }
    }
    &.form-radio-invalid {
      @apply text-red-500;
      + span {
      @apply text-red-500;
      }
    }
  }
  .form-hint {
    @apply text-sm text-slate-500 whitespace-nowrap;
  }
  .form-error {
    @apply text-sm text-red-500 whitespace-nowrap;
  }
  .form-success {
    @apply text-sm text-green-500 whitespace-nowrap;
  }
}
.form-icon {
  @apply h-4 w-4 stroke-current absolute bottom-0;
  margin-bottom: 10px;
  &.form-success {
    @apply text-red-500;
  }
  &.form-error {
    @apply text-green-500;
  }
  @apply right-0 mr-2;
}