SToggle {
  position: relative;
  transform: translate(0);

  &::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 in oklch, oklch(0.74 0.17 303), oklch(0.58 0.168 278.2)));
    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, oklch(0.23 0.01 140));
  background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg in oklch, oklch(0.64 0.223 299.3), oklch(0.74 0.117 274.1)));
}

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