// >>-- 10 Badge css start --<<

.badge{
    padding: 0.3em 0.9em 0.3em;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.4;
    cursor: pointer;
    &.badge-notification{
      padding: 0.3em 0.5em 0.15em;
      //margin-left: 15px !important;
    }
}


@mixin badge_mixin($name, $color, $light-color: null) {
  $light-color: if($light-color == null, $color, $light-color);

    .text-bg-#{$name} {
      background-color: rgba(#{$color},1) !important;
      color: rgba(var(--white),1) !important;
      &:hover,&:active ,&.active ,&.show,&:checked,&:focus {
        background-color: rgba(#{$color},0.90) ;
      }
      &.text-bg-light,
      &.text-bg-warning{
        color: rgba(var(--dark),1) !important;

      }
    }
    .text-outline-#{$name} {
      background-color: transparent;
      color: rgba(#{$color},1) !important;
      border: 1px solid rgba(#{$color},1);
      &:hover,&.active ,&.show,&:checked,&:focus {
        background-color: rgba(#{$color},1);
        color: rgba(var(--white),1) !important;
      }
      &.text-outline-warning{
        color: rgba(var(--dark),1) !important;

      }
    }

    .text-light-#{$name} {
      background-color: rgba(#{$color},0.30) ;
      color: rgba(#{$light-color}, 1);
      border-color: transparent;
      transition: var(--app-transition);
      &:hover,&.active ,&.show,&:checked,&:focus {
        background-color: rgba(#{$color},0.20) ;
        border-color: rgba(#{$color}, 1) ;
        color: rgba(#{$light-color}, 1);
        transition: var(--app-transition);
      }
    }
  }

  @each $name, $color in $colors {
    @include badge_mixin("#{$name}", map-get($colors, $name), map-get($colors, "#{$name}-dark"));
  }

  // >>-- 10 Badge css end --<<