@layer components {
  /* ============================================================================
   * RADIO COMPONENT
   * Custom styled radio button with accessible native input
   * ========================================================================= */

  .radio {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  /* Label wrapper */
  .radio__label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    user-select: none;
  }

  /* Hide native radio */
  .radio__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Custom radio circle */
  .radio__circle {
    position: relative;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-gray-3);
    border-radius: var(--radius-circle);
    background-color: var(--color-bg-main);
    transition: all var(--transition-fast);
  }

  /* Inner dot (hidden by default) */
  .radio__dot {
    position: absolute;
    inset: 3px;
    border-radius: var(--radius-circle);
    background-color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--transition-fast);
  }

  /* Label text */
  .radio__text {
    font-size: var(--font-size-md);
    color: var(--color-dark);
    line-height: 1.5;
  }

  /* Help text */
  .radio__help {
    font-size: var(--font-size-sm);
    color: var(--color-gray-3);
    margin-left: calc(1.25rem + var(--space-sm));
  }

  /* Error message */
  .radio__error {
    font-size: var(--font-size-sm);
    color: var(--color-error);
    margin-left: calc(1.25rem + var(--space-sm));
  }

  /* ============================================================================
   * STATES
   * ========================================================================= */

  /* Hover state */
  .radio__label:hover .radio__circle {
    border-color: var(--color-brand);
  }

  /* Focus state */
  .radio__input:focus-visible + .radio__circle {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  /* Checked state */
  .radio__input:checked + .radio__circle {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
  }

  .radio__input:checked + .radio__circle .radio__dot {
    opacity: 1;
    transform: scale(1);
  }

  /* Checked + hover state */
  .radio__label:hover .radio__input:checked + .radio__circle {
    background-color: var(--color-brand-active);
    border-color: var(--color-brand-active);
  }

  /* Disabled state */
  .radio--disabled .radio__label,
  .radio__input:disabled ~ .radio__label {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .radio--disabled .radio__circle,
  .radio__input:disabled + .radio__circle {
    background-color: var(--color-bg-disabled);
    border-color: var(--color-gray-2);
  }

  .radio--disabled .radio__label:hover .radio__circle,
  .radio__input:disabled + .radio__circle:hover {
    border-color: var(--color-gray-2);
    background-color: var(--color-bg-disabled);
  }

  /* Error state */
  .radio--error .radio__circle {
    border-color: var(--color-error);
  }

  .radio--error .radio__label:hover .radio__circle {
    border-color: var(--color-error-active);
  }

  .radio--error .radio__input:focus-visible + .radio__circle {
    outline-color: var(--color-error);
  }
}