$euiLinkColors: (
  subdued: $euiTextSubduedColor,
  primary: $euiColorPrimaryText,
  secondary: $euiColorSecondaryText,
  accent: $euiColorAccentText,
  warning: $euiColorWarningText,
  danger: $euiColorDangerText,
  text: $euiTextColor,
  ghost: $euiColorGhost,
);

.euiLink {
  @include euiLink;

  .euiLink__externalIcon {
    margin-left: $euiSizeXS;
  }

  &.euiLink-disabled {
    text-decoration: none;
    cursor: default;
  }

  // Create color modifiers based on the map
  @each $name, $color in $euiLinkColors {
    &.euiLink--#{$name} {
      color: $color;

      &:hover,
      &:focus {
        color: darken($color, 10%);
        text-decoration: underline;
      }

      &:focus {
        @include euiFocusBackground($color);
        @include euiFocusRing(null, 0);
      }
    }
  }
}

// Make button EuiLink's text selectable
button.euiLink { // sass-lint:disable-line no-qualifying-elements
  user-select: text;
}