/*
 * Link-style button (button_style: link): uppercase, small, bold, underlined
 * on hover. Colours follow the surrounding Color Scheme's link roles.
 */

.button.button__link {
  color: var(--link);
  font-size: var(--button--font-size--sm--mobile);
  font-weight: var(--font-weight--bold);
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 768px) {
  .button.button__link {
    font-size: var(--button--font-size--sm);
  }
}

.button.button__link:hover,
.button.button__link:focus,
.button.button__link.button__active {
  color: var(--link-hover);
  text-decoration: underline;
}