@import "variables";
@import "mixins";

//BADGES
$tags-padding: 0.5rem 1rem !default;
$tags-border-radius: 1.6rem !default;
$tags-font-family: $font-family !default;
$tags-font-color: $white !default;
$tags-font-weight: $fw-bold !default;
$tags-margin-bottom: 0.4rem !default;
$tags-font-size: 1.2rem !default;

$tags-special-bg-col: $black !default;
$tags-new-product-bg-col: $col-success !default;
$tags-onsale-bg-col: $col-danger !default;

.tag {
  padding: $tags-padding;
  border-radius: $tags-border-radius;
  color: $tags-font-color;
  font-size: $tags-font-size;
  font-family: $tags-font-family;
  font-weight: $tags-font-weight;
  width: fit-content;
  margin-bottom: $tags-margin-bottom;
  &.special {
    background-color: $tags-special-bg-col;
  }
  &.new-product {
    background-color: $tags-new-product-bg-col;
  }
  &.on-sale {
    background-color: $tags-onsale-bg-col;
  }
}
