@mixin flag-link($background-color: $color-body-text, $color: $color-body-background) {
  $margin: -3px;
  $ease-duration: 0.375s;
  $animation: ease(out-expo);
  $ease: $ease-duration $animation;

  cursor: pointer;
  display: inline-block;
  position: relative;
  text-decoration: none;
  transition: color $ease;

  &::after {
    background-color: $background-color;
    bottom: 0;
    box-shadow: 0 -0.5px 0 $color, 0 0.5px 0 $color;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 100%;
    top: 0;

    transition:
    background $ease,
    bottom $ease,
    box-shadow $ease,
    box-shadow $ease,
    height $ease,
    left $ease,
    right $ease,
    top $ease,
    transform $ease,
    width $ease;

    width: auto;
    z-index: -1;
  }

  &:hover {
    color: $color;

    &::after {
      left: $margin;
      right: $margin;
    }
  }

  @include modifier ('selected') {
    color: $background-color;
    cursor: default;

    &:hover {
      color: $background-color;

      &::after {
        top: 50%;
      }
    }

    &::after {
      box-shadow: 0 -0.5px 0 transparent, 0 0.5px 0 transparent;
      height: 1px;
      left: 0;
      right: 0;
      top: 50%;
      transform: rotate(-10deg);

      @include media ('>=desktop-large') {
        height: 2px;
      }
    }
  }
}