/* Tailwind with Coline's design tokens: bg-card, text-muted-foreground,
   border-border, rounded-xl and dark: all match the components. The token
   values and the components' own styles come from @colineapp/ui/styles.css,
   imported in main.tsx. Use complete class names. */
@import "tailwindcss";
@import "@colineapp/ui/theme.css";

/* Workaround, until @colineapp/ui ships the fix: in ui 2.1.3, Switch, Slider
   and Separator are styled with data-checked / data-unchecked /
   data-horizontal variants, but their Radix primitives set data-state and
   data-orientation, so the switch track, the slider track and range, and
   separators render invisible. These rules give them the styles their
   classes intend, keyed on the attributes Radix does set. */
[data-slot="switch"][data-state="checked"] {
  background-color: var(--primary);
}
[data-slot="switch"][data-state="unchecked"] {
  background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
}
[data-slot="switch-thumb"][data-state="checked"] {
  translate: calc(100% - 2px) 0;
}
.dark [data-slot="switch-thumb"][data-state="checked"] {
  background-color: var(--primary-foreground);
}
.dark [data-slot="switch-thumb"][data-state="unchecked"] {
  background-color: var(--foreground);
}
[data-slot="slider-track"][data-orientation="horizontal"] {
  height: calc(var(--spacing) * 3);
  width: 100%;
}
[data-slot="slider-range"][data-orientation="horizontal"] {
  height: 100%;
}
[data-slot="separator"][data-orientation="horizontal"] {
  height: 1px;
  width: 100%;
}