/* FORMS */
/* - apply base styles to set form inputs */
/* ======= */

@layer base {
  /* basic inputs */
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  select,
  select[multiple],
  textarea {
    @apply animation-500 border__input--radius w-full appearance-none px-3 py-1.5 min-h-[44px] border__input color__border-input color__bg-input border--input-padding color__input;
    &::placeholder {
      @apply opacity-50 color__input;
    }
    &:hover {
      @apply border__input--hover;
    }
    &:focus-visible {
      @apply border__input--focus;
    }
  }

  /* Adding back the chevron */
  select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
    background-repeat: no-repeat !important;
    background-position-x: 98% !important;
    background-position-y: 50% !important;
  },

  /* checkboxes and radios */
  input[type="checkbox"] {
    @apply cursor-pointer color__text color__border-divider-1 color__border-selected-1;
    &:checked {
      @apply color__text !important;
    }
    &:hover {
      @apply border__input--hover;
    }
    &:focus {
      @apply border__input--focus;
    }
  }
  input[type="radio"] {
    @apply rounded-full cursor-pointer color__text color__border-divider-1 color__border-selected-1;
    &:checked {
      @apply color__text !important;
    }
    &:hover {
      @apply border__input--hover;
    }
    &:focus {
      @apply border__input--focus;
    }
  }

  button {
    &:hover {
      @apply border__button--hover;
    }
    &:focus-visible {
      @apply border__button--focus;
    }
  }

  input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    width: 24px;
    height: 24px;
    -webkit-appearance: none;
  }
}
