/**
 * @file
 * Styles for the tag component.
 */

.tag {
  font-size: var(--font-size-sm);
  line-height: 1;
  display: block;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--tag-background);
  border: 1px dashed var(--tag-border-color);
  border-radius: var(--border-radius-base);
  color: var(--theme-dark-tag-color);
}

.tag.tag--has-link:hover,
.tag.bef-link--selected {
  color: var(--tag-color-hover);
  background-color: var(--tag-background-hover);
  border-color: var(--tag-border-color-hover);
  text-decoration: none;
}

.tag.bef-link--selected:hover {
  color: var(--color-black);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.tag.tag--has-link:hover {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
}