@vtmn/css-tag/dist/index-with-vars.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.125rem;
  padding-inline:var(--vtmn-spacing_2);
  font-family:var(--vtmn-typo_font-family);
  font-weight:var(--vtmn-typo_font-weight--normal);
  color:var(--vtmn-semantic-color_content-accent);
  background-color:var(--vtmn-semantic-color_background-accent);
  text-align:center;
  border-radius:var(--vtmn-radius_100);
  text-decoration:none;
  outline:0;
}

a.vtmn-tag:focus-visible{
  box-shadow:var(--vtmn-shadow_focus-visible);
  transition:var(--vtmn-transition_focus-visible);
}

.vtmn-tag > span[class^='vtmx-']{
  -webkit-margin-start:-0.25rem;
          margin-inline-start:-0.25rem;
  -webkit-margin-end:0.25rem;
          margin-inline-end:0.25rem;
  font-size:var(--vtmn-typo_text-2-font-size);
}

.vtmn-tag_variant--accent{
  background-color:var(--vtmn-semantic-color_background-accent);
  color:var(--vtmn-semantic-color_content-accent);
}

.vtmn-tag_variant--brand{
  background-color:var(--vtmn-semantic-color_background-brand-primary);
  color:var(--vtmn-semantic-color_content-primary-reversed);
}

.vtmn-tag_variant--alert{
  background-color:var(--vtmn-semantic-color_background-alert);
  color:var(--vtmn-semantic-color_content-primary-reversed);
}

.vtmn-tag_variant--decorative_gravel{
  background-color:var(--vtmn-semantic-color_decorative-gravel);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_gold{
  background-color:var(--vtmn-semantic-color_decorative-gold);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_cobalt{
  background-color:var(--vtmn-semantic-color_decorative-cobalt);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_brick{
  background-color:var(--vtmn-semantic-color_decorative-brick);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_jade{
  background-color:var(--vtmn-semantic-color_decorative-jade);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_amethyst{
  background-color:var(--vtmn-semantic-color_decorative-amethyst);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_saffron{
  background-color:var(--vtmn-semantic-color_decorative-saffron);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_variant--decorative_emerald{
  background-color:var(--vtmn-semantic-color_decorative-emerald);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-tag_size--small{
  min-block-size:1.25rem;
  block-size:1.25rem;
  font-size:var(--vtmn-typo_caption-1-font-size);
}

.vtmn-tag_size--medium{
  min-block-size:1.5rem;
  block-size:1.5rem;
  font-size:var(--vtmn-typo_text-3-font-size);
}

@media screen and (min-width: 600px) and (max-width: 899px){
}

@media screen and (min-width: 900px) and (max-width: 1199px){
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
}

@media screen and (min-width: 1800px){
}