SToggle {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    margin: 0;
    padding: 2px;
    border-radius: inherit;

    background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));
    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
    mask-composite: exclude;

    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;

    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;
  }
}

SToggle[checked] {
  color: var(--intergalactic-control-primary-info, #008ff8);
  background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8));
}

SToggle:has(SInput:focus-visible) {
  box-shadow: none;
  outline: none;

  &::before {
    margin: -4px;
    opacity: 1;
    transform: scale(1);
  }
}

/* Firefox fallback */
@supports not (-webkit-mask-composite: xor) {
  SToggle:has(SInput:focus-visible) {
    outline: none;
    box-shadow:
      0 0 0 2px #ffffff,
      0 0 0 4px #7078FC;
  }

  SToggle:has(SInput:focus-visible)::before {
    display: none;
  }
}