// Button Customizations - SDGA Custom Enhancements
// Following Bootstrap 5.3 recommended practices

@use 'sass:color';

// ============================================
// BUTTON VARIANTS - Using Sass map and @each loop
// ============================================

// Define button variants with their CSS custom properties
$button-variants: (
  "neutral": (
    color: $white,
    bg: $neutral-950,
    border-color: $neutral-950,
    hover-color: $white,
    hover-bg: $neutral-800,
    hover-border-color: $neutral-800,
    active-color: $white,
    active-bg: $neutral-600,
    active-border-color: $neutral-600,
    disabled-color: $neutral-400,
    disabled-bg: $neutral-200,
    disabled-border-color: $neutral-200
  ),
  "primary": (
    color: $white,
    bg: $primary-600,
    border-color: $primary-600,
    hover-color: $white,
    hover-bg: $primary-700,
    hover-border-color: $primary-700,
    active-color: $white,
    active-bg: $primary-800,
    active-border-color: $primary-800,
    disabled-color: $white,
    disabled-bg: $primary-200,
    disabled-border-color: $primary-200
  ),
  "secondary": (
    color: $black,
    bg: $secondary-100,
    border-color: $secondary-300,
    hover-color: $black,
    hover-bg: $secondary-200,
    hover-border-color: $secondary-300,
    active-color: $black,
    active-bg: $secondary-200,
    active-border-color: $secondary-400,
    disabled-color: $secondary-400,
    disabled-bg: $secondary-200,
    disabled-border-color: $secondary-300
  ),
  "success": (
    color: $white,
    bg: $success-600,
    border-color: $success-600,
    hover-color: $white,
    hover-bg: $success-700,
    hover-border-color: $success-700,
    active-color: $white,
    active-bg: $success-800,
    active-border-color: $success-800,
    disabled-color: $neutral-500,
    disabled-bg: $success-100,
    disabled-border-color: $success-100
  ),
  "danger": (
    color: $white,
    bg: $danger-600,
    border-color: $danger-600,
    hover-color: $white,
    hover-bg: $danger-700,
    hover-border-color: $danger-700,
    active-color: $white,
    active-bg: $danger-800,
    active-border-color: $danger-800,
    disabled-color: $neutral-500,
    disabled-bg: $danger-100,
    disabled-border-color: $danger-100
  ),
  "warning": (
    color: $neutral-950,
    bg: $warning-400,
    border-color: $warning-400,
    hover-color: $neutral-950,
    hover-bg: $warning-500,
    hover-border-color: $warning-500,
    active-color: $neutral-950,
    active-bg: $warning-600,
    active-border-color: $warning-600,
    disabled-color: $neutral-500,
    disabled-bg: $warning-100,
    disabled-border-color: $warning-100
  ),
  "info": (
    color: $white,
    bg: $info-600,
    border-color: $info-600,
    hover-color: $white,
    hover-bg: $info-700,
    hover-border-color: $info-700,
    active-color: $white,
    active-bg: $info-800,
    active-border-color: $info-800,
    disabled-color: $neutral-500,
    disabled-bg: $info-100,
    disabled-border-color: $info-100
  ),
  "light": (
    color: $neutral-950,
    bg: $secondary-100,
    border-color: $secondary-200,
    hover-color: $neutral-950,
    hover-bg: $secondary-200,
    hover-border-color: $secondary-300,
    active-color: $neutral-950,
    active-bg: $secondary-300,
    active-border-color: $secondary-400,
    disabled-color: $neutral-500,
    disabled-bg: $secondary-50,
    disabled-border-color: $secondary-200
  ),
  "dark": (
    color: $white,
    bg: $neutral-800,
    border-color: $neutral-800,
    hover-color: $white,
    hover-bg: $neutral-900,
    hover-border-color: $neutral-900,
    active-color: $white,
    active-bg: $neutral-950,
    active-border-color: $neutral-950,
    disabled-color: $neutral-500,
    disabled-bg: $neutral-300,
    disabled-border-color: $neutral-300
  ),
  "outline-secondary": (
    color: $black,
    border-color: $secondary-300,
    hover-color: $black,
    hover-bg: $secondary-100,
    hover-border-color: $secondary-200,
    active-color: $black,
    active-bg: $secondary-200,
    active-border-color: $secondary-300,
    disabled-color: $secondary-400,
    disabled-bg: transparent,
    disabled-border-color: $secondary-400
  ),
  "subtle": (
    color: $black,
    bg: transparent,
    border-color: transparent,
    hover-color: $black,
    hover-bg: transparent,
    hover-border-color: transparent,
    active-color: $black,
    active-bg: transparent,
    active-border-color: transparent,
    disabled-color: $neutral-400,
    disabled-bg: transparent,
    disabled-border-color: transparent
  ),
  "transparent": (
    color: $black,
    bg: transparent,
    border-color: transparent,
    hover-color: $primary-700,
    hover-bg: transparent,
    hover-border-color: transparent,
    active-color: $primary-900,
    active-bg: transparent,
    active-border-color: transparent,
    disabled-color: $neutral-400,
    disabled-bg: transparent,
    disabled-border-color: transparent
  ),
  "destructive-primary": (
    color: $white,
    bg: $error-600,
    border-color: $error-600,
    hover-color: $white,
    hover-bg: $error-700,
    hover-border-color: $error-700,
    active-color: $white,
    active-bg: $error-900,
    active-border-color: $error-900,
    disabled-color: $neutral-500,
    disabled-bg: $error-100,
    disabled-border-color: $error-100
  ),
  "destructive-secondary": (
    color: $error-700,
    bg: $error-50,
    border-color: $error-100,
    hover-color: $error-700,
    hover-bg: $error-100,
    hover-border-color: $error-200,
    active-color: $error-700,
    active-bg: $error-200,
    active-border-color: $error-300,
    disabled-color: $neutral-500,
    disabled-bg: $error-25,
    disabled-border-color: $error-100
  ),
  "destructive-outline-secondary": (
    color: $error-700,
    bg: transparent,
    border-color: $error-200,
    hover-color: $error-700,
    hover-bg: $error-100,
    hover-border-color: $error-100,
    active-color: $error-700,
    active-bg: $error-200,
    active-border-color: transparent,
    disabled-color: $neutral-400,
    disabled-bg: transparent,
    disabled-border-color: transparent
  ),
  "destructive-subtle": (
    color: $error-700,
    bg: transparent,
    border-color: transparent,
    hover-color: $error-700,
    hover-bg: $error-100,
    hover-border-color: transparent,
    active-color: $error-700,
    active-bg: $error-200,
    active-border-color: transparent,
    disabled-color: $neutral-400,
    disabled-bg: transparent,
    disabled-border-color: transparent
  ),
  "destructive-transparent": (
    color: $error-600,
    bg: transparent,
    border-color: transparent,
    hover-color: $error-700,
    hover-bg: transparent,
    hover-border-color: transparent,
    active-color: $error-900,
    active-bg: transparent,
    active-border-color: transparent,
    disabled-color: $neutral-400,
    disabled-bg: transparent,
    disabled-border-color: transparent
  )
);

