/* Switch Component Styles */
/* Styled to match the design system switch component */

.custom-switch {
  /* Base switch container styling - matches h-5 w-9 (20px x 36px) */
  height: 20px !important;
  width: 36px !important;
  min-width: 36px !important;
  min-height: 20px !important;
  max-width: 36px !important;
  max-height: 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Track styling - should fill the container */
.custom-switch .mantine-Switch-track {
  cursor: pointer !important;
  width: 36px !important;
  height: 20px !important;
  min-width: 36px !important;
  min-height: 20px !important;
  max-width: 36px !important;
  max-height: 20px !important;
  border-radius: 6px !important;
  transition: background-color 150ms ease, border-color 150ms ease !important;
  box-sizing: border-box !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  padding: 2px !important;
  display: block !important;
  flex-shrink: 0 !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Track when unchecked - account for border */
.custom-switch .mantine-Switch-track[data-checked="false"],
.custom-switch[data-checked="false"] .mantine-Switch-track {
  top: 0 !important;
}

/* Unchecked state - bg-background, border foreground/50 */
.custom-switch .mantine-Switch-track[data-checked="false"],
.custom-switch[data-checked="false"] .mantine-Switch-track,
.custom-switch input[type="checkbox"]:not(:checked) ~ .mantine-Switch-track {
  background-color: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--foreground) / 0.5) !important;
  top: 0px !important;
  transform: translateY(0) !important;
}

/* Checked state - default primary color */
.custom-switch .mantine-Switch-track[data-checked="true"],
.custom-switch[data-checked="true"] .mantine-Switch-track,
.custom-switch input[type="checkbox"]:checked ~ .mantine-Switch-track {
  background-color: hsl(217, 91%, 60%) !important; /* Primary blue color */
  border: 1px solid transparent !important;
  transform: translateY(0) !important;
}

/* Brand variant - uses accent-brand when checked */
.custom-switch-brand .mantine-Switch-track[data-checked="true"],
.custom-switch-brand[data-checked="true"] .mantine-Switch-track,
.custom-switch-brand input[type="checkbox"]:checked ~ .mantine-Switch-track {
  background-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
  border: 1px solid transparent !important;
  transform: translateY(0) !important;
}

/* Thumb (the moving circle) - h-4 w-4 (16px) */
/* Reset all default positioning - use !important to override Mantine defaults */
.custom-switch .mantine-Switch-thumb,
.custom-switch .mantine-Switch-thumb * {
  height: 16px !important;
  width: 16px !important;
  min-height: 16px !important;
  min-width: 16px !important;
  max-height: 16px !important;
  max-width: 16px !important;
  border-radius: 6px !important;
  transition: transform 150ms ease !important;
  pointer-events: none !important;
  box-shadow: none !important;
  display: block !important;
  position: absolute !important;
  top: 1px !important;
  left: 2px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(0) translateY(0) !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  inset: auto !important;
}

/* Thumb unchecked state - bg-foreground, left position */
/* Account for track's translateY(-1px) transform when unchecked */
.custom-switch .mantine-Switch-thumb[data-checked="false"],
.custom-switch[data-checked="false"] .mantine-Switch-thumb,
.custom-switch .mantine-Switch-thumb:not([data-checked="true"]),
.custom-switch input[type="checkbox"]:not(:checked) ~ .mantine-Switch-track .mantine-Switch-thumb,
.custom-switch input[type="checkbox"]:not(:checked) + .mantine-Switch-track .mantine-Switch-thumb,
.custom-switch .mantine-Switch-track:not([data-checked="true"]) .mantine-Switch-thumb,
.custom-switch:not([data-checked="true"]) .mantine-Switch-thumb {
  top: 1px !important;
  left: 2px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: hsl(var(--foreground)) !important;
}

/* Thumb checked state - bg-background, right position */
/* Track is 36px, thumb is 16px, padding is 2px each side = 36 - 16 - 2 - 2 = 16px translation */
.custom-switch .mantine-Switch-thumb[data-checked="true"],
.custom-switch[data-checked="true"] .mantine-Switch-thumb,
.custom-switch input[type="checkbox"]:checked ~ .mantine-Switch-track .mantine-Switch-thumb {
  transform: translateX(16px) translateY(0) !important;
  top: 1px !important;
  left: 1px !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: hsl(var(--background)) !important;
}

/* Disabled state */
.custom-switch[disabled],
.custom-switch[data-disabled],
.custom-switch input[type="checkbox"]:disabled {
  cursor: not-allowed !important;
  opacity: 0.4 !important;
}

.custom-switch[disabled] .mantine-Switch-track,
.custom-switch[data-disabled] .mantine-Switch-track,
.custom-switch input[type="checkbox"]:disabled ~ .mantine-Switch-track {
  background-color: hsl(var(--muted) / 0.2) !important;
  border: 1px solid hsl(var(--muted-foreground) / 0.15) !important;
}

.custom-switch[disabled] .mantine-Switch-track[data-checked="true"],
.custom-switch[data-disabled] .mantine-Switch-track[data-checked="true"],
.custom-switch input[type="checkbox"]:disabled:checked ~ .mantine-Switch-track {
  background-color: hsl(var(--muted) / 0.3) !important;
  border: 1px solid transparent !important;
  transform: translateY(0) !important;
}

.custom-switch[disabled] .mantine-Switch-thumb,
.custom-switch[data-disabled] .mantine-Switch-thumb,
.custom-switch input[type="checkbox"]:disabled ~ .mantine-Switch-track .mantine-Switch-thumb {
  background-color: hsl(var(--muted-foreground) / 0.5) !important;
}