/*! Strand UI | MIT License | dillingerstaffing.com */

/* cf: pointer-fine-density */
/* cf: native-state-selectors */

/* ── Base ── */
.strand-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-2);
  min-height: var(--strand-touch-target);
  cursor: pointer;
  user-select: none;
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-900);
  line-height: var(--strand-leading-snug);
}

/* ── Track ── */
.strand-switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-full);
  background: var(--strand-gray-200);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--strand-duration-fast) var(--strand-ease-out-quart),
    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-switch__track:focus-visible {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
  outline: none;
}

/* ── Thumb ── */
.strand-switch__thumb {
  position: absolute;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-surface-elevated);
  box-shadow: var(--strand-elevation-1);
  transition: transform var(--strand-duration-fast) var(--strand-ease-out-expo);
}

/* ── Checked: aria-checked on the track ── */
.strand-switch__track[aria-checked="true"] {
  background: var(--strand-blue-primary);
  border-color: var(--strand-blue-primary);
}

.strand-switch__track[aria-checked="true"] .strand-switch__thumb {
  transform: translateX(18px);
}

/* ── Hover ── */
.strand-switch:hover .strand-switch__track:enabled {
  border-color: var(--strand-blue-indicator);
}

.strand-switch:hover .strand-switch__track:enabled[aria-checked="true"] {
  background: var(--strand-blue-vivid);
  border-color: var(--strand-blue-vivid);
}

/* ── Label ── */
.strand-switch__label {
  color: var(--strand-switch-label-color, var(--strand-gray-900));
}

/* ── Disabled ── */
.strand-switch:has(.strand-switch__track:disabled) {
  opacity: var(--strand-opacity-disabled);
  cursor: not-allowed;
}

.strand-switch__track:disabled {
  cursor: not-allowed;
}

@media (pointer: fine) {
  .strand-switch--compact {
    min-height: 30px;
  }
}