/**
* Theme Colors.
*/

:root {
  --color-event-card: #{$color-black};
  --color-white: #{$color-white};
  --color-gray-warm: #{$color-gray-warm};
  --color-orange: #{$color-orange};
  --color-pink: #{$color-pink};
  --color-yellow: #{$color-yellow};
  --color-green: #{$color-green};
  --color-blue: #{$color-blue};
  --color-purple: #{$color-purple};
  --combo-bg: #{$color-gray-warm};
  --combo-color: #{$color-black};
}

$theme-colors: (
  black: $color-black,
  white: $color-white,
  gray-warm: $color-gray-warm,
  orange: $color-orange,
  pink: $color-pink,
  yellow: $color-yellow,
  green: $color-green,
  blue: $color-blue,
  purple: $color-purple,
);
$combo-colors: (
  pink: (
    bg: $color-pink,
    color: $color-purple,
  ),
  yellow: (
    bg: $color-yellow,
    color: $color-green,
  ),
  blue: (
    bg: $color-blue,
    color: $color-purple,
  ),
  orange: (
    bg: $color-orange,
    color: $color-pink,
  ),
  green: (
    bg: $color-green,
    color: $color-yellow,
  ),
  purple: (
    bg: $color-purple,
    color: $color-orange,
  ),
);

/**
* Generate .color-x and .bg-color-x classes.
*/
@each $name, $value in $theme-colors {
  .color-#{'' + $name},
  %color-#{'' + $name} {
    color: #{$value};
  }

  .bg-color-#{'' + $name},
  %bg-color-#{'' + $name} {
    background-color: #{$value};
  }
}

/**
* Generate variabel for combo- colors .
*/

@each $name, $color in $combo-colors {
  $combo-bg: map-get($color, bg);
  $combo-color: map-get($color, color);

  .combo-color-#{'' + $name},
  %combo-color-#{'' + $name} {
    --combo-bg: #{$combo-bg};
    --combo-color: #{$combo-color};
  }
}