/*******************************
 Product Tags
 ******************************/
.product-tag {
  border-radius: var(--border-radius);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.product-tag .svg {
  width: 1rem;
  height: 1rem;
}

.product-tag--new {
  background-color: rgb(var(--brand-citrine));
  color: rgb(var(--light-text-primary));
}

.product-tag--trending {
  background-color: rgb(var(--brand-amethyst) / 0.25);
  color: rgb(var(--brand-azure));
}

.product-tag--popular {
  background-color: rgb(var(--brand-azure));
  color: rgb(var(--light-text-inverse));
}

.product-tag--trending.product-tag--trending--bold.Mono3{
    color: rgb(var(--light-text-inverse));
}

/*******************************
 Article Tags
 ******************************/
.article-tag {
  padding: 0.5rem 1rem;
  align-self: start;
  border-radius: var(--border-radius);
  white-space: nowrap;
}

.article-tag--small {
  padding: 0.4rem;
}

.article-tag--xsmall {
  padding: 0.125rem;
}

.article-tag--primary {
  background-color: rgb(var(--dark-container-primary));
  color: rgb(var(--dark-text-primary));
}

.article-tag--secondary {
  border-width: var(--border-width);
  border-color: rgb(var(--light-border-default));
}

.article-tag--tertiary {
  background-color: rgb(var(--light-container-primary));
}

/*******************************
 Search Tags
 ******************************/
.search-tag {
  padding: 0.25rem;
  align-self: start;
  border-radius: var(--border-radius);
  white-space: nowrap;
}

.search-tag--press {
  background-color: rgb(var(--dark-container-primary));
  color: rgb(var(--dark-text-primary));
}

.search-tag--news {
  border-width: var(--border-width);
  border-color: rgb(var(--light-border-default));
}

.search-tag--education {
  background-color: rgb(var(--brand-citrine));
  color: rgb(var(--light-text-primary));
}

.search-tag--research {
  background-color: rgb(var(--brand-azure));
  color: rgb(var(--light-text-inverse));
}

.search-tag--page {
  background-color: rgb(var(--brand-mineral-light));
}
