default.css

.ui-switch {
  font-weight: var(--ui-switch-font-weight);
  font-size: var(--ui-switch-font-size);
  line-height: var(--ui-switch-line-height);
  letter-spacing: var(--ui-switch-letter-spacing);
  gap: var(--ui-switch-gap);
  display: inline-flex;
  text-wrap: pretty;

  :where(a) {
    color: var(--color-accent);
    text-decoration: underline;
  }

  :where(input) {
    --tw-outline-opacity: 0;
    --tw-outline-mix: transparent;

    inline-size: var(--ui-switch-width);
    block-size: var(--ui-switch-height);
    padding: calc((var(--ui-switch-height) - var(--ui-switch-icon-size)) / 2);
    border-radius: var(--ui-switch-border-radius);
    background-color: var(--ui-switch-bg);
    outline:
      var(--ui-switch-outline-width) solid
      color-mix(
        in var(--space),
        var(--ui-switch-outline-color) calc(var(--tw-outline-opacity) * 100%),
        var(--tw-outline-mix)
      );
    outline-offset: var(--ui-switch-outline-offset);
    display: flex;
    position: relative;
    flex-shrink: 0;

    &::before {
      width: var(--ui-switch-icon-size);
      height: var(--ui-switch-icon-size);
      background-color: var(--color-light);
      transition: var(--transition-all);
      border-radius: inherit;
      margin-block: auto;
      content: "";
    }
  }
}