.root {
  --TextLinkStyle-color-default: 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-fg-color: var(--TextLinkStyle-color-default);
  --TextLinkStyle-fg-color-hover: var(--TextLinkStyle-color-hover);
  --TextLinkStyle-fg-color-pressed: var(--TextLinkStyle-color-pressed);
  --TextLinkStyle-underline-color: token("global.border.action.default");
  --TextLinkStyle-underline-color-hover: token("global.border.action.hover");;
  --TextLinkStyle-underline-color-pressed: token("global.border.action.pressed");;

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

  background-color: transparent;
  color: var(--TextLinkStyle-fg-color);
  outline: none;
  text-decoration: underline;
  text-decoration-color: var(--TextLinkStyle-underline-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;

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

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

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