/* Switch Atom */
.switch-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-track {
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
  background-color: var(--bg-panel);        /* Use panel color for off state */
  border: var(--border-width-2) solid var(--border-default);
  border-radius: var(--border-radius-full);
  transition: all var(--duration-200) var(--easing-out);
}

.switch-thumb {
  position: absolute;
  top: var(--border-width-2);
  left: var(--border-width-2);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  background-color: var(--bg-surface);
  border-radius: var(--border-radius-full);
  transition: transform var(--duration-200) var(--easing-out);
  box-shadow: var(--shadow-sm);
}

.switch-input:checked + .switch-track {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.switch-input:checked + .switch-track .switch-thumb {
  transform: translateX(var(--space-5));
}

.switch-input:focus-visible + .switch-track {
  outline: var(--border-width-2) solid var(--border-focus);
  outline-offset: var(--border-width-2);
}

.switch-wrapper:hover .switch-track {
  border-color: var(--border-strong);
}

.switch-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.switch-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.switch-sm .switch-track { width: calc(var(--switch-width) * 0.82); height: calc(var(--switch-height) * 0.83); }
.switch-sm .switch-thumb { width: calc(var(--switch-thumb-size) * 0.875); height: calc(var(--switch-thumb-size) * 0.875); }
.switch-sm .switch-input:checked + .switch-track .switch-thumb { transform: translateX(var(--space-4)); }

.switch-lg .switch-track { width: calc(var(--switch-width) * 1.18); height: calc(var(--switch-height) * 1.17); }
.switch-lg .switch-thumb { width: calc(var(--switch-thumb-size) * 1.375); height: calc(var(--switch-thumb-size) * 1.375); }
.switch-lg .switch-input:checked + .switch-track .switch-thumb { transform: translateX(var(--space-6)); }