%no-text-decoration,
.no-text-decoration {
  text-decoration: none;

  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }
}

%no-text-decoration-hover-yes,
.no-text-decoration-hover-yes {
  text-decoration: none;

  &:hover,
  &:active,
  &:focus {
    text-decoration: underline;
  }
}

%lined-link,
.lined-link {
  text-decoration: underline;

  &:hover,
  &:active,
  &:focus {
    text-decoration: underline;
  }
}

%lined-link-hover-no,
.lined-link-hover-no {
  text-decoration: underline;

  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }
}

%dashed-link,
.dashed-link {
  @extend %no-text-decoration;

  span {
    position: relative;

    &:before {
      position: absolute;
      content: "";
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 0;
      border-bottom: 1px dashed;
      border-color: inherit;
    }
  }
}

%dashed-link-hover-no,
.dashed-link-hover-no {
  @extend %dashed-link;

  &:hover {
    span {
      &:before {
        display: none;
      }
    }
  }
}

%dashed-link-no-hover-yes,
.dashed-link-no-hover-yes {
  @extend %dashed-link;

  span {
    &:before {
      display: none;
    }
  }

  &:hover {
    span {
      &:before {
        display: block;
      }
    }
  }
}

%base-link,
.base-link {
  color: $color-link_main;

  &:hover {
    color: $color-link_accent;
  }

  &:focus {
    color: $color-link_main;
  }

  &:active {
    color: $color-link_main;
  }
}

%second-link,
.second-link {
  color: $color-link_second;

  &:hover {
    color: $color-link_accent;
  }

  &:focus {
    color: $color-link_second;
  }

  &:active {
    color: $color-link_second;
  }
}