@use "sass:color";

// Define base color variables
$color-light: #ffeb3b;
$color-dark: #212121;
$color-happy: #ffeb3b;
$color-approve: #8bc34a;
$color-night: #2c3e50;
$color-mass: #9e9e9e;
$color-tension: #d32f2f;
$color-sleep: #3f51b5;
$color-cold: #03a9f4;
$color-hot: #ff5722;
$color-love: #e91e63;
$color-rain: #2196f3;
$color-anxious: #ff9800;
$color-normal: #4caf50;
$color-primary: #007bff;
$color-secondary: #6c757d;
$color-info: #17a2b8;
$color-white: #fff;
$color-lightdark: #5e5e5e;
$color-right: #28a745;
$color-wrong: #dc3545;

// Additional Color Variables
// Neutral Colors
$color-light-gray: #f8f9fa;
$color-gray: #6c757d;
$color-dark-gray: #343a40;
$color-silver: #c0c0c0;
$color-charcoal: #36454f;

// Vibrant Colors
$color-electric-blue: #7df9ff;
$color-neon-green: #39ff14;
$color-magenta: #ff00ff;
$color-coral: #ff7f50;
$color-sunflower: #ffc107;

// Pastel Colors
$color-pastel-pink: #ffd1dc;
$color-pastel-blue: #aec6cf;
$color-pastel-green: #77dd77;
$color-pastel-yellow: #fdfd96;
$color-pastel-purple: #c9a0dc;

// Earth Tones
$color-sand: #f4a460;
$color-clay: #d2b48c;
$color-forest-green: #228b22;
$color-mountain-gray: #696969;
$color-copper: #b87333;

// Metallic Colors
$color-gold: #ffd700;
$color-silver: #c0c0c0;
$color-bronze: #cd7f32;
$color-steel-blue: #4682b4;
$color-platinum: #e5e4e2;

// Warm Colors
$color-fire: #ff4500;
$color-burgundy: #800020;
$color-amber: #ffbf00;
$color-rose: #ff007f;
$color-maroon: #800000;

// Cool Colors
$color-aqua: #00ffff;
$color-teal: #008080;
$color-lavender: #e6e6fa;
$color-navy: #000080;
$color-indigo: #4b0082;

// Dark Shades
$color-ebony: #555d50;
$color-midnight-blue: #191970;
$color-onyx: #353839;
$color-obsidian: #1c1c1c;
$color-coal: #2f4f4f;

// Bright Colors
$color-lemon: #fff44f;
$color-lime: #bfff00;
$color-tangerine: #f28500;
$color-hot-pink: #ff69b4;
$color-electric-purple: #bf00ff;

// Mixin for button variants using dynamic color scaling
@mixin button-variant($base-color) {
  background-color: $base-color;
  color: if($base-color == $color-light, $color-dark, $color-white);

  &:hover {
    background-color: color.scale($base-color, $lightness: -10%);
  }

  &:active {
    background-color: color.scale($base-color, $lightness: -20%);
  }

  &:focus {
    background-color: color.scale($base-color, $lightness: -20%);
    box-shadow: 0 0 0 2px color.scale($base-color, $lightness: 40%);
  }
}

// Mixin for outline button variants using dynamic color scaling
@mixin button-outline-variant($base-color) {
  background-color: transparent;
  color: $base-color;
  border: 2px solid $base-color;

  &:hover {
    background-color: color.scale($base-color, $lightness: -10%);
    color: $color-white;
    border-color: color.scale($base-color, $lightness: -10%);
  }

  &:active {
    background-color: color.scale($base-color, $lightness: -20%);
    color: $color-white;
    border-color: color.scale($base-color, $lightness: -20%);
  }

  &:focus {
    background-color: color.scale($base-color, $lightness: -20%);
    color: $color-white;
    border-color: color.scale($base-color, $lightness: -20%);
    box-shadow: 0 0 0 2px color.scale($base-color, $lightness: 40%);
  }
}

