@layer blocks {
  /* Quiet text control next to a primary action. Same look on a link or a
     button, so cancel never picks up .button chrome. */
  .cancel {
    appearance: none;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    line-height: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    --link-decoration: none;
    --color-link: var(--color-text-faint);
    --color-link-hover: var(--color-text);
    color: var(--color-text-faint);
  }

  .cancel:hover {
    color: var(--color-text);
  }
}