@use 'ui-design-system/src/styles/semantic/index' as *;

// Tokens available globally via main application styles

// ==========================================================================
// RADIO GROUP COMPONENT
// ==========================================================================
// Container component for managing groups of radio buttons
// Uses semantic design tokens for consistent styling across the design system
// ==========================================================================

.radio-group-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;

  // ==========================================================================
  // SIZE VARIANTS
  // ==========================================================================
  
  &--sm {
    .radio-group__label {
      font-size: 0.875rem;
      margin-bottom: $semantic-spacing-component-xs;
    }
    
    .radio-group {
      gap: $semantic-spacing-component-xs;
    }
    
    &.radio-group-wrapper--horizontal .radio-group {
      gap: $semantic-spacing-component-sm;
    }
  }
  
  &--md {
    .radio-group__label {
      font-size: 1rem;
      margin-bottom: $semantic-spacing-component-sm;
    }
    
    .radio-group {
      gap: $semantic-spacing-component-sm;
    }
    
    &.radio-group-wrapper--horizontal .radio-group {
      gap: $semantic-spacing-component-md;
    }
  }
  
  &--lg {
    .radio-group__label {
      font-size: 1.125rem;
      margin-bottom: $semantic-spacing-component-sm;
    }
    
    .radio-group {
      gap: $semantic-spacing-component-sm;
    }
    
    &.radio-group-wrapper--horizontal .radio-group {
      gap: $semantic-spacing-component-lg;
    }
  }

  // ==========================================================================
  // VARIANT STYLES
  // ==========================================================================
  
  &--primary {
    .radio-group__label {
      color: $semantic-color-text-primary;
    }
  }
  
  &--secondary {
    .radio-group__label {
      color: $semantic-color-text-primary;
    }
  }
  
  &--success {
    .radio-group__label {
      color: $semantic-color-text-primary;
    }
    
    &.radio-group-wrapper--error .radio-group__label {
      color: $semantic-color-success;
    }
  }
  
  &--warning {
    .radio-group__label {
      color: $semantic-color-text-primary;
    }
    
    &.radio-group-wrapper--error .radio-group__label {
      color: $semantic-color-warning;
    }
  }
  
  &--danger {
    .radio-group__label {
      color: $semantic-color-text-primary;
    }
    
    &.radio-group-wrapper--error .radio-group__label {
      color: $semantic-color-danger;
    }
  }

  // ==========================================================================
  // ORIENTATION VARIANTS
  // ==========================================================================
  
  &--horizontal {
    .radio-group {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
    }
  }
  
  &--vertical {
    .radio-group {
      flex-direction: column;
    }
  }

  // ==========================================================================
  // STATE VARIANTS
  // ==========================================================================
  
  &--disabled {
    opacity: 0.6;
    pointer-events: none;
    
    .radio-group__label {
      color: $semantic-color-text-disabled;
    }
  }
  
  &--error {
    .radio-group__label {
      color: $semantic-color-danger;
    }
  }
  
  &--dense {
    .radio-group {
      gap: $semantic-spacing-component-xs;
    }
    
    &.radio-group-wrapper--horizontal .radio-group {
      gap: $semantic-spacing-component-sm;
    }
    
    .radio-group__label {
      margin-bottom: $semantic-spacing-component-xs;
    }
  }
}

// ==========================================================================
// RADIO GROUP LABEL
// ==========================================================================

.radio-group__label {
  display: block;
  font-weight: 600;
  color: $semantic-color-text-primary;
  line-height: 1.5;
  user-select: none;
  
  &--required {
    .radio-group__required-indicator {
      color: $semantic-color-danger;
      margin-left: $semantic-spacing-micro-tight;
      font-weight: 400;
    }
  }
}

// ==========================================================================
// RADIO GROUP CONTAINER
// ==========================================================================

.radio-group {
  display: flex;
  flex-direction: column;
  position: relative;
  
  &--vertical {
    align-items: flex-start;
  }
  
  &--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  &--dense {
    gap: $semantic-spacing-component-xs;
  }
}

// ==========================================================================
// HELPER TEXT AND ERROR MESSAGES
// ==========================================================================

.radio-group__helper-text {
  margin-top: $semantic-spacing-component-sm;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: $semantic-color-text-secondary;
}

.radio-group__error-text {
  margin-top: $semantic-spacing-component-sm;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: $semantic-color-danger;
}

// ==========================================================================
// RESPONSIVE ADJUSTMENTS
// ==========================================================================

@media (max-width: 768px) {
  .radio-group-wrapper {
    &--horizontal {
      .radio-group {
        flex-direction: column;
        gap: $semantic-spacing-component-sm;
      }
    }
    
    &--lg {
      .radio-group__label {
        font-size: 1rem;
      }
    }
  }
}

// ==========================================================================
// ACCESSIBILITY ENHANCEMENTS
// ==========================================================================

.radio-group[role="radiogroup"]:focus-within {
  // Focus styles are handled by individual radio buttons
}

// High contrast mode support
@media (prefers-contrast: high) {
  .radio-group__label {
    font-weight: 700;
  }
  
  .radio-group-wrapper--error .radio-group__label {
    text-decoration: underline;
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .radio-group__label {
    transition: none;
  }
}