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

.ui-form-field {
  position: relative;
  width: 100%;
  margin-bottom: $semantic-spacing-stack-md;

  // Size Variants
  &--sm {
    .ui-form-field__label {
      font-size: 0.8125rem;
      margin-bottom: $semantic-spacing-stack-xs;
    }
    
    .ui-form-field__helper-text {
      font-size: 0.75rem;
      margin-top: $semantic-spacing-stack-xs;
    }
  }

  &--md {
    .ui-form-field__label {
      font-size: 0.875rem;
      margin-bottom: $semantic-spacing-stack-sm;
    }
    
    .ui-form-field__helper-text {
      font-size: 0.8125rem;
      margin-top: $semantic-spacing-stack-sm;
    }
  }

  &--lg {
    .ui-form-field__label {
      font-size: 1rem;
      margin-bottom: $semantic-spacing-stack-sm;
    }
    
    .ui-form-field__helper-text {
      font-size: 0.875rem;
      margin-top: $semantic-spacing-stack-sm;
    }
  }

  // State Variants
  &--error {
    .ui-form-field__label {
      color: $semantic-color-error;
    }
    
    .ui-form-field__helper-text {
      color: $semantic-color-error;
    }
  }

  &--success {
    .ui-form-field__label {
      color: $semantic-color-success;
    }
    
    .ui-form-field__helper-text {
      color: $semantic-color-success;
    }
  }

  &--warning {
    .ui-form-field__label {
      color: $semantic-color-warning;
    }
    
    .ui-form-field__helper-text {
      color: $semantic-color-warning;
    }
  }

  &--disabled {
    .ui-form-field__label {
      color: $semantic-color-text-disabled;
    }
    
    .ui-form-field__helper-text {
      color: $semantic-color-text-disabled;
    }
  }

  // Label
  &__label {
    display: block;
    font-weight: 500;
    color: $semantic-color-text-primary;
    cursor: pointer;
    transition: color 0.15s $semantic-motion-easing-ease-in-out;

    &--required::after {
      content: ' *';
      color: $semantic-color-error;
      font-weight: 400;
    }

    &--optional {
      &::after {
        content: ' (optional)';
        color: $semantic-color-text-tertiary;
        font-weight: 400;
        font-size: 0.9em;
      }
    }
  }

  // Control Container
  &__control {
    position: relative;
    width: 100%;
  }

  // Helper Text
  &__helper-text {
    color: $semantic-color-text-tertiary;
    line-height: 1.4;
    transition: color 0.15s $semantic-motion-easing-ease-in-out;

    &--error {
      color: $semantic-color-error;
    }

    &--success {
      color: $semantic-color-success;
    }

    &--warning {
      color: $semantic-color-warning;
    }

    &--info {
      color: $semantic-color-info;
    }
  }

  // Validation Message
  &__validation {
    display: flex;
    align-items: flex-start;
    gap: $semantic-spacing-stack-xs;
    margin-top: $semantic-spacing-stack-xs;
    
    &--error {
      color: $semantic-color-error;
    }
    
    &--success {
      color: $semantic-color-success;
    }
    
    &--warning {
      color: $semantic-color-warning;
    }
    
    &--info {
      color: $semantic-color-info;
    }
  }

  &__validation-icon {
    font-size: 1rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
    line-height: 1;
  }

  &__validation-text {
    font-size: 0.8125rem;
    line-height: 1.4;
    flex: 1;
  }

  // Character Counter
  &__char-counter {
    font-size: 0.75rem;
    color: $semantic-color-text-tertiary;
    text-align: right;
    margin-top: $semantic-spacing-stack-sm;
    
    &--over-limit {
      color: $semantic-color-error;
    }
  }

  // Hint Text
  &__hint {
    font-size: 0.8125rem;
    color: $semantic-color-text-secondary;
    margin-top: $semantic-spacing-stack-xs;
    display: flex;
    align-items: flex-start;
    gap: $semantic-spacing-stack-xs;
  }

  &__hint-icon {
    font-size: 1rem;
    color: $semantic-color-info;
    margin-top: 0.125rem;
    flex-shrink: 0;
    line-height: 1;
  }

  // Layout Variants
  &--horizontal {
    display: flex;
    align-items: flex-start;
    gap: $semantic-spacing-stack-lg;

    .ui-form-field__label {
      flex: 0 0 auto;
      min-width: 120px;
      margin-bottom: 0;
      padding-top: $semantic-spacing-stack-xs;
    }

    .ui-form-field__content {
      flex: 1;
      min-width: 0;
    }
  }

  // Content Wrapper
  &__content {
    width: 100%;
  }

  // Focus Ring Support
  &:focus-within {
    .ui-form-field__label {
      color: $semantic-color-primary;
    }
  }

  // Group Support (for radio buttons, checkboxes, etc.)
  &--group {
    .ui-form-field__control {
      display: flex;
      flex-direction: column;
      gap: $semantic-spacing-stack-sm;
    }

    &.ui-form-field--horizontal {
      .ui-form-field__control {
        flex-direction: row;
        flex-wrap: wrap;
        gap: $semantic-spacing-stack-md;
      }
    }
  }

  // Compact variant for tighter layouts
  &--compact {
    margin-bottom: $semantic-spacing-stack-sm;

    .ui-form-field__label {
      margin-bottom: $semantic-spacing-stack-xs;
    }

    .ui-form-field__helper-text,
    .ui-form-field__validation {
      margin-top: $semantic-spacing-stack-xs;
    }
  }

  // Full width variant
  &--full-width {
    width: 100%;

    .ui-form-field__control,
    .ui-form-field__control > * {
      width: 100%;
    }
  }

  // Responsive Design
  @media (max-width: $semantic-breakpoint-md - 1) {
    &--horizontal {
      flex-direction: column;
      gap: $semantic-spacing-stack-sm;

      .ui-form-field__label {
        min-width: unset;
        padding-top: 0;
        margin-bottom: $semantic-spacing-stack-xs;
      }
    }
  }

  @media (max-width: $semantic-breakpoint-sm - 1) {
    &--group.ui-form-field--horizontal {
      .ui-form-field__control {
        flex-direction: column;
        gap: $semantic-spacing-stack-sm;
      }
    }
  }

  // Animation for validation messages
  .ui-form-field__validation,
  .ui-form-field__helper-text {
    animation: slideInUp 0.3s $semantic-motion-easing-ease-in-out;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}