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

.form-label {
  @apply block mb-2 select-none;
}

.form-input {
  @apply px-3 py-2 border border-slate-300 bg-white font-normal text-base placeholder:text-slate-500 rounded block w-full focus:outline-hidden focus:ring-4 focus:ring-primary-50 focus:border-primary-500 text-slate-900 disabled:bg-slate-100/90  disabled:cursor-not-allowed disabled:dark:opacity-70 shadow-xs;

  &.form-input-error {
    @apply border-red-500 text-red-800 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!;

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

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

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

.form-select {
  @apply appearance-none px-3 py-2 border border-slate-300 bg-white font-normal rounded block w-full focus:ring-4 focus:ring-primary-50 focus:border-primary-500 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:focus:ring-primary-500/30 dark:focus:border-slate-600 dark:text-white dark:placeholder:text-slate-400 disabled:bg-slate-100/90 dark:disabled:bg-slate-800/90 disabled:cursor-not-allowed disabled:dark:opacity-70 shadow-xs;

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2334497e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  background-position: right calc(var(--spacing) * 2) center;
  print-color-adjust: exact;

  @variant dark {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }
}

.form-input-checkbox {
  @apply rounded-sm border appearance-none border-slate-400  checked:bg-primary-500  checked:border-primary-500 checked:ring-2 checked:ring-primary-500/10 checked:accent-primary-500 text-primary-600 focus:ring-primary-500/30  size-4 outline-hidden;

  &:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
  }

  + label {
    @apply select-none;
  }
}

.form-input-radio {
  @apply appearance-none rounded-full border border-slate-400 focus:ring-2 checked:ring-primary-200  checked:shadow-primary-600 text-primary-600 focus-visible:text-primary-600 focus-visible:ring-primary-200 focus-visible:outline-hidden dark:bg-slate-700 dark:border-slate-600 dark:checked:border-primary-400 dark:checked:accent-primary-400 size-4 checked:bg-primary-500 checked:border-primary-500;

  &:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='4' fill='%23fff'/%3e%3c/svg%3e");
  }

  + label {
    @apply select-none;
  }
}

.form-input-switch {
  @apply hidden;

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

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

  &:checked + label::before {
    @apply bg-primary-500;
  }

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

  + label {
    @apply inline-flex cursor-pointer text-base leading-6 select-none relative;

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

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

/* Requires railsui_range_controller.js: https://github.com/getrailsui/railsui-stimulus */

.form-input-range {
  @apply relative bg-transparent appearance-none focus:outline-hidden;

  --range-fill: 0;

  &::-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-sm 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;
  }

  &::-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-sm 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;
  }

  &::-ms-thumb {
    @apply appearance-none border-2 border-white h-4 w-4 rounded-full bg-white cursor-pointer relative -top-1.5 shadow-sm 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;
  }

  &::-webkit-slider-runnable-track {
    @apply w-full h-1 rounded cursor-pointer;
    background: linear-gradient(
      to right,
      var(--color-primary-500) var(--range-fill),
      var(--color-gray-300) var(--range-fill)
    );

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

  &::-moz-range-track {
    @apply w-full h-1 rounded cursor-pointer;
    background: linear-gradient(
      to right,
      var(--color-primary-500) var(--range-fill),
      var(--color-gray-300) var(--range-fill)
    );

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

  &::-ms-track {
    @apply w-full h-1 rounded cursor-pointer;
    background: linear-gradient(
      to right,
      var(--color-primary-500) var(--range-fill),
      var(--color-gray-300) var(--range-fill)
    );

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

  &:focus::-webkit-slider-runnable-track {
    @apply bg-gray-200 dark:bg-gray-600;
  }

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

  &:focus::-ms-track {
    @apply bg-gray-200 dark:bg-gray-600;
  }
}

.form-input-color {
  @apply appearance-none rounded-full size-8 border border-slate-200 focus:border-slate-400  transition focus:ring-4 focus:ring-primary-500/10 dark:border-slate-600;

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