:root {
  --toggle-color-off: #{dehex(color.$ui-cool-gray-300)};
  --toggle-color-on: #{dehex(color.$blue-500)};
}

@media (prefers-color-scheme: dark) {
  :root {
    --toggle-color-off: #{dehex(color.$ui-cool-gray-900)};
    --toggle-color-on: #{dehex(color.$blue-500)};
  }
}

.x-toggle-light.x-toggle-btn {
  background-color: rgb(var(--toggle-color-off));
}

.x-toggle:checked + label > .x-toggle-light.x-toggle-btn {
  background-color: rgb(var(--toggle-color-on));
}

.x-toggle-component label {
  &.off-label, &.on-label {
    padding-right: 0;
    padding-left: 0;
  }
}
