/**
 * Toggle Component Styles
 * Following UI Library 2.0 design tokens
 */

@import url('../../01-core/design-tokens-core.css');

   TOGGLE SWITCH (Toggle)
   ======================================== */

.toggle-switch {
  position: relative;
  display: inline-flex !important; /* Override label { display: block } from core CSS */
  align-items: center;
  gap: 0;
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal); /* Override label font-weight from core CSS */
  line-height: var(--line-height-normal);
  color: var(--color-text);
  margin-right: var(--spacing-component-gap);
  margin-bottom: var(--spacing-component-gap-vertical);
}

.toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* Toggle label text */
.toggle-switch > span:not(.toggle-slider) {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: 24px; /* Match toggle slider height for vertical centering */
  margin-left: var(--spacing-component-label);
}

.toggle-switch input[type="checkbox"]:disabled ~ span:not(.toggle-slider) {
  color: var(--color-text-disabled);
  opacity: 0.6;
}

/* Toggle track (background slider) - OFF state */
.toggle-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-background-tertiary);
  box-shadow: var(--shadow-border);
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Toggle thumb (white circle) */
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--color-background);
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

/* Hover state - OFF */
.toggle-switch:hover .toggle-slider {
  background: var(--color-background-tertiary-hover);
  box-shadow: var(--shadow-border-hover);
}

/* Focus state - OFF */
.toggle-switch input[type="checkbox"]:focus + .toggle-slider {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Checked (ON) state - follows button primary pattern */
.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
  background: var(--color-primary);
  box-shadow: 0 0 0 0 transparent;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Hover state - ON */
.toggle-switch:hover input[type="checkbox"]:checked + .toggle-slider {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-sm);
}

/* Focus state - ON */
.toggle-switch input[type="checkbox"]:focus:checked + .toggle-slider {
  outline: none;
  box-shadow: var(--shadow-focus-button);
}

/* Validation states */
.toggle-slider.invalid {
  box-shadow: var(--shadow-invalid);
}

.toggle-switch input[type="checkbox"]:focus + .toggle-slider.invalid {
  box-shadow: var(--shadow-invalid-focus);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider.invalid {
  background: var(--color-danger);
  box-shadow: 0 0 0 0 transparent;
}

.toggle-switch:hover input[type="checkbox"]:checked + .toggle-slider.invalid {
  background: var(--color-danger-hover);
  box-shadow: var(--shadow-sm);
}

.toggle-slider.valid {
  box-shadow: var(--shadow-valid);
}

.toggle-switch input[type="checkbox"]:focus + .toggle-slider.valid {
  box-shadow: var(--shadow-valid-focus);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider.valid {
  background: var(--color-success);
  box-shadow: 0 0 0 0 transparent;
}

.toggle-switch:hover input[type="checkbox"]:checked + .toggle-slider.valid {
  background: var(--color-success-hover);
  box-shadow: var(--shadow-sm);
}

/* Disabled state */
.toggle-switch input[type="checkbox"]:disabled + .toggle-slider {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-background-secondary);
  color: var(--color-text-disabled);
}

/* Disabled toggle container - block all pointer events */
.toggle-switch.toggle-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* State classes applied by Toggle component */
.toggle-switch.toggle-processing .toggle-slider {
  opacity: 0.7;
  animation: toggle-pulse 1s infinite;
}

@keyframes toggle-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.toggle-switch.toggle-success .toggle-slider {
  background: var(--color-success);
  box-shadow: 0 0 0 0 transparent;
}

.toggle-switch.toggle-error .toggle-slider {
  background: var(--color-danger);
  box-shadow: 0 0 0 0 transparent;
}

/* State combinations */
.toggle-switch.toggle-on {
  /* ON state visual indicator class */
}

.toggle-switch.toggle-off {
  /* OFF state visual indicator class */
}