@use 'config/colors';
@use 'config/fonts';
@use 'functions/color';
@use 'mixins/font';
@use 'mixins/spacing';
@use 'mixins/transition';

// sass warning about using colors as keys and how they should be quoted lol
$background-colors: (
  default: color.alpha(colors.$gray-darker, 0.95),
  'red': color.alpha(color.shade(colors.$red, 15%), 0.95),
  'green': color.alpha(color.shade(colors.$green, 15%), 0.95),
  'blue': color.alpha(color.shade(colors.$blue, 15%), 0.95),
);

.container {
  @include spacing.padding-xy($x: 10px, $y: 3px);
  @include font.apply(fonts.$primary, ( font-weight: 500 ));
  font-size: 10px;
  color: colors.$white;
  text-transform: uppercase;
  border-radius: 50px;
  box-shadow: 0 0 3px color.alpha(colors.$black, 0.3);
  opacity: 0;
  transform: translate(-50%, 5px);
  @include transition.apply(background-color, opacity, transform);
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

@each $key, $color in $background-colors {
  @if $key != 'default' {
    .#{$key} {
      background-color: $color;
    }
  }
}

.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
