SHighlightedCheckbox:not([state="invalid"]) {
  [data-ui-name="Value.CheckMark"] {
    border: 1px solid transparent;
    border-radius: var(--intergalactic-addon-rounded, 4px);
    background: linear-gradient(white, white) padding-box,
      var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  input[data-ui-name="CheckboxFH.Value"]:checked + [data-ui-name="Value.CheckMark"] {
    border-color: transparent;
    background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,
      var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box;
  }

  [data-ui-name="Value.CheckMark"]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: -5px;
    padding: 1px;
    border-width: 2px;
    border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px);
    border-color: transparent;
    pointer-events: none;
    background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;
    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
    mask-composite: exclude;

    opacity: 0;
    transform: scale(0.9);

    transition:
      opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out,
      transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
  }

  input[data-ui-name="CheckboxFH.Value"]:checked:not(:focus-visible)+[data-ui-name="Value.CheckMark"]::before {
    opacity: 0;
    transform: scale(0.9);
  }

  input[data-ui-name="CheckboxFH.Value"]:focus-visible+[data-ui-name="Value.CheckMark"]::before {
    opacity: 1;
    transform: scale(1);
  }

  input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before {
    border-color: transparent;
    background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box;
  }
}