.switch,
:global(.settings-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--switch-track-width);
  height: var(--switch-track-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.switch:disabled,
:global(.settings-toggle):disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.switch:focus-visible,
:global(.settings-toggle):focus-visible {
  outline: none;
}

.track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  border: 1px solid var(--border-default);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.switch:hover:not(:disabled) .track,
:global(.settings-toggle):hover:not(:disabled) .track {
  border-color: var(--border-subtle);
}

.switch:focus-visible .track,
:global(.settings-toggle):focus-visible .track {
  border-color: var(--border-focus);
  box-shadow: var(--control-focus-ring);
}

.checked .track {
  background: var(--status-success-fg);
  border-color: var(--status-success-fg);
}

.thumb {
  position: absolute;
  top: 50%;
  left: var(--switch-thumb-offset);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transform: translate3d(0, -50%, 0);
  transition:
    transform var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.checked .thumb {
  left: calc(100% - var(--switch-thumb-size) - var(--switch-thumb-offset));
  transform: translate3d(0, -50%, 0);
}

.switch:disabled .track,
:global(.settings-toggle):disabled .track {
  background: var(--surface-disabled);
  border-color: var(--border-default);
}

.switch:disabled.checked .track,
:global(.settings-toggle):disabled.checked .track {
  background: var(--state-success-bg);
  border-color: var(--state-success-border);
}
