.lio-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 32px auto;
  align-items: center;
  width: fit-content;
  min-height: 18.4px;
  gap: var(--space-xs);
  color: var(--text);
  font: 400 14px/20px var(--font-geist);
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
}

.lio-switch[data-size="sm"] {
  grid-template-columns: 24px auto;
  min-height: 14px;
}

.lio-switch__input {
  position: absolute;
  inset-block-start: var(--space-zero);
  inset-inline-start: var(--space-zero);
  inline-size: 32px;
  block-size: 18.4px;
  margin: var(--space-zero);
  opacity: var(--opacity-0);
  cursor: inherit;
}

.lio-switch[data-size="sm"] .lio-switch__input {
  inline-size: 24px;
  block-size: 14px;
}

.lio-switch__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  inline-size: 32px;
  block-size: 18.4px;
  overflow: visible;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-full);
  background: var(--border);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.lio-switch[data-size="sm"] .lio-switch__control {
  inline-size: 24px;
  block-size: 14px;
}

.lio-switch__control::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--space-xs) * -1);
  inset-inline: calc(var(--space-sm) * -1);
}

.lio-switch__thumb {
  display: block;
  inline-size: var(--size-lg);
  block-size: var(--size-lg);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-2xs);
  transform: translateX(var(--space-zero));
  transition: transform 150ms ease, background-color 150ms ease;
}

.lio-switch[data-size="sm"] .lio-switch__thumb {
  inline-size: var(--size-base);
  block-size: var(--size-base);
}

.lio-switch:hover .lio-switch__control {
  background: var(--surface-pressed);
}

.lio-switch:has(.lio-switch__input:checked) .lio-switch__control {
  background: var(--brand-solid);
}

.lio-switch:has(.lio-switch__input:checked):hover .lio-switch__control {
  background: var(--brand-solid-hover);
}

.lio-switch:has(.lio-switch__input:checked) .lio-switch__thumb {
  transform: translateX(14px);
}

.lio-switch[data-size="sm"]:has(.lio-switch__input:checked) .lio-switch__thumb {
  transform: translateX(10px);
}

.lio-switch[dir="rtl"]:has(.lio-switch__input:checked) .lio-switch__thumb,
[dir="rtl"] .lio-switch:has(.lio-switch__input:checked) .lio-switch__thumb {
  transform: translateX(-14px);
}

.lio-switch[data-size="sm"][dir="rtl"]:has(.lio-switch__input:checked) .lio-switch__thumb,
[dir="rtl"] .lio-switch[data-size="sm"]:has(.lio-switch__input:checked) .lio-switch__thumb {
  transform: translateX(-10px);
}

.lio-switch__input:focus-visible + .lio-switch__control {
  border-color: var(--neutral-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--neutral-400) 50%, transparent);
  outline: none;
}

.lio-switch[data-invalid="true"] .lio-switch__control,
.lio-switch__input[aria-invalid="true"] + .lio-switch__control {
  border-color: var(--error-text);
}

.lio-switch[data-invalid="true"] .lio-switch__input:focus-visible + .lio-switch__control {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-text) 20%, transparent);
}

.lio-switch[data-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.lio-switch__content {
  display: grid;
  min-width: var(--space-zero);
  gap: var(--space-xxs);
}

.lio-switch__label {
  color: var(--text);
  font: 400 14px/20px var(--font-geist);
}

.lio-switch__required {
  color: var(--error-text);
}

.lio-switch__description {
  color: var(--text-tertiary);
  font: 400 12px/18px var(--font-geist);
}

.lio-switch[data-invalid="true"] .lio-switch__label {
  color: var(--error-text);
}

.lio-switch[data-variant="choice-card"] {
  grid-template-columns: minmax(var(--space-zero), 1fr) 32px;
  width: 100%;
  padding: var(--space-base);
  gap: var(--space-base);
  align-items: center;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-xl);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.lio-switch[data-variant="choice-card"][data-size="sm"] {
  grid-template-columns: minmax(var(--space-zero), 1fr) 24px;
}

.lio-switch[data-variant="choice-card"] .lio-switch__content {
  order: 1;
}

.lio-switch[data-variant="choice-card"] .lio-switch__control {
  order: 2;
}

.lio-switch[data-variant="choice-card"]:hover {
  background: var(--surface-hover);
}

.lio-switch[data-variant="choice-card"]:has(.lio-switch__input:checked) {
  border-color: var(--border-brand);
}