/* 
  Custom Switch Component Override
  Overrides the default CSS-Zero switch styling to provide better visual feedback
  for on/off states using our site's color palette.
*/

.switch {
  /* Off state - grayed out appearance */
  background-color: var(--clr-surface-a30) !important;
  
  &:checked {
    /* On state - use our primary green color */
    background-color: var(--clr-primary-a0) !important;
  }
  
  &::before {
    /* Switch handle - white circle */
    background-color: var(--clr-surface-a50) !important;
  }

  &:checked::before {
    background-color: var(--clr-light-a0) !important;
  }
  
  /* Hover states for better interactivity */
  &:hover:not(:disabled) {
    background-color: var(--clr-surface-a30) !important;
    
    &:checked {
      background-color: var(--clr-primary-a10) !important;
    }
  }
  
  /* Focus state using our primary color */
  &:focus-visible {
    outline: var(--border-2) solid var(--clr-primary-a20) !important;
  }
}