/* ToggleComponent — CSS-only toggle switch for boolean fields */

.pw-toggle {
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
}

/* Hide the native checkbox visually but keep it accessible.
   pointer-events: none prevents the hidden input from intercepting
   clicks on the wrapping <label> before they reach the track. */
.pw-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

/* Track: the pill-shaped background.
   Track/thumb dimensions are widget-specific geometry (40×22 track, 18×18
   thumb, 2px inset) — intentionally not tokenized; they describe the shape
   of this control rather than design-system spacing. */
.pw-toggle__track {
  position: relative;
  display: inline-block;
  width: 2.5rem;       /* 40px */
  height: 1.375rem;    /* 22px */
  background: var(--pw-color-border);
  border-radius: var(--pw-radius-full);
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* Thumb: the sliding circle */
.pw-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.125rem;     /* 18px */
  height: 1.125rem;    /* 18px */
  background: var(--pw-color-input-bg);
  border-radius: var(--pw-radius-full);
  box-shadow: var(--pw-shadow-sm);
  transition: transform 0.15s ease;
}

/* Checked state: green track + slide thumb right */
.pw-toggle__input:checked + .pw-toggle__track {
  background: var(--pw-color-status-success-fg);
}

.pw-toggle__input:checked + .pw-toggle__track::after {
  transform: translateX(1.125rem);
}

/* Focus ring on the track when input is focused */
.pw-toggle__input:focus-visible + .pw-toggle__track {
  outline: 2px solid var(--pw-color-orange-base);
  outline-offset: 2px;
}

/* Label */
.pw-toggle__label {
  cursor: pointer;
  font-size: var(--pw-text-base);
  color: var(--pw-color-text);
}