.ui-badge {
  background-color: rgba(mix($base-theme, $gray, 30%), 0.95);
  box-shadow: 0 0 0 1px rgba($base-color, 0.25) inset;
  color: $base-color;

  &--md {
    font-size: 1em;
  }

  &--lg {
    font-size: 1.2em;
  }

  @mixin make-badge-variable($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      background-color: $theme-color !important;
      color: var(--#{$theme}-reverse) !important;
    }
  }

  @mixin make-badge($theme, $theme-color) {
    &.ui-theme--#{$theme} {
      background-color: $theme-color !important;
      color: $white !important;
    }
  }

  @each $label, $color, $fallback-color in $base-themes {
    @include make-badge-variable($label, $color);
  }

  @each $label, $color in $base-colors {
    @include make-badge($label, $color);
  }

  @each $label, $color in $color-list {
    @include make-badge($label, $color);
  }
}

.ui-tooltip {
  background-color: var(--tooltip-bg, $tooltip-bg);
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
  color: $tooltip-color;

  &::after {
    color: var(--tooltip-bg, $tooltip-bg);
  }
}
