/* ============================================================
   switch.component.css  --  Switch component styles
   Uses a native checkbox with a CSS-rendered track and thumb.
   ============================================================ */

.vui-switch-group {
  --_vui-bg-surface: var(--vui-bg-surface, #f4f4f5);
  --_vui-fg: var(--vui-fg, #18181b);
  --_vui-fg-muted: var(--vui-fg-muted, #52525b);
  --_vui-border: var(--vui-border, #d4d4d8);
  --_vui-accent: var(--vui-accent, #0f766e);
  --_vui-radius-lg: var(--vui-radius-lg, 10px);
  --_vui-space-sm: var(--vui-space-sm, 8px);
  --_vui-space-md: var(--vui-space-md, 16px);
  --_vui-font-sans: var(--vui-font-sans, "Segoe UI", system-ui, sans-serif);
  display: grid;
  gap: var(--_vui-space-md);
  font-family: var(--_vui-font-sans);
  box-sizing: border-box;
  margin: 0;
}

.vui-switch-group *,
.vui-switch-group *::before,
.vui-switch-group *::after {
  box-sizing: inherit;
}

.vui-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--_vui-fg);
  cursor: pointer;
}

.vui-switch input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.vui-switch-control {
  position: relative;
  flex: none;
  inline-size: 3rem;
  block-size: 1.75rem;
  border-radius: 999px;
  background: var(--_vui-bg-surface);
  border: 1px solid var(--_vui-border);
  transition: background 150ms ease, border-color 150ms ease;
}

.vui-switch-control::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  inline-size: 1.45rem;
  block-size: 1.45rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
  transition: transform 150ms ease;
}

.vui-switch input:focus-visible + .vui-switch-control {
  outline: 2px solid var(--_vui-accent);
  outline-offset: 2px;
}

.vui-switch input:checked + .vui-switch-control {
  background: color-mix(in srgb, var(--_vui-accent) 88%, white);
  border-color: color-mix(in srgb, var(--_vui-accent) 48%, white);
}

.vui-switch input:checked + .vui-switch-control::after {
  transform: translateX(1.2rem);
}

.vui-switch--sm .vui-switch-control {
  inline-size: 2.5rem;
  block-size: 1.5rem;
}

.vui-switch--sm .vui-switch-control::after {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

.vui-switch--sm input:checked + .vui-switch-control::after {
  transform: translateX(0.95rem);
}

.vui-switch--disabled {
  color: var(--_vui-fg-muted);
  cursor: not-allowed;
}

.vui-switch--disabled .vui-switch-control {
  opacity: 0.72;
}

@media (max-width: 768px) {
  .vui-switch {
    justify-content: space-between;
    width: 100%;
  }
}