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

// Tokens available globally via main application styles

// ==========================================================================
// RADIO BUTTON COMPONENT
// ==========================================================================
// Comprehensive radio button component with multiple variants and sizes
// Uses semantic design tokens for consistent styling across the design system
// ==========================================================================

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

  // ==========================================================================
  // SIZE VARIANTS
  // ==========================================================================
  
  &--sm {
    .radio-button {
      width: 20px;
      height: 20px;
    }
    
    .radio-button__circle {
      width: 20px;
      height: 20px;
      border-width: 1px;
    }
    
    .radio-button__inner-circle {
      width: 8px;
      height: 8px;
      top: 50%;
      left: 50%;
    }
    
    .radio-button__label {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
    
    .radio-button__description {
      font-size: 0.75rem;
      line-height: 1rem;
    }
    
    .radio-button-container {
      gap: $semantic-spacing-component-xs;
    }
  }
  
  &--md {
    .radio-button {
      width: 24px;
      height: 24px;
    }
    
    .radio-button__circle {
      width: 24px;
      height: 24px;
      border-width: 2px;
    }
    
    .radio-button__inner-circle {
      width: 10px;
      height: 10px;
      top: 50%;
      left: 50%;
    }
    
    .radio-button__label {
      font-size: 1rem;
      line-height: 1.5rem;
    }
    
    .radio-button__description {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
    
    .radio-button-container {
      gap: $semantic-spacing-component-sm;
    }
  }
  
  &--lg {
    .radio-button {
      width: 28px;
      height: 28px;
    }
    
    .radio-button__circle {
      width: 28px;
      height: 28px;
      border-width: 2px;
    }
    
    .radio-button__inner-circle {
      width: 12px;
      height: 12px;
      top: 50%;
      left: 50%;
    }
    
    .radio-button__label {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }
    
    .radio-button__description {
      font-size: 1rem;
      line-height: 1.5rem;
    }
    
    .radio-button-container {
      gap: $semantic-spacing-component-md;
    }
  }

  // ==========================================================================
  // VARIANT STYLES
  // ==========================================================================
  
  &--primary {
    .radio-button__circle {
      border-color: $semantic-color-border-primary;
    }
    
    &.radio-button-wrapper--checked .radio-button__circle,
    &.radio-button-wrapper--focused .radio-button__circle {
      border-color: $semantic-color-interactive-primary;
    }
    
    .radio-button__inner-circle--selected {
      background-color: $semantic-color-interactive-primary;
    }
  }
  
  &--secondary {
    .radio-button__circle {
      border-color: $semantic-color-border-secondary;
    }
    
    &.radio-button-wrapper--checked .radio-button__circle,
    &.radio-button-wrapper--focused .radio-button__circle {
      border-color: $semantic-color-interactive-secondary;
    }
    
    .radio-button__inner-circle--selected {
      background-color: $semantic-color-interactive-secondary;
    }
  }
  
  &--success {
    .radio-button__circle {
      border-color: $semantic-color-border-primary;
    }
    
    &.radio-button-wrapper--checked .radio-button__circle,
    &.radio-button-wrapper--focused .radio-button__circle {
      border-color: $semantic-color-success;
    }
    
    .radio-button__inner-circle--selected {
      background-color: $semantic-color-success;
    }
  }
  
  &--warning {
    .radio-button__circle {
      border-color: $semantic-color-border-primary;
    }
    
    &.radio-button-wrapper--checked .radio-button__circle,
    &.radio-button-wrapper--focused .radio-button__circle {
      border-color: $semantic-color-warning;
    }
    
    .radio-button__inner-circle--selected {
      background-color: $semantic-color-warning;
    }
  }
  
  &--danger {
    .radio-button__circle {
      border-color: $semantic-color-border-primary;
    }
    
    &.radio-button-wrapper--checked .radio-button__circle,
    &.radio-button-wrapper--focused .radio-button__circle {
      border-color: $semantic-color-danger;
    }
    
    .radio-button__inner-circle--selected {
      background-color: $semantic-color-danger;
    }
  }

  // ==========================================================================
  // STATE VARIANTS
  // ==========================================================================
  
  &--disabled {
    opacity: 0.6;
    pointer-events: none;
    
    .radio-button__circle {
      border-color: $semantic-color-border-disabled;
      background-color: $semantic-color-surface-disabled;
    }
    
    .radio-button__inner-circle--selected {
      background-color: $semantic-color-text-disabled;
    }
    
    .radio-button__label {
      color: $semantic-color-text-disabled;
    }
    
    .radio-button__description {
      color: $semantic-color-text-disabled;
    }
  }
  
  &--error {
    .radio-button__circle {
      border-color: $semantic-color-danger;
    }
    
    .radio-button__label {
      color: $semantic-color-danger;
    }
  }
  
  &--focused {
    .radio-button__circle {
      box-shadow: 0 0 0 2px rgba($semantic-color-primary, 0.2);
    }
  }
}

// ==========================================================================
// RADIO BUTTON CONTAINER
// ==========================================================================

.radio-button-container {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  
  &:hover:not(.radio-button-wrapper--disabled &) {
    .radio-button__circle {
      border-color: $semantic-color-border-secondary;
    }
  }
}

// ==========================================================================
// RADIO BUTTON
// ==========================================================================

.radio-button {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-button__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  
  &:focus {
    outline: none;
  }
}

.radio-button__circle {
  position: relative;
  border-radius: $semantic-border-radius-full;
  border: 2px solid $semantic-color-border-primary;
  background-color: $semantic-color-surface-primary;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

.radio-button__inner-circle {
  position: absolute;
  border-radius: $semantic-border-radius-full;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.2s ease-in-out;
  
  &--selected {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

// ==========================================================================
// CONTENT AREA
// ==========================================================================

.radio-button-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.radio-button__label {
  font-weight: 500;
  color: $semantic-color-text-primary;
  cursor: pointer;
  transition: color 0.2s ease-in-out;
  margin: 0;
  line-height: 1.5;
}

.radio-button__description {
  color: $semantic-color-text-secondary;
  margin: 0;
  margin-top: $semantic-spacing-micro-tight;
  line-height: 1.4;
}

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

.radio-button__helper-text {
  margin-top: $semantic-spacing-component-xs;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: $semantic-color-text-secondary;
  padding-left: calc(24px + #{$semantic-spacing-component-sm}); // Align with label text
  
  .radio-button-wrapper--sm & {
    padding-left: calc(20px + #{$semantic-spacing-component-xs});
  }
  
  .radio-button-wrapper--lg & {
    padding-left: calc(28px + #{$semantic-spacing-component-md});
  }
}

.radio-button__error-text {
  margin-top: $semantic-spacing-component-xs;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: $semantic-color-danger;
  padding-left: calc(24px + #{$semantic-spacing-component-sm}); // Align with label text
  
  .radio-button-wrapper--sm & {
    padding-left: calc(20px + #{$semantic-spacing-component-xs});
  }
  
  .radio-button-wrapper--lg & {
    padding-left: calc(28px + #{$semantic-spacing-component-md});
  }
}

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

@media (max-width: 768px) {
  .radio-button-wrapper {
    &--lg {
      .radio-button {
        width: 24px;
        height: 24px;
      }
      
      .radio-button__circle {
        width: 24px;
        height: 24px;
      }
      
      .radio-button__inner-circle {
        width: 10px;
        height: 10px;
        top: 50%;
        left: 50%;
      }
      
      .radio-button__label {
        font-size: 1rem;
      }
      
      .radio-button__description {
        font-size: 0.875rem;
      }
    }
  }
}

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

.radio-button__input:focus-visible + .radio-button__circle {
  box-shadow: 0 0 0 2px $semantic-color-border-focus;
  outline: none;
}

// High contrast mode support
@media (prefers-contrast: high) {
  .radio-button__circle {
    border-width: 3px;
  }
  
  .radio-button-wrapper--checked .radio-button__circle {
    border-width: 3px;
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .radio-button__circle,
  .radio-button__inner-circle,
  .radio-button-container {
    transition: none;
  }
}