@mixin unstyled-link() {
  color: inherit;
  text-decoration: none;

  &:visited {
    color: inherit;
  }
}

@mixin underlined-link() {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    border-top: border-width() solid currentColor;
    opacity: 1;
    will-change: opacity;
    transition: opacity duration() easing();
  }

  &:hover::after,
  &:active::after {
    opacity: 0.4;
  }

  &:focus::after {
    display: none;
  }
}
