.sb-switch {
  --transition-time: 250ms;
  --switch-width: var(--size-xxl);
  position: relative;
  cursor: pointer;
  height: calc(var(--switch-width) / 2);
  width: var(--switch-width);
  border-radius: var(--radius-pill);
  background-color: var(--grey-300);
  transition: background-color var(--transition-time);
}

.sb-switch > input {
  visibility: hidden;
  width: 0px;
  height: 0px;
}

.sb-switch:has(input:disabled) {
  opacity: var(--opacity-subtle);
  cursor: not-allowed;
}

.sb-switch > .sb-switch-slider {
  position: absolute;
  height: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-round);
  top: 50%;
  transform: translateY(-50%) translateX(0%);
  background-color: var(--color-text);
  z-index: 1;
  border: var(--border-s) solid var(--color-border);
  transition: transform var(--transition-time);
}

.sb-switch:has(input:checked) {
  background-color: var(--color-primary);
}

.sb-switch:has(input:checked) > .sb-switch-slider {
  transform: translateY(-50%) translateX(calc(var(--switch-width) - 100%));
}