a,
.link {
  display: inline;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: @colors[@light][text];
  color: @colors[@light][text];
  transition: color 0.3s ease, border-color 0.3s ease;

  &-inline-block {
    display: inline-block;
  }

  &-block {
    display: block;
  }

  & when (@color-scheme[dark] = true) {
    @media (prefers-color-scheme: dark) {
      border-bottom-color: @colors[@dark][text];
      color: @colors[@dark][text];
    }
  }

  .link-theme(@color) {
    &:hover,
    &.is-hover {
      /* Darken color if not enough contrast */
      color: if(
        luma(@color) < 50,
        @color,
        darken(@color, 30%)
      );
      border-bottom-color: @color;

      & when (@color-scheme[dark] = true) {
        @media (prefers-color-scheme: dark) {
          /* Lighten color is not enough contrast */
          color: if(
            luma(@color) > 50,
            @color,
            lighten(@color, 30%)
          );
          border-bottom-color: @color;
        }
      }
    }

    &:active,
    &.is-active {
      color: lighten(@color, 20%);
      border-bottom-color: lighten(@color, 20%);
    }

    &:focus,
    &.is-focus {
      color: lighten(@color, 10%);
      border-bottom-color: lighten(@color, 10%);
    }
  }

  .link-theme(@colors[@light][primary]);

  &-secondary {
    .link-theme(@colors[@light][secondary]);
  }

  &:disabled,
  &.is-disabled {
    color: fade(@colors[@light][text], 45%) !important;
    border-color: fade(@colors[@light][text], 33%) !important;
    cursor: default;
    pointer-events: none;

    & when (@color-scheme[dark] = true) {
      @media (prefers-color-scheme: dark) {
        color: fade(@colors[@dark][text], 45%) !important;
        border-color: fade(@colors[@dark][text], 33%) !important;
      }
    }
  }

  /* A cleaner looking link. */

  &-clean {
    border-color: @colors[@light][background];
    color: fade(@colors[@light][text], 70%);

    & when (@color-scheme[dark] = true) {
      @media (prefers-color-scheme: dark) {
        border-color: @colors[@dark][background];
        color: fade(@colors[@dark][text], 70%);
      }
    }

    &:hover,
    &.is-hover {
      border-color: fade(@colors[@light][textOffset], 70%);
      color: @colors[@light][textOffset];

      & when (@color-scheme[dark] = true) {
        @media (prefers-color-scheme: dark) {
          border-color: fade(@colors[@dark][textOffset], 70%);
          color: @colors[@dark][textOffset];
        }
      }
    }
  }

  /* Remove link border */

  &-unbordered {
    border-bottom: 0px;

    &:hover,
    &.is-hover {
      border-bottom: 0px;
    }
  }
}