$on-primary-button-variants: (
  "neutral": (
    color: $black,
    bg: $white,
    border-color: transparent,
    hover-color: $black,
    hover-bg: rgba($white, 0.8),
    hover-border-color: transparent,
    active-color: $black,
    active-bg: rgba($white, 0.6),
    active-border-color: transparent,
    disabled-color: rgba($white, 0.4),
    disabled-bg: rgba($white, 0.2),
    disabled-border-color: transparent
  ),
  "primary": (
    color: $black,
    bg: $white,
    border-color: transparent,
    hover-color: $black,
    hover-bg: rgba($white, 0.8),
    hover-border-color: transparent,
    active-color: $black,
    active-bg: rgba($white, 0.6),
    active-border-color: transparent,
    disabled-color: rgba($white, 0.4),
    disabled-bg: rgba($white, 0.2),
    disabled-border-color: transparent
  ),
  "secondary": (
    color: $white,
    bg: rgba($white, 0.2),
    border-color: transparent,
    hover-color: $white,
    hover-bg: rgba($white, 0.2),
    hover-border-color: transparent,
    active-color: $white,
    active-bg: rgba($white, 0.4),
    active-border-color: transparent,
    disabled-color: rgba($white, 0.4),
    disabled-bg: rgba($white, 0.2),
    disabled-border-color: transparent
  ),
  "outline-secondary": (
    color: $white,
    bg: transparent,
    border-color: rgba($white, 0.4),
    hover-color: $white,
    hover-bg: rgba($white, 0.2),
    hover-border-color: rgba($white, 0.4),
    active-color: $white,
    active-bg: rgba($white, 0.4),
    active-border-color: rgba($white, 0.4),
    disabled-color: rgba($white, 0.4),
    disabled-bg: transparent,
    disabled-border-color: rgba($white, 0.4)
  ),
  "subtle": (
    color: $white,
    bg: transparent,
    border-color: transparent,
    hover-color: $white,
    hover-bg: rgba($white, 0.2),
    hover-border-color: transparent,
    active-color: $white,
    active-bg: rgba($white, 0.4),
    active-border-color: transparent,
    disabled-color: rgba($white, 0.4),
    disabled-bg: transparent,
    disabled-border-color: transparent
  ),
  "transparent": (
    color: $white,
    bg: transparent,
    border-color: transparent,
    hover-color: $primary-400,
    hover-bg: transparent,
    hover-border-color: transparent,
    active-color: $primary-300,
    active-bg: transparent,
    active-border-color: transparent,
    disabled-color: rgba($white, 0.4),
    disabled-bg: transparent,
    disabled-border-color: transparent
  ),
  "destructive-primary": (
    color: $white,
    bg: $error-600,
    border-color: transparent,
    hover-color: $white,
    hover-bg: $error-700,
    hover-border-color: transparent,
    active-color: $white,
    active-bg: $error-900,
    active-border-color: transparent,
    disabled-color: rgba($white, 0.4),
    disabled-bg: rgba($error-600, 0.2),
    disabled-border-color: transparent
  ),
  "destructive-secondary": (
    color: $error-700,
    bg: $error-50,
    border-color: transparent,
    hover-color: $error-700,
    hover-bg: $error-100,
    hover-border-color: transparent,
    active-color: $error-700,
    active-bg: $error-200,
    active-border-color: transparent,
    disabled-color: rgba($error-700, 0.4),
    disabled-bg: rgba($error-50, 0.2),
    disabled-border-color: transparent
  ),
  "destructive-outline-secondary": (
    color: $error-200,
    bg: transparent,
    border-color: $error-200,
    hover-color: $error-700,
    hover-bg: $error-100,
    hover-border-color: $error-200,
    active-color: $error-700,
    active-bg: $error-200,
    active-border-color: $error-200,
    disabled-color: rgba($error-700, 0.4),
    disabled-bg: transparent,
    disabled-border-color: rgba($error-200, 0.4)
  ),
  "destructive-subtle": (
    color: $error-200,
    bg: transparent,
    border-color: transparent,
    hover-color: $error-700,
    hover-bg: $error-100,
    hover-border-color: transparent,
    active-color: $error-700,
    active-bg: $error-200,
    active-border-color: transparent,
    disabled-color: rgba($error-200, 0.4),
    disabled-bg: transparent,
    disabled-border-color: transparent
  ),
  "destructive-transparent": (
    color: $error-200,
    bg: transparent,
    border-color: transparent,
    hover-color: $error-300,
    hover-bg: transparent,
    hover-border-color: transparent,
    active-color: $error-400,
    active-bg: transparent,
    active-border-color: transparent,
    disabled-color: rgba($error-200, 0.4),
    disabled-bg: transparent,
    disabled-border-color: transparent
  )
);

