.track {
  will-change: background-color, opacity;
  transition: background-color 0.1s linear, opacity 0.2s linear;
}

.knob {
  will-change: transform, background-color;
  transition: background-color 0.1s linear, transform 0.2s linear;
}

.switch {
  &:hover .knob {
    background: var(--theme-text-primary);
  }

  &:hover input:checked ~ * .knob {
    background: theme('colors.raw.cabbage.20');
  }

  &:active {
    background: none;
  }

  & input:checked {
      & ~ * .track {
        background: theme('colors.raw.cabbage.50');
        opacity: 0.24;
      }

      & ~ * .knob {
        transform: translateX(100%);
        background: theme('colors.raw.cabbage.40');
      }

      & ~ .children {
        color: var(--theme-text-primary);
      }
  }
}

:global(.light) .switch {
   & input:checked ~ * .knob {
    background: theme('colors.raw.cabbage.80');
  }

  &:hover input:checked ~ * .knob {
    background: theme('colors.raw.cabbage.60');
  }
}

@media (prefers-color-scheme: light) {
  :global(.auto) .switch {
    & input:checked ~ * .knob {
     background: theme('colors.raw.cabbage.80');
   }

   &:hover input:checked ~ * .knob {
     background: theme('colors.raw.cabbage.60');
   }
 }
}
