@use "sass:map";

$draco-colors: (
  "gray": (
    "regular": (
      "background": var(--token-color-palette-neutral-500),
      "text": var(--token-color-palette-neutral-200)
    ),
    "subtle": (
      "background": var(--token-color-palette-neutral-800),
      "text": var(--token-color-palette-neutral-200)
    )
  ),
  "blue": (
    "regular": (
      "background": var(--token-color-palette-blue-600),
      "text": var(--token-color-palette-neutral-200)
    ),
    "subtle": (
      "background": var(--token-color-palette-blue-950),
      "text": var(--token-color-palette-blue-400)
    )
  ),
  "purple": (
    "regular": (
      "background": var(--token-color-palette-purple-600),
      "text": var(--token-color-palette-neutral-200)
    ),
    "subtle": (
      "background": var(--token-color-palette-purple-950),
      "text": var(--token-color-palette-purple-500)
    )
  ),
  "amber": (
    "regular": (
      "background": var(--token-color-palette-orange-500),
      "text": black
    ),
    "subtle": (
      "background": var(--token-color-palette-orange-950),
      "text": var(--token-color-palette-orange-400)
    )
  ),
  "red": (
    "regular": (
      "background": var(--token-color-palette-red-500),
      "text": var(--token-color-palette-neutral-200)
    ),
    "subtle": (
      "background": var(--token-color-palette-red-950),
      "text": var(--token-color-palette-red-500)
    )
  ),
  "pink": (
    "regular": (
      "background": var(--token-color-palette-pink-500),
      "text": var(--token-color-palette-neutral-200)
    ),
    "subtle": (
      "background": var(--token-color-palette-pink-950),
      "text": var(--token-color-palette-pink-500)
    )
  ),
  "green": (
    "regular": (
      "background": var(--token-color-palette-green-600),
      "text": var(--token-color-palette-neutral-200)
    ),
    "subtle": (
      "background": var(--token-color-palette-green-950),
      "text": var(--token-color-palette-green-500)
    )
  ),
  "teal": (
    "regular": (
      "background": var(--color-teal-500),
      "text": var(--color-teal-50)
    ),
    "subtle": (
      "background": var(--color-teal-100),
      "text": var(--color-teal-700)
    )
  ),
  "inverted": (
    "regular": (
      "background": var(--color-white),
      "text": var(--color-black)
    )
  )
);

.draco-badge {
  @each $color-name, $variants in $draco-colors {
    // Regular color variant
    &--color-#{$color-name} {
      background-color: map.get($variants, "regular", "background");
      color: map.get($variants, "regular", "text");
    }

    // Subtle variant (except for inverted)
    @if $color-name != "inverted" {
      &--color-#{$color-name}-subtle {
        background-color: map.get($variants, "subtle", "background");
        color: map.get($variants, "subtle", "text");
      }
    }
  }
}