@layer components {
  .ui-checkbox-p1 {
    @apply flex items-start mb-4 font-sans font-medium;
  }

  .ui-checkbox-p2 {
    @apply flex items-start mb-3 font-sans font-medium;
  }

  .ui-checkbox-input {
    @apply opacity-0 absolute h-5 w-5;
  }

  .ui-checkbox-styled {
    @apply w-5 h-5 mr-4;
    @apply bg-white flex flex-shrink-0 justify-center items-center;
    @apply border border-neutral-500 rounded-md focus-within:border-active-orange;
  }

  .ui-theme-dark .ui-checkbox-styled,
  .ui-theme-dark .ui-checkbox-input:focus + .ui-checkbox-styled {
    @apply bg-neutral-1300 border-neutral-900;
  }

  .ui-checkbox-styled-tick {
    @apply hidden text-white;
  }

  .ui-checkbox-label-p1 {
    @apply select-none;
    @apply text-p1 font-medium text-neutral-1300;
  }

  .ui-checkbox-label-p2 {
    @apply select-none;
    @apply text-p2 font-medium text-neutral-1300;
  }

  .ui-theme-dark .ui-checkbox-label-p1,
  .ui-theme-dark .ui-checkbox-label-p2 {
    @apply text-neutral-000;
  }

  .ui-checkbox-input:focus + .ui-checkbox-styled {
    border-width: 0.125rem;
    @apply border-gui-focus;
  }

  .ui-checkbox-input:checked + .ui-checkbox-styled {
    @apply bg-active-orange border-dark-grey border;
  }

  .ui-checkbox-input:checked + .ui-checkbox-styled svg {
    @apply block;
  }

  .ui-checkbox-input:disabled + .ui-checkbox-styled {
    @apply bg-neutral-300;
  }

  .ui-theme-dark .ui-checkbox-input:disabled + .ui-checkbox-styled {
    @apply bg-neutral-1000 border border-gui-disabled-dark;
  }

  .ui-theme-dark .ui-checkbox-input:checked + .ui-checkbox-styled {
    @apply bg-active-orange border-gui-disabled-dark;
  }

  .ui-textarea {
    @apply font-sans font-medium text-cool-black text-p1;
    @apply p-input mb-4;
    @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
    @apply hover:bg-white hover:shadow-input hover:border-transparent;
    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-none focus-visible:outline-gui-focus;
  }

  .ui-textarea::placeholder {
    /* CSS vars don't work in ::placeholder in Webkit :( */
    /* color: var(--text-dark-grey); */
    color: #76767c;
  }

  .ui-toggle {
    @apply h-8 w-14 rounded-full relative inline-block;
  }

  .ui-toggle:has(:disabled) {
    @apply pointer-events-none;
  }

  .ui-toggle input {
    @apply w-0 h-0 opacity-0;
  }

  .ui-toggle-slider {
    @apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
  }

  .ui-theme-dark .ui-toggle-slider {
    @apply bg-neutral-700;
  }

  .ui-toggle-slider:before {
    @apply absolute h-7 w-7 left-0.5 bottom-0.5 bg-white rounded-full transition-transform drop-shadow-toggle;
    content: "";
  }

  .ui-toggle input:checked + .ui-toggle-slider {
    @apply bg-orange-600;
  }

  .ui-toggle input:disabled + .ui-toggle-slider {
    @apply bg-gui-disabled-light dark:bg-gui-disabled-dark;
  }

  .ui-toggle input:checked + .ui-toggle-slider:before {
    @apply translate-x-6;
  }

  .ui-toggle input:disabled + .ui-toggle-slider:before {
    @apply bg-neutral-500;
  }

  .ui-input {
    @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
    @apply hover:border-neutral-700 focus:bg-white focus-base;
    @apply max-w-screen-sm invalid:border-gui-error-red;
  }

  .ui-theme-dark .ui-input {
    @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700 invalid:border-gui-error-red;
  }

  .ui-input:disabled {
    @apply bg-gui-disabled-light placeholder-neutral-500 text-neutral-500;
  }

  .ui-theme-dark .ui-input:disabled {
    @apply bg-gui-disabled-dark text-neutral-800 placeholder-neutral-800;
  }

  .ui-radio {
    @apply border border-neutral-600 w-5 h-5 appearance-none cursor-pointer rounded-full focus-base;
  }

  .ui-radio:checked {
    @apply bg-orange-600 border-orange-600 border;
  }

  .ui-radio:checked::after {
    @apply content-[''] mt-[0.3125rem] w-2 h-2 block bg-white rounded-full m-auto;
  }

  .ui-radio:disabled {
    @apply bg-neutral-300;
  }

  .ui-theme-dark .ui-radio:disabled {
    @apply bg-neutral-1000;
  }
}