.root {
  --TextLinkStyle-color: var(--TextLink-color-default, token("global.primary.action.default"));
  --TextLinkStyle-color-hover: var(--TextLink-color-hover, token("global.primary.action.hover"));
  --TextLinkStyle-color-pressed: var(--TextLink-color-pressed, token("global.primary.action.pressed"));
  --TextLinkStyle-underline: token("global.border.action.default");
  --TextLinkStyle-underline-hover: token("global.border.action.hover");;
  --TextLinkStyle-underline-pressed: token("global.border.action.pressed");;

  @supports (--variable: color-mix(in srgb, var(--TextLinkStyle-color), transparent 40%)) {
    --TextLinkStyle-underline: color-mix(in srgb, var(--TextLinkStyle-color), transparent 40%);
    --TextLinkStyle-underline-hover: color-mix(in srgb, var(--TextLinkStyle-color-hover), transparent 40%);
    --TextLinkStyle-underline-pressed: color-mix(in srgb, var(--TextLinkStyle-color-pressed), transparent 40%); 
  }

  background-color: transparent;
  border: none;
  color: var(--TextLinkStyle-color);

  &:not(.hasIconColor) svg {
    fill: var(--TextLinkStyle-color) !important;
  }
}

.decorationDefault {
  text-decoration: underline;
  text-decoration-color: var(--TextLinkStyle-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.decorationNone {
  text-decoration: none;
}

.isActive {
  &:focus,
  &:hover {
    --TextLinkStyle-color: var(--TextLinkStyle-color-hover);
    --TextLinkStyle-underline: var(--TextLinkStyle-underline-hover);
  }

  &:active {
    --TextLinkStyle-color: var(--TextLinkStyle-color-pressed);
    --TextLinkStyle-underline: var(--TextLinkStyle-underline-pressed);
  }
}