:host([hidden]) {
  display: none;
}
:host {
  display: inline;
}

:host {
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  color: var(--colorBrandForegroundLink);
  cursor: pointer;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  overflow: inherit;
  text-align: start;
  text-decoration: none;
  text-decoration-thickness: var(--strokeWidthThin);
  text-overflow: inherit;
  user-select: text;
}

:host(:hover) {
  outline: none;
  text-decoration-line: underline;
}

@media (hover: hover) {
  :host(:hover) {
    color: var(--colorBrandForegroundLinkHover);
  }

  :host(:active) {
    color: var(--colorBrandForegroundLinkPressed);
  }

  :host([appearance='subtle']:hover) {
    color: var(--colorNeutralForeground2LinkHover);
  }

  :host([appearance='subtle']:active) {
    color: var(--colorNeutralForeground2LinkPressed);
  }
}

:host([appearance='subtle']) {
  color: var(--colorNeutralForeground2Link);
}

:host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)),
:host([inline]) {
  font: inherit;
  text-decoration: underline;
}

:host(:focus-visible),
:host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)):focus-visible,
:host([inline]:focus-visible) {
  outline-style: none;
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: var(--colorStrokeFocus2);
}

:host(:not([href])) {
  color: inherit;
  text-decoration: none;
}

::slotted(a) {
  position: absolute;
  inset: 0;
}

@media (forced-colors: active) {
  :host {
    color: LinkText;
  }
}