.Link {
  --this-typography-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  text-decoration: var(--this-typography-decoration);
  color: inherit;
  position: relative;

  /* Used for the focus ring */
  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    display: block;
    border-radius: var(--x-global-border-radius);
    pointer-events: none;
    box-shadow: 0 0 0 0 transparent;
    transition: inherit;
    inset: rem(-2px) rem(-3px) rem(-3px);
  }

  &:focus {
    outline: none;

    &::after {
      box-shadow: 0 0 0 rem(2px) var(--x-color-interactive-text-hovered);
    }

    /* stylelint-disable-next-line selector-max-specificity */
    &:not(:focus-visible)::after {
      box-shadow: none;
    }
  }

  &:focus-visible::after {
    box-shadow: 0 0 0 rem(2px) var(--x-color-interactive-text-hovered);
  }
}

.appearanceDefault {
  background-color: var(--x-color-interactive);
  color: var(--x-color-interactive-text);
  transition: color var(--x-link-transition-duration) var(--x-timing-base),
    background-color var(--x-link-transition-duration) var(--x-timing-base),
    box-shadow var(--x-link-transition-duration) var(--x-timing-base);

  &:hover,
  &:focus {
    --this-background-color: var(--x-color-interactive-hovered);
    --this-color: var(--x-color-interactive-text-hovered);
    background-color: var(--this-background-color);
    color: var(--this-color);
  }
}

.appearanceMonochrome {
  /* stylelint-disable-next-line declaration-no-important */
  text-decoration: underline !important;
}

.colorHoveredColor1:hover {
  background-color: var(--x-color1, var(--this-background-color));
  color: var(--x-color1-text, var(--this-color));
}

.colorHoveredColor2:hover {
  background-color: var(--x-color2, var(--this-background-color));
  color: var(--x-color2-text, var(--this-color));
}