@utility input-element {
  @apply border-2 focus-style-none focus-style-border focus-style-shadow;
  &:not([data-disabled]):not([data-invalid]) {
    @apply bg-input-background hover:border-primary-hover;

    &:not([data-value]) {
      @apply text-placeholder;
    }

    &[data-value] {
      @apply text-input-text;
    }
  }

  &:not([data-disabled])[data-invalid] {
    @apply bg-negative/20 border-negative hover:border-negative-hover;

    --color-focus: var(--color-negative);

    &[data-value] {
      @apply text-negative;
    }

    &:not([data-value]) {
      @apply text-placeholder;
    }
  }

  &[data-disabled] {
    @apply border-disabled bg-disabled text-on-disabled placeholder:text-transparent cursor-not-allowed;
  }
}

/* input-elements */
@layer components {
  [data-name="input"] {
    @apply input-element px-3 py-2 rounded-md h-element-md;
  }
}