:root {
  --tag-background-color: var(--color-orange);
  --tag-color: currentColor;
  --tag-font-size: 1.3rem;
  --tag-line-height: 1.3;
  --tag-border-size: 3px;
}

.tag {
  --underline-color: transparent;
  --underline-color--enter: currentColor;
  --underline-height: 2px;

  border: var(--tag-border-size) solid var(--tag-background-color);
  color: var(--tag-color);
  display: inline-block;
  font-size: var(--tag-font-size);
  font-weight: bold;
  line-height: var(--tag-line-height);
  padding: 0.4rem 2rem;
  transition-duration: var(--duration-fast);
  transition-property: background-color;

  &:any-link:is(:hover, :focus) {
    background-color: var(--tag-background-color);
  }
}