a.link:not(.button),
a.is-link:not(.button)
  color: var(--group-link-color)
  font-weight: var(--group-link-font-weight)
  text-decoration: var(--group-link-text-decoration)
  text-underline-offset: var(--group-link-text-underline-offset)
  text-decoration-thickness: var(--group-link-text-decoration-thickness)
  border-radius: var(--group-link-radius)
  +fillSvg(var(--group-link-color))

  &:hover
    text-decoration: var(--group-link-text-decoration)
    text-decoration-thickness: var(--group-link-text-decoration-thickness)
    text-underline-offset: var(--group-link-text-underline-offset)
    color: var(--group-link-color-hover)
    +fillSvg(var(--group-link-color-hover))

  &:focus-visible
    @extend %focus

  &:active
    text-decoration: var(--group-link-text-decoration)
    text-decoration-thickness: var(--group-link-text-decoration-thickness)
    text-underline-offset: var(--group-link-text-underline-offset)
    color: var(--group-link-color-active)
    +fillSvg(var(--group-link-color-active))

  &.is-inverted
    color: var(--group-link-inverted-color)
    +fillSvg(var(--group-link-inverted-color))

    &:hover
      text-decoration: var(--group-link-text-decoration)
      text-decoration-thickness: var(--group-link-text-decoration-thickness)
      text-underline-offset: var(--group-link-text-underline-offset)
      color: var(--group-link-inverted-color-hover)
      +fillSvg(var(--group-link-inverted-color-hover))

    &:focus-visible
      @extend %focus-inverted-shadow

    &:active
      text-decoration: var(--group-link-text-decoration)
      text-decoration-thickness: var(--group-link-text-decoration-thickness)
      text-underline-offset: var(--group-link-text-underline-offset)
      color: var(--group-link-inverted-color-active)
      +fillSvg(var(--group-link-inverted-color-active))

  &.is-light
    text-decoration: var(--group-link-inverted-light-text-decoration)
    font-weight: var(--group-link-inverted-light-font-weight)
    color: var(--group-link-inverted-color)
    +fillSvg(var(--group-link-inverted-color))

    &:hover
      color: var(--group-link-inverted-color-hover)
      +fillSvg(var(--group-link-inverted-color-hover))

    &:focus-visible
      @extend %focus-inverted-shadow

    &:active
      color: var(--group-link-inverted-color-active)
      +fillSvg(var(--group-link-inverted-color-active))