// scss-lint:disable QualifyingElement

label {
  @apply text-slate-800 dark:text-slate-200;
}

textarea {
  @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
}

input {
  @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;

  &[disabled] {
    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600;
  }
}

input[type='file'] {
  @apply bg-white dark:bg-slate-800;
}

select {
  @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
}

.error {
  input[type='color'],
  input[type='date'],
  input[type='datetime'],
  input[type='datetime-local'],
  input[type='email'],
  input[type='month'],
  input[type='number'],
  input[type='password'],
  input[type='search'],
  input[type='tel'],
  input[type='text'],
  input[type='time'],
  input[type='url'],
  input[type='week'],
  input:not([type]),
  textarea,
  select,
  .multiselect > .multiselect__tags {
    @apply border border-solid border-red-400 dark:border-red-400;
  }

  .message {
    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
  }
}

.button,
textarea,
input {
  &:focus {
    outline: none;
  }
}

.input-wrap {
  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
}

.help-text {
  @apply font-normal text-slate-600 dark:text-slate-400;
}

.input-group.small {
  input {
    @apply text-sm h-8;
  }

  .error {
    @apply border-red-400 dark:border-red-400;
  }
}