@layer components {
  form {
    @apply flex flex-col gap-4;
  }

  input:not([type='checkbox'], [type='radio'], [type='range'], [type='hidden'], [type='file'], [type='color'], [role]) {
    @apply appearance-none file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
    @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
    @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
  }

  input[type='file'] {
    @apply appearance-none file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
    @apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
    @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
    @apply bounce;
  }

  input[type='file']::-webkit-file-upload-button {
    @apply me-4 px-3 h-full bg-secondary;
  }

  textarea {
    @apply border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
  }

  select {
    @apply w-full appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
    @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];

    option,
    optgroup {
      @apply bg-popover text-popover-foreground;
    }
  }

  label {
    @apply flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:pointer-events-none peer-disabled:opacity-50;

    &:has(+ :is(input, textarea, select)) {
      @apply pb-2;
    }

    &:has(> *:disabled),
    &:has(+ *:disabled) {
      @apply opacity-50 pointer-events-none;
    }
  }

  input[type='checkbox']:not([role='switch']) {
    @apply appearance-none border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4! shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;

    & + label {
      @apply inline-flex;
    }

    &:checked:after {
      @apply content-[''] block size-3.5 bg-primary-foreground;
      @apply mask-[image:var(--check-icon)] mask-size-[0.875rem] mask-no-repeat mask-center;
    }
  }

  fieldset {
    @apply flex flex-col gap-4 border rounded-lg pb-5 p-4;

    legend {
      @apply text-sm leading-none font-medium select-none text-muted-foreground;
    }

    ul:has(> li) {
      @apply contents ps-0!;

      li {
        @apply list-none;
      }
    }

    & > *:last-child {
      @apply mb-0!;
    }

    & > p:has(input) {
      @apply mb-0!;
    }
  }

  div:has(> :is(input[type='checkbox'], input[type='radio']) + label) {
    @apply flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:pointer-events-none peer-disabled:opacity-50;
  }

  input[type='radio'] {
    @apply appearance-none border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4! shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 relative;

    &:checked:before {
      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 content-[''] rounded-full size-2 bg-primary;
    }
  }

  input {
    @apply relative;

    &::-webkit-calendar-picker-indicator {
      @apply absolute right-2 text-primary fill-primary;
      /* Calendar SVG from Lucide */
      background-image: light-dark(
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>'),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>')
      );
    }

    &:is([type='date'], [type='datetime-local'])::-webkit-datetime-edit-text {
      @apply text-muted-foreground;
    }
  }

  input[type='checkbox'][role='switch'] {
    @apply appearance-none focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8! shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
    @apply bg-input dark:bg-input/80 checked:bg-primary dark:checked:bg-primary;
    @apply before:content-[''] before:pointer-events-none before:block before:size-4 before:rounded-full before:ring-0 before:transition-all;
    @apply before:bg-background dark:before:bg-foreground;
    @apply dark:checked:before:bg-primary-foreground checked:before:ms-3.5;
  }

  input[type='color' i] {
    @apply rounded-full size-[30px]! border border-border;
    @apply active:translate-y-0.5 transition-transform duration-150;

    &::-webkit-color-swatch-wrapper,
    &::-webkit-color-swatch,
    &::-moz-color-swatch {
      border-radius: 99px;
    }

    &::-webkit-color-swatch-wrapper {
      @apply p-1;
    }
  }

  input[type='range'] {
    @apply accent-primary w-full;

    &:hover,
    &:focus-visible {
      &::-webkit-slider-thumb {
        @apply ring-4;
      }
      &::-moz-range-thumb {
        @apply ring-4;
      }
      &::-ms-thumb {
        @apply ring-4;
      }
    }

    &::-ms-thumb,
    &::-webkit-slider-thumb,
    &::-moz-range-thumb {
      @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm;
    }
  }

  /*input[type='range'] {
    @apply appearance-none flex items-center p-0 outline-none;
    --slider-value: 20%;

    &:hover,
    &:focus-visible {
      &::-webkit-slider-thumb {
        @apply ring-4;
      }
      &::-moz-range-thumb {
        @apply ring-4;
      }
      &::-ms-thumb {
        @apply ring-4;
      }
    }

    &::-webkit-slider-thumb {
      @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
    }
    &::-webkit-slider-runnable-track {
      @apply appearance-none rounded-full h-1.5 w-full;
      background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
    }
    &::-moz-range-thumb {
      @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
    }
    &::-moz-range-track {
      @apply appearance-none rounded-full h-1.5 w-full;
      background: linear-gradient(to right, var(--primary) var(--slider-value), var(--muted) var(--slider-value));
    }
    &::-ms-thumb {
      @apply appearance-none border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm -mt-1.25;
    }
    &::-ms-track {
      @apply appearance-none rounded-full h-1.5 w-full;
    }
    &::-ms-fill-lower {
      @apply bg-primary rounded-full;
    }
    &::-ms-fill-upper {
      @apply bg-muted rounded-full;
    }
  }*/
}