@layer utilities {
  /* This file is for styling the controls of the form inputs (checkbox, radio, switch, filter) */
  /* Styling the controls by their HTML semantic allows us to visually guarantee the non-regression of this semantic */
  /* Radio  */
  label > span > input[type='radio'] {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
  }
  label > span > input[type='radio'] + span {
    @apply border transition-all duration-200;
    --tw-ring-color: transparent;
    border-color: var(--color-middleGrey);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  label > span > input[type='radio'] + span svg {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: all var(--transition-duration-boop) var(--transition-fn-boop);
  }
  label > span > input[type='radio']:checked + span svg {
    opacity: 1;
    transform: scale(1);
  }
  label > span > input[type='radio']:checked + span,
  label > span > input[type='radio']:not([disabled]):hover + span {
    @apply border-black;
  }
  label > span > input[type='radio']:focus-visible + span {
    @apply ring-8;
    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
  }
  label > span > input[type='radio'] + span {
    @apply rounded-full;
  }
  /* Filter */
  @media (hover: hover) and (pointer: fine) {
    label:active > input[type='checkbox'][data-name='Filter']:not(:disabled) {
      @apply active:scale-[.98];
      /* TODO: replace with: */
      /* @apply active:animate-boop; */
    }
  }
  label > input[type='checkbox'][data-name='Filter'] {
    @apply opacity-0 absolute w-full h-full border-0;
  }
  label > input[type='checkbox'][data-name='Filter'] + span {
    --tw-ring-color: transparent;
    @apply transition-all;
    @apply relative;
    @apply flex;
    @apply items-center;
    @apply justify-center;
    @apply border;
    @apply px-20;
    @apply py-12;
    @apply duration-200;
    transition-property: transform, colors;
    border-radius: var(--radius-pill);
    border-color: var(--color-middleGrey);
  }
  label > input[type='checkbox'][data-name='Filter'] + span .check {
    color: var(--color-black);
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    width: 0;
    transition: all var(--transition-duration-boop) var(--transition-fn-boop);
  }
  label > input[type='checkbox'][data-name='Filter']:not([disabled]):not(:checked):hover + span {
    @apply border-black;
  }
  label > input[type='checkbox'][data-name='Filter']:checked + span {
    border-color: var(--color-saffron);
    background-color: var(--color-saffron);
  }
  label > input[type='checkbox'][data-name='Filter']:checked + span .check {
    @apply opacity-100 ml-8;
    width: 24px;
    transform: scale(1);
  }
  label > input[type='checkbox'][data-name='Filter']:focus-visible + span {
    @apply ring-8;
    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
  }
  /* Switch */
  input[role='switch'][data-name='Switch'] + span {
    @apply relative flex items-center transition-colors duration-200;
    @apply ring-0;
    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 0%, transparent);
  }

  input[role='switch'][data-name='Switch'] + span svg {
    transition: all var(--transition-duration-boop) var(--transition-fn-boop);
    transform: translate(calc(0%));
  }
  input[role='switch'][data-name='Switch'] + span svg circle + circle {
    opacity: 1;
    transition: opacity var(--transition-duration-boop) var(--transition-fn-boop);
  }
  input[role='switch'][data-name='Switch'] + span svg path {
    opacity: 0;
    scale: 0;
    transform-origin: center;
    transition:
      opacity var(--transition-duration-boop) var(--transition-fn-boop),
      scale var(--transition-duration-boop) var(--transition-fn-boop);
  }
  input[role='switch'][data-name='Switch']:checked + span svg {
    transform: translate(calc(100%));
  }
  input[role='switch'][data-name='Switch']:checked + span svg circle + circle {
    opacity: 0;
  }
  input[role='switch'][data-name='Switch']:checked + span svg path {
    scale: 1;
    opacity: 1;
  }
  input[role='switch'][data-name='Switch']:focus-visible + span {
    @apply ring-8;
    --tw-ring-color: color-mix(in oklab, var(--color-lavender) 20%, transparent);
  }
}
