.helpText {
  --dsc-helptext-icon-size: 65%;
  --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --dsc-helptext-size: var(--ds-size-7);

  align-self: center;
  border-radius: var(--ds-border-radius-full);
  border: max(1px, calc(var(--ds-size-1) / 2)) solid; /* Allow border-width to grow with font-size */
  box-sizing: border-box;
  height: var(--dsc-helptext-size);
  min-height: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  width: var(--dsc-helptext-size);

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

  &::before {
    content: '';
    border-radius: inherit;
    background: currentcolor;
    mask-composite: exclude;
    mask-image: var(--dsc-helptext-icon-url);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size:
      var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size),
      cover;
    scale: 1.1; /* Hide tiny half pixel rendeing bug */
    width: 100%;
    height: 100%;

    @media (forced-colors: active) {
      background: ButtonText;
    }
  }

  &:has(+ :popover-open)::before {
    mask-image:
      var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
  }

  @media print {
    display: none;
  }
}
