:host {
  display: inline-block;

  --highlight-hover-color: var(--dc-primary-accent-colour);
  --promo-hover-color: var(--dc-tag-hover-color);
  --tag-border-width: 1px;
  --tag-color: var(--dc-primary-text-color);
  --tag-height: 26px;
  --tag-vertical-padding: 4px;
}

/* Default styles */
.dc-content-tag {
  align-items: center;
  background-color: var(--dc-background-colour);
  border: var(--tag-border-width) solid var(--tag-color);
  border-radius: 4px;
  color: var(--tag-color);
  display: flex;
  flex-direction: row;
  font-family: var(--dc-font-family);
  font-size: 14px;
  height:
    calc(
      var(--tag-height)
      - 2 * var(--tag-border-width)
      - 2 * var(--tag-vertical-padding)
    );
  letter-spacing: -0.2px;
  padding: var(--tag-vertical-padding) 8px;
  text-decoration: none;
}

a.dc-content-tag:hover {
  background-color: var(--dc-background-accent-color);
}

/* Color setting for other variants */
.event {
  --tag-color: var(--dc-primary-colour);
}

.product-promo {
  --tag-color: var(--dc-accent-color);
  --dc-background-colour: #000a14;
}

.product-highlight {
  --tag-color: var(--dc-background-secondary-accent-color);
}

/* "Product" styles */
.product-highlight,
.product-promo {
  background-color: var(--tag-color);
  border-color: var(--tag-color);
  color: var(--dc-background-colour);
  font-weight: 600;
}

a.event:hover {
  border-color: var(--dc-link-hover-color);
  color: var(--dc-link-hover-color);
}

a.product-highlight:hover {
  background-color: var(--highlight-hover-color);
  border-color: var(--highlight-hover-color);
}

a.product-promo:hover {
  background-color: var(--promo-hover-color);
  border-color: var(--promo-hover-color);
}