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

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

/* ── Base ── */
.strand-radio {
  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);
}

/* ── Custom visual ── */
.strand-radio__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--strand-control-size);
  height: var(--strand-control-size);
  border: 1px solid var(--strand-gray-200);
  border-radius: var(--strand-radius-full);
  background: var(--strand-surface-elevated);
  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-radio__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--strand-radius-full);
  background: var(--strand-on-blue-primary);
  transform: scale(0);
  transition: transform var(--strand-duration-fast) var(--strand-ease-out-expo);
}

/* ── Focus ring ── */
.strand-radio__native:focus-visible ~ .strand-radio__control {
  border-color: var(--strand-blue-primary);
  box-shadow: var(--strand-focus-ring);
}

/* ── Checked: the native input's state ── */
.strand-radio__native:checked ~ .strand-radio__control {
  background: var(--strand-blue-primary);
  border-color: var(--strand-blue-primary);
}

.strand-radio__native:checked ~ .strand-radio__control .strand-radio__dot {
  transform: scale(1);
}

/* ── Hover ── */
.strand-radio:hover .strand-radio__native:enabled ~ .strand-radio__control {
  border-color: var(--strand-blue-indicator);
}

.strand-radio:hover .strand-radio__native:enabled:checked ~ .strand-radio__control {
  background: var(--strand-blue-vivid);
  border-color: var(--strand-blue-vivid);
}

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

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

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