// Mixin for outline button variants using dynamic color scaling
@mixin button-nav-variant($base-color) {
  background-color: transparent;
  border: none;
  outline: none;

  &:hover {
    box-shadow: 0 0 0 2px color.scale($base-color, $lightness: 40%);
  }

  &:active {
    box-shadow: 0 0 0 2px color.scale($base-color, $lightness: 40%);
  }

  &:focus {
    background-color: color.scale($base-color, $lightness: -20%);
    box-shadow: 0 0 0 2px color.scale($base-color, $lightness: 40%);
  }
}

// Button Styles
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;

  // Button Sizes
  &-xsm {
    padding: 0.15rem 0.25rem;
    font-size: 0.45rem;
  }

  &-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  &-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
  }

  &-xlg {
    padding: 1rem 2rem;
    font-size: 1.5rem;
  }

  &-block {
    width: 100%;
  }

  // Generate Button Variants for All Colors
  @each $color-name, $color-value in (
    primary: $color-primary,
    secondary: $color-secondary,
    success: $color-normal,
    error: $color-tension,
    warning: $color-anxious,
    calm: $color-rain,
    alert: $color-love,
    warm: $color-hot,
    light: $color-light,
    dark: $color-dark,
    happy: $color-happy,
    approve: $color-approve,
    night: $color-night,
    mass: $color-mass,
    sleep: $color-sleep,
    cold: $color-cold,
    hot: $color-hot,
    love: $color-love,
    rain: $color-rain,
    anxious: $color-anxious,
    right: $color-right,
    wrong: $color-wrong,
    light-gray: $color-light-gray,
    gray: $color-gray,
    dark-gray: $color-dark-gray,
    silver: $color-silver,
    charcoal: $color-charcoal,
    electric-blue: $color-electric-blue,
    neon-green: $color-neon-green,
    magenta: $color-magenta,
    coral: $color-coral,
    sunflower: $color-sunflower,
    pastel-pink: $color-pastel-pink,
    pastel-blue: $color-pastel-blue,
    pastel-green: $color-pastel-green,
    pastel-yellow: $color-pastel-yellow,
    pastel-purple: $color-pastel-purple,
    sand: $color-sand,
    clay: $color-clay,
    forest-green: $color-forest-green,
    mountain-gray: $color-mountain-gray,
    copper: $color-copper,
    gold: $color-gold,
    bronze: $color-bronze,
    steel-blue: $color-steel-blue,
    platinum: $color-platinum,
    fire: $color-fire,
    burgundy: $color-burgundy,
    amber: $color-amber,
    rose: $color-rose,
    maroon: $color-maroon,
    aqua: $color-aqua,
    teal: $color-teal,
    lavender: $color-lavender,
    navy: $color-navy,
    indigo: $color-indigo,
    ebony: $color-ebony,
    midnight-blue: $color-midnight-blue,
    onyx: $color-onyx,
    obsidian: $color-obsidian,
    coal: $color-coal,
    lemon: $color-lemon,
    lime: $color-lime,
    tangerine: $color-tangerine,
    hot-pink: $color-hot-pink,
    electric-purple: $color-electric-purple
  ) {
    &-#{"" + $color-name} {
      @include button-variant($color-value);
    }
    &-outline-#{"" + $color-name} {
      @include button-outline-variant($color-value);
    }
    &-nav-#{"" + $color-name} {
      @include button-nav-variant($color-value);
    }
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.8;
  }

  // Link Button Styles
  &-link {
    background-color: transparent;
    color: $color-primary;
    text-decoration: underline;
    border: none;

    &:hover {
      color: color.scale($color-primary, $lightness: -10%);
      text-decoration: none;
    }

    &:active {
      color: color.scale($color-primary, $lightness: -20%);
    }

    &:focus {
      outline: none;
      box-shadow: 0 0 0 2px color.scale($color-primary, $lightness: 40%);
    }

    &[disabled] {
      color: $color-gray;
      text-decoration: none;
      cursor: not-allowed;
    }
  }
}