@layer components {
  .form-group {
    @apply mb-6;
  }

  .form-label {
    @apply block mb-1.5 select-none font-medium text-sm text-gray-700 dark:text-gray-300;

    &.form-label-required {
      @apply after:content-['*'] after:absolute after:text-primary-600 after:top-0 relative after:pl-px;
    }
  }

  .form-input {
    @apply rounded px-3 py-1.5 border border-gray-300/80 bg-white focus:border-gray-400/80 focus:ring-4 focus:ring-gray-400/10 focus:shadow-none focus:outline-none dark:bg-gray-800 dark:focus:border-gray-600 placeholder-gray-600/80 dark:focus:ring-gray-600/30 dark:placeholder:text-gray-200/50 font-normal antialiased font-sans w-full shadow-gray-200/30 dark:shadow-gray-900/20 dark:border-gray-600/80;

    &[disabled] {
      @apply shadow-none cursor-not-allowed pointer-events-none select-none bg-gray-100/90 dark:bg-gray-800/90 dark:opacity-70;
    }
  }

  .form-input-sm {
    @apply text-sm;
  }

  .form-textarea {
    @apply rounded px-3 py-1.5 border border-gray-300/80 bg-white focus:border-gray-400/80 focus:ring-4 focus:ring-gray-400/10 focus:shadow-none focus:outline-none dark:bg-gray-800 dark:border-gray-500/80 dark:focus:border-gray-500 placeholder-gray-500/60 dark:focus:ring-gray-500/40 dark:placeholder:text-gray-300/60 min-h-[100px] w-full;
    &[disabled] {
      @apply shadow-none cursor-not-allowed pointer-events-none select-none bg-gray-100/90 dark:bg-gray-800/90 dark:opacity-70;
    }
  }

  .form-file {
    @apply block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-gray-100 file:text-gray-700 hover:file:bg-gray-200/80 dark:file:bg-primary-600 dark:file:text-gray-100 dark:hover:file:text-gray-100 dark:hover:file:bg-primary-700;
  }

  .form-input-color {
    @apply w-8 h-8 transition border border-gray-200 rounded-full appearance-none focus:border-gray-400 focus:shadow focus:ring-4 focus:ring-gray-400/10 dark:border-gray-600;

    &::-webkit-color-swatch-wrapper,
    &::-webkit-color-swatch {
      @apply p-0 border-2 border-white rounded-full dark:border-gray-700;
    }
  }

  .form-input-datalist {
    &::-webkit-calendar-picker-indicator {
      @apply hidden !important;
    }
  }

  /* Requires range_controller.js */
  .form-input-range {
    @apply relative bg-transparent appearance-none focus:outline-none;

    --range-fill: 0;
  }
  .form-input-range::-webkit-slider-thumb {
    @apply appearance-none border-2 border-white h-4 w-4 rounded-full bg-white cursor-pointer relative -top-1.5 shadow outline outline-gray-300 focus:ring-4 focus:outline-gray-400 hover:outline-gray-400 dark:bg-gray-800 dark:focus:outline-gray-600 dark:hover:outline-gray-600 dark:border-gray-500 dark:outline-gray-700;
  }

  .form-input-range::-moz-range-thumb {
    @apply appearance-none border-2 border-white h-4 w-4 rounded-full bg-white cursor-pointer relative -top-1.5 shadow outline outline-gray-300 focus:ring-4 focus:outline-gray-400 hover:outline-gray-400 dark:bg-gray-800 dark:focus:outline-gray-600 dark:hover:outline-gray-600 dark:border-gray-500 dark:outline-gray-700;
  }

  .form-input-range::-ms-thumb {
    @apply appearance-none border-2 border-white h-4 w-4 rounded-full bg-white cursor-pointer relative -top-1.5 shadow outline outline-gray-300 focus:ring-4 focus:outline-gray-400 hover:outline-gray-400 dark:bg-gray-800 dark:focus:outline-gray-600 dark:hover:outline-gray-600 dark:border-gray-500 dark:outline-gray-700;
  }

  .form-input-range::-webkit-slider-runnable-track {
    @apply w-full h-1 rounded-lg cursor-pointer;
    background: linear-gradient(
      to right,
      theme("colors.primary.500") var(--range-fill),
      theme("colors.gray.300") var(--range-fill)
    );

    @media (prefers-color-scheme: dark) {
      background: linear-gradient(
        to right,
        theme("colors.primary.500") var(--range-fill),
        theme("colors.gray.700") var(--range-fill)
      );
    }
  }

  .form-input-range::-moz-range-track {
    @apply w-full h-1 rounded-lg cursor-pointer;
    background: linear-gradient(
      to right,
      theme("colors.primary.500") var(--range-fill),
      theme("colors.gray.300") var(--range-fill)
    );

    @media (prefers-color-scheme: dark) {
      background: linear-gradient(
        to right,
        theme("colors.primary.500") var(--range-fill),
        theme("colors.gray.700") var(--range-fill)
      );
    }
  }

  .form-input-range::-ms-track {
    @apply w-full h-1 rounded-lg cursor-pointer;
    background: linear-gradient(
      to right,
      theme("colors.primary.500") var(--range-fill),
      theme("colors.gray.300") var(--range-fill)
    );

    @media (prefers-color-scheme: dark) {
      background: linear-gradient(
        to right,
        theme("colors.primary.500") var(--range-fill),
        theme("colors.gray.700") var(--range-fill)
      );
    }
  }

  .form-input-range:focus::-webkit-slider-runnable-track {
    @apply bg-gray-200 dark:bg-gray-600;
  }

  .form-input-range:focus::-moz-range-track {
    @apply bg-gray-200 dark:bg-gray-600;
  }

  .form-input-range:focus::-ms-track {
    @apply bg-gray-200 dark:bg-gray-600;
  }

  .form-input-error {
    @apply text-red-800 border-red-500 focus:ring-red-50 focus:border-red-400 dark:border-red-400 dark:text-red-300 dark:focus:ring-red-300/20;

    + svg {
      @apply block !important;

      + p {
        @apply block !important;
      }
    }
  }

  .form-select {
    @apply px-3 py-1.5 border border-gray-300/80 bg-white font-normal placeholder:text-gray-500 rounded block w-full focus:outline-none focus:ring-4 focus:ring-gray-400/10 focus:border-gray-400/80 text-gray-900 dark:focus:border-gray-600 dark:text-white dark:placeholder:text-gray-400 shadow-sm dark:bg-gray-800 dark:focus:ring-gray-500/40 font-sans dark:shadow-gray-900/20 dark:border-gray-600/80;
    background-size: 1.25em 1.25em;

    &[disabled] {
      @apply shadow-none cursor-not-allowed pointer-events-none select-none bg-gray-100/90 dark:bg-gray-800/90 dark:opacity-70;
    }

    &.form-select-sort {
      @apply border-none shadow-none appearance-none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath d='M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");

      @media (prefers-color-scheme: dark) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Echevron-up-down%3C/title%3E%3Cg fill='none'%3E%3Cpath d='M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
      }
    }
  }

  .form-datetime-select {
    @apply flex items-center gap-2.5 text-gray-300;

    select {
      @apply px-3 py-1.5 border border-gray-300/80 bg-white font-normal placeholder:text-gray-500 rounded block w-full focus:outline-none focus:ring-4 focus:ring-gray-400/10 focus:border-gray-400/80 text-gray-900 dark:focus:border-gray-600 dark:text-white dark:placeholder:text-gray-400 shadow-sm dark:bg-gray-800 dark:focus:ring-gray-500/40 font-sans dark:shadow-gray-900/20 dark:border-gray-600/80;
    }
  }

  .form-input-checkbox {
    @apply border rounded-sm border-gray-300/80 checked:border-primary-500 checked:accent-primary-500 text-primary-600 dark:bg-gray-700 dark:border-gray-500/80 focus:ring-gray-500/10 dark:checked:border-primary-400 dark:checked:accent-primary-400 dark:checked:outline-gray-700;
  }

  .form-input-radio {
    @apply border rounded-full border-gray-300/70 focus:ring-2 checked:ring-primary-200 checked:border-primary-600 checked:accent-primary-600 checked:shadow-primary-600 text-primary-600 focus-visible:text-primary-600 focus-visible:ring-primary-200 focus-visible:outline-none dark:bg-gray-700 dark:border-gray-600 dark:checked:border-primary-400 dark:checked:accent-primary-400;
  }

  .form-input-switch {
    @apply hidden;

    &:disabled + label {
      @apply cursor-not-allowed opacity-70;
    }

    &:disabled + label::after {
      @apply !shadow-none;
    }

    &:checked + label::before {
      @apply dark:bg-emerald-600 bg-emerald-500;
    }

    &:checked + label::after {
      transform: translate3d(16px, 0, 0);
      background-size: 10px 10px;
      @apply bg-white bg-center bg-no-repeat;
    }

    + label {
      @apply inline-flex cursor-pointer leading-6 select-none relative font-normal text-[15px];

      &:before {
        @apply content-[""] block bg-gray-300 rounded-full h-6 w-10 mr-3 transition-colors ease-out flex-shrink-0 dark:bg-gray-700;
      }

      &:after {
        @apply content-[""] block bg-white rounded-full size-4 absolute top-[4px] left-[4px] transition-transform ease-out shadow-md;
      }
    }
  }
}