/* ==========================================================================
   Base radio styles
   ========================================================================== */

.radio {
  @apply relative flex items-start gap-3 outline-none no-highlight;

  cursor: var(--cursor-interactive);

  [data-slot="label"] {
    @apply select-none;
  }

  [data-slot="description"] {
    @apply text-wrap select-none;
  }

  /* Disabled state */
  &:disabled,
  &[data-disabled="true"],
  &[aria-disabled="true"] {
    @apply status-disabled;
  }
}

/* ==========================================================================
   Radio control (the circular button)
   ========================================================================== */

.radio__control {
  @apply relative mt-[3px] inline-flex size-4 shrink-0 items-center justify-center rounded-full border [border-width:var(--border-width-field)] bg-field shadow-field outline-none no-highlight;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    background-color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    transform 100ms var(--ease-out);
  @apply motion-reduce:transition-none;

  cursor: var(--cursor-interactive);

  /* Interactive states */
  /* Focus */
  .radio:focus-visible &,
  .radio[data-focus-visible="true"] & {
    @apply status-focused;
  }

  /* Hover */
  .radio:hover &,
  .radio[data-hovered="true"] & {
    @apply border-field-border-hover;
  }

  /* Hover - only when not selected */
  .radio:hover:not([aria-checked="true"]):not([data-selected="true"]) &,
  .radio[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) & {
    .radio__indicator:empty::before {
      @apply bg-field-hover;
    }
  }

  /* Pressed */
  .radio:active &,
  .radio[data-pressed="true"] & {
    @apply scale-95;
  }

  /* Selection states */
  /* Selected */
  .radio[aria-checked="true"] &,
  .radio[data-selected="true"] & {
    @apply border-transparent bg-accent;
  }

  /* Selected + Pressed */
  .radio:active[data-selected="true"] &,
  .radio[data-pressed="true"][data-selected="true"] & {
    @apply bg-accent-hover;
  }

  /* Validation states */
  /* Invalid */
  .radio[data-invalid="true"] &,
  .radio[aria-invalid="true"] & {
    @apply status-invalid-field;
  }

  /* Invalid + Selected */
  .radio[data-invalid="true"][aria-checked="true"] &,
  .radio[data-invalid="true"][data-selected="true"] &,
  .radio[aria-invalid="true"][aria-checked="true"] &,
  .radio[aria-invalid="true"][data-selected="true"] & {
    @apply status-invalid-field;
  }
}

/* ==========================================================================
   Radio indicator (the inner dot)
   ========================================================================== */

.radio__indicator {
  @apply absolute inset-0 flex items-center justify-center;

  pointer-events: none;
}

/* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
   (e.g., custom icon). When custom content is present, these default dot styles are not applied. */
.radio__indicator:empty::before {
  content: "";
  @apply rounded-full bg-field;

  width: 100%;
  height: 100%;
  scale: 1;

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    scale 200ms var(--ease-out),
    background-color 200ms var(--ease-out);
  @apply motion-reduce:transition-none;
}

/* Selected state */
.radio[aria-checked="true"] .radio__indicator:empty::before,
.radio[data-selected="true"] .radio__indicator:empty::before {
  @apply bg-accent-foreground;
  scale: 0.4286; /* 6px */
}

/* Selected + Pressed state */
.radio[data-selected="true"][data-pressed="true"] .radio__indicator:empty::before {
  scale: 0.5714; /* 8px */
}

/* ==========================================================================
   Radio content wrapper
   ========================================================================== */

.radio__content {
  @apply flex flex-col gap-0;
}

/* ==========================================================================
   Disabled modifier
   ========================================================================== */

.radio--disabled {
  @apply status-disabled;
}