kata-toggle {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  line-height: 0;
  vertical-align: middle;
}

kata-toggle [data-toggle-track] {
  display: inline-flex;
  align-items: center;
  width: var(--kata-toggle-track-width, 2.75rem);
  height: var(--kata-toggle-track-height, 1.5rem);
  margin: 0;
  padding: var(--kata-toggle-track-padding, var(--kata-space-xs));
  border-radius: var(--kata-radius-pill, 9999px);
  border: none;
  cursor: pointer;
  background-color: var(--kata-color-border, var(--pico-muted-border-color, #cbd5e1));
  transition: background-color 0.2s ease;
  position: relative;
}

kata-toggle label {
  display: inline-flex;
  align-items: center;
  gap: var(--kata-space-sm);
  line-height: normal;
  cursor: pointer;
}

kata-toggle [data-toggle-track][data-state="checked"] {
  background-color: var(--kata-color-primary, var(--pico-primary-background, #1d4ed8));
}

kata-toggle [data-toggle-track][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

kata-toggle [data-toggle-track]:focus-visible {
  outline: 2px solid var(--kata-color-primary, var(--pico-primary-background, #1d4ed8));
  outline-offset: 2px;
}

kata-toggle [data-toggle-thumb] {
  display: block;
  box-sizing: border-box;
  width: var(--kata-toggle-thumb-size, 1.25rem);
  height: var(--kata-toggle-thumb-size, 1.25rem);
  border-radius: var(--kata-radius-pill, 9999px);
  background-color: var(--kata-color-on-primary, #fff);
  box-shadow: var(--kata-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.2));
  transition: transform 0.2s ease;
  transform: translateX(0);
  pointer-events: none;
}

kata-toggle [data-toggle-track][data-state="checked"] [data-toggle-thumb] {
  transform: translateX(var(--kata-toggle-thumb-translate, 1.25rem));
}

/* Shadow DOM scope. CSS custom properties inherit from the host theme. */
:host {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  line-height: 0;
  vertical-align: middle;
}

:host [data-toggle-track] {
  display: inline-flex;
  align-items: center;
  width: var(--kata-toggle-track-width, 2.75rem);
  height: var(--kata-toggle-track-height, 1.5rem);
  margin: 0;
  padding: var(--kata-toggle-track-padding, var(--kata-space-xs));
  border-radius: var(--kata-radius-pill, 9999px);
  border: none;
  cursor: pointer;
  background-color: var(--kata-color-border, var(--pico-muted-border-color, #cbd5e1));
  transition: background-color 0.2s ease;
  position: relative;
}

:host label {
  display: inline-flex;
  align-items: center;
  gap: var(--kata-space-sm);
  line-height: normal;
  cursor: pointer;
}

:host [data-toggle-track][data-state="checked"] {
  background-color: var(--kata-color-primary, var(--pico-primary-background, #1d4ed8));
}

:host [data-toggle-track][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

:host [data-toggle-track]:focus-visible {
  outline: 2px solid var(--kata-color-primary, var(--pico-primary-background, #1d4ed8));
  outline-offset: 2px;
}

:host [data-toggle-thumb] {
  display: block;
  box-sizing: border-box;
  width: var(--kata-toggle-thumb-size, 1.25rem);
  height: var(--kata-toggle-thumb-size, 1.25rem);
  border-radius: var(--kata-radius-pill, 9999px);
  background-color: var(--kata-color-on-primary, #fff);
  box-shadow: var(--kata-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.2));
  transition: transform 0.2s ease;
  transform: translateX(0);
  pointer-events: none;
}

:host [data-toggle-track][data-state="checked"] [data-toggle-thumb] {
  transform: translateX(var(--kata-toggle-thumb-translate, 1.25rem));
}