TextLink.css

/**
 * TextLink
 */



:root {
  --link-color-default: var(--color-link);
  --link-border-color-default: #d7dfeb;
  --link-color-hover: #23385a;
  --link-color-active: var(--color-text);
  --link-color-visited: var(--color-link-visited);
  --link-border-color-focus: #3b5f9a;
  --link-box-shadow-focus: 0 0 0 3px var(--color-fill-focus);
  --link-box-shadow-current: 0 0 0 3px var(--color-fill-focus-current);
}

.root {
  color: var(--link-color-default);
  position: relative;
  outline: 0;
  text-decoration: underline;
  text-underline-position: under;
  text-decoration-color: var(--link-border-color-default);

  /* Focus outline */
  &::before {
    border-radius: var(--radius);
    border: 1px solid var(--link-border-color-focus);
    inset: 0 -2px;
    box-shadow: var(--link-box-shadow-focus);
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
  }

  /* Visited */
  &:visited {
    color: var(--link-color-visited);
    text-decoration-color: var(--link-color-visited);
  }

  /* Hover */
  &:hover {
    color: var(--link-color-hover);
    text-decoration-color: var(--link-color-hover);
  }

  /* Active */
  &:active {
    color: var(--link-color-active);
    text-decoration-color: var(--link-color-active);
    display: inline;

    &::before {
      display: none;
    }
  }

  /* Focus */
  &:focus {
    background-image: none;
    display: inline-block;

    /* Prevents double underline */
    &:not(:hover, :active) {
      text-decoration: none;
    }

    /* Activates focus outline */
    &:not(:hover)::before {
      display: block;
    }
  }
}

div[class*="Selected"] {
  /**
    * :not is the crown prince of pseudo selector specificity.
    * That's causing stylelint grief here since it's more
    * specific than the things above it, but if we invert the
    * hierarchy then we'd have to duplicate most of this code.
    * <sigh>.
    */
  /* stylelint-disable no-descending-specificity */
  & .root {
    color: var(--color-link-current);

    /* Visited */
    &:visited {
      color: var(--color-link-current);
      text-decoration-color: var(--color-link-current);
    }

    /* Focus */
    &:focus {
      /* Activates focus outline */
      &:not(:hover)::before {
        display: block;
        box-shadow: var(--link-box-shadow-current);
        border: 1px solid var(--link-box-shadow-current);
      }
    }

    &:hover {
      color: var(--link-color-selected);
      text-decoration-color: var(--link-color-selected);
    }
  }
}

div[class*="interactionStyles"]:active .root {
  color: var(--color-link-current);
  text-decoration-color: var(--color-link-current);
}