@import "../../constants/_variables.scss";
$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark
  ),
  $theme-colors
);

.efe-badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  color: $white;
  background-color: $primary;
}

.efe-badge-square {
  border-radius: 0;
  color: $white;
}

.efe-badge-outline {
  background: unset;
  border: 1px solid #639;
  color: #639;
  font-weight: 600;
  margin: 0.25rem !important;
  padding: 0.5rem !important;
  border-radius: 10rem;
  font-size: 75%;
}

.efe-badge-pill {
  display: inline-block;
  background: unset;
  border: 1px solid $warning;
  color: #639;
  // font-weight: 600;
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  border-radius: 10rem;
  font-size: 75%;
  color: white;
}

.efe-badge-pill-padding {
  padding: 0.5rem !important;
  margin: 0.25rem !important;
  color: #fff;
  font-weight: 600;
  border-radius: 10rem;
}

@each $name, $value in $theme-colors {
  .efe-badge-#{$name} {
    border: 1px solid $value;
    background-color: $value;
  }
}

@each $name, $value in $theme-colors {
  .efe-badge-outline-#{$name} {
    border: 1px solid $value !important;
    color: $value !important;
  }
}
