:host {
  display: inline;

  ::slotted(*) {
    all: unset;
    cursor: pointer;
    outline: none;
    color: var(--tds-link);
    text-decoration: underline;
  }

  ::slotted(*:focus-visible) {
    color: var(--tds-link-focus);
    text-decoration: none;
    outline: 2px solid var(--tds-link-focus);
    outline-offset: -2px;
  }

  ::slotted(*:active) {
    color: var(--tds-link);
    text-decoration: underline;
    text-decoration-color: var(--tds-link);
  }

  ::slotted(*:hover) {
    color: var(--tds-link-hover);
    text-decoration: underline;
    text-decoration-color: var(--tds-link-hover);
  }

  ::slotted(*:visited) {
    color: var(--tds-link-visited);
    text-decoration-color: var(--tds-link-visited);
  }
}

.disabled {
  ::slotted(*),
  ::slotted(*:visited) {
    color: var(--tds-link-disabled);
    text-decoration-color: var(--tds-link-disabled);
    pointer-events: none;
  }
}

.no-underline {
  ::slotted(*) {
    text-decoration: none;
  }
}

.no-underline {
  &:hover {
    ::slotted(*) {
      text-decoration: none;
    }
  }
}

.standalone {
  ::slotted(*) {
    font: var(--tds-detail-02);
    letter-spacing: var(--tds-detail-02-ls);
  }
}