// Generate button variant classes
@each $name, $props in $button-variants {
  .btn-#{$name} {
    --#{$prefix}btn-color: #{map-get($props, color)};
    --#{$prefix}btn-bg: #{map-get($props, bg)};
    --#{$prefix}btn-border-color: #{map-get($props, border-color)};
    --#{$prefix}btn-hover-color: #{map-get($props, hover-color)};
    --#{$prefix}btn-hover-bg: #{map-get($props, hover-bg)};
    --#{$prefix}btn-hover-border-color: #{map-get($props, hover-border-color)};
    --#{$prefix}btn-focus-shadow-rgb: #{map-get($props, focus-shadow-rgb)};
    --#{$prefix}btn-active-color: #{map-get($props, active-color)};
    --#{$prefix}btn-active-bg: #{map-get($props, active-bg)};
    --#{$prefix}btn-active-border-color: #{map-get($props, active-border-color)};
    --#{$prefix}btn-disabled-color: #{map-get($props, disabled-color)};
    --#{$prefix}btn-disabled-bg: #{map-get($props, disabled-bg)};
    --#{$prefix}btn-disabled-border-color: #{map-get($props, disabled-border-color)};
  };
}

.on-primary {
  @each $name, $props in $on-primary-button-variants  {
    .btn-#{$name} {
      --#{$prefix}btn-color: #{map-get($props, color)};
      --#{$prefix}btn-bg: #{map-get($props, bg)};
      --#{$prefix}btn-border-color: #{map-get($props, border-color)};
      --#{$prefix}btn-hover-color: #{map-get($props, hover-color)};
      --#{$prefix}btn-hover-bg: #{map-get($props, hover-bg)};
      --#{$prefix}btn-hover-border-color: #{map-get($props, hover-border-color)};
      --#{$prefix}btn-focus-shadow-rgb: #{map-get($props, focus-shadow-rgb)};
      --#{$prefix}btn-active-color: #{map-get($props, active-color)};
      --#{$prefix}btn-active-bg: #{map-get($props, active-bg)};
      --#{$prefix}btn-active-border-color: #{map-get($props, active-border-color)};
      --#{$prefix}btn-disabled-color: #{map-get($props, disabled-color)};
      --#{$prefix}btn-disabled-bg: #{map-get($props, disabled-bg)};
      --#{$prefix}btn-disabled-border-color: #{map-get($props, disabled-border-color)};
    }
  };
}

