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

@supports (--variable: color-mix(in srgb, var(--TextLinkStyle-color), transparent 40%)) {

.root {
    --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%);
}
  }

.root {

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

.root: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,.isActive:hover {
    --TextLinkStyle-color: var(--TextLinkStyle-color-hover);
    --TextLinkStyle-underline: var(--TextLinkStyle-underline-hover);
  }

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