@vtmn/css-tag/dist/index-base10.css

Decathlon Design System - Vitamin specific CSS styles for tag component

.vtmn-tag{
  box-sizing:border-box;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  inline-size:-moz-fit-content;
  inline-size:fit-content;
  padding-block:0.2rem;
  padding-inline:0.8rem;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-weight:400;
  color:hsl(200, 100%, 4.7%);
  background-color:hsl(54, 100%, 57.8%);
  text-align:center;
  border-radius:4px;
  text-decoration:none;
  outline:0;
}

a.vtmn-tag:focus-visible{
  box-shadow:0 0 0 0.4rem hsl(210, 14.3%, 94.5%), 0 0 0 0.6rem hsl(200, 100%, 4.7%);
  transition:box-shadow 200ms ease-out;
}

.vtmn-tag > span[class^='vtmx-']{
  -webkit-margin-start:-0.4rem;
          margin-inline-start:-0.4rem;
  -webkit-margin-end:0.4rem;
          margin-inline-end:0.4rem;
  font-size:1.6rem;
}

.vtmn-tag_variant--accent{
  background-color:hsl(54, 100%, 57.8%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_variant--brand{
  background-color:hsl(200, 100%, 36.9%);
  color:hsl(0, 0%, 100%);
}

.vtmn-tag_variant--alert{
  background-color:hsl(357, 77.1%, 52%);
  color:hsl(0, 0%, 100%);
}

.vtmn-tag_variant--decorative_gravel{
  background-color:hsl(210, 14.3%, 94.5%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_variant--decorative_gold{
  background-color:hsl(56, 100%, 89%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_variant--decorative_cobalt{
  background-color:hsl(201, 60.5%, 84.1%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_variant--decorative_brick{
  background-color:hsl(358, 96.4%, 89.2%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_variant--decorative_jade{
  background-color:hsl(114, 57.7%, 86.1%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_variant--decorative_amethyst{
  background-color:hsl(296, 17.1%, 83.9%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_variant--decorative_saffron{
  background-color:hsl(20, 100%, 92%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_variant--decorative_emerald{
  background-color:hsl(164, 60.5%, 84.1%);
  color:hsl(200, 100%, 4.7%);
}

.vtmn-tag_size--small{
  min-block-size:2rem;
  block-size:2rem;
  font-size:1.2rem;
}

.vtmn-tag_size--medium{
  min-block-size:2.4rem;
  block-size:2.4rem;
  font-size:1.4rem;
}