// ============================================
// CUSTOM BUTTON SIZES
// ============================================

.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  border-radius: $radius-sm;
}

// ============================================
// BUTTON ICON UTILITIES
// ============================================
// Icon-only buttons (square buttons with icon)
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  
  &.btn-lg {
    padding: 0.75rem;
  }
  
  &.btn-sm {
    padding: 0.375rem;
  }
  
  &.btn-xs {
    padding: 0.25rem;
  }
}

// ============================================
// Dropdown
// ============================================

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between; 
  gap: .5rem; 
  width: 100%; 
  
  // Reverted input-like color/border styles to fix variants (Primary, etc.)
  // min-height: 2rem;
  // padding: .375rem .75rem;

  // Keep arrow sizing/positioning
  &::after {
    border: none;
    content: "";
    width: 1.5em; 
    height: 1.5em;
    margin-left: auto; 
    // User provided SVG
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%23000' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' /></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg); 
  }

  &:has(+ .dropdown-menu.show)::after,
  .show > &::after {
    transform: rotate(180deg);
  }
}

.dropdown-menu{
  text-align: $body-text-align;

  [dir="rtl"] & {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    text-align: right;
  }

  // Active state with Checkmark
  // Active state with Checkmark
  .dropdown-item {
    position: relative;
    padding-right: 2.5rem; // Space for checkmark (LTR)
    transition: background-color 0.2s ease;
    border-radius: 4px; // Slight rounding for better focus ring appearance

    &:hover {
      background-color: $neutral-50; // Lightest gray for hover (matches img 1)
      color: $black;
    }

    &:focus {
      background-color: $neutral-50;
      color: $black;
      outline: 2px solid $black; // Black rectangle for focus
      outline-offset: -2px;
      z-index: 1; // Ensure outline is visible above other elements
    }
    
    // SELECTED STATE (The option that is currently chosen)
    &.active {
      color: $black;
      background-color: transparent; // No bg color
      font-weight: 600;

      &::after {
        content: "✔"; // Use text character as requested
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        background: none;
        font-size: 1.2em;
        line-height: 1;
      }
    }

    // PRESSED STATE (Mouse down / Clicking) - OVERRIDES Selected state
    &:active {
      background-color: $neutral-200 !important; // Darker gray
      color: $black;
      outline: 0 !important; // Hide focus rectangle
      border: none !important; // Ensure no border interference
      font-weight: normal; 
      
      &::after {
        display: none !important; // Hide checkmark
      }
    }
    
    // RTL Support for Checkmark
    [dir="rtl"] & {
      padding-right: 1rem; // Reset LTR padding
      padding-left: 2.5rem; // Space for checkmark (RTL)
      text-align: right;

      &.active::after {
        right: auto;
        left: 1rem;
      }
    }
  }

}