@layer lotek {
  .lt-switch {
    box-sizing: border-box;
    appearance: none;
    flex: none;
    display: inline-block;
    inline-size: var(--lt-switch-width, var(--lt-spacing-10));
    block-size: var(--lt-switch-height, var(--lt-spacing-6));
    margin: 0;
    border: 1px solid var(--lt-color-neutral-border);
    border-radius: var(--lt-spacing-4);
    background-color: var(--lt-color-neutral-surface);
    /* The knob is a gradient, not a pseudo-element: Firefox does not render
       ::before and ::after on an <input>. */
    background-image: radial-gradient(
      circle at center,
      var(--lt-color-neutral-text-strong) 0 34%,
      transparent 36%
    );
    background-repeat: no-repeat;
    background-size: var(--lt-switch-height, var(--lt-spacing-6)) 100%;
    /* background-position has no logical variant, so both directions are
       written by hand. Off is at the start, on is at the end. */
    background-position: left center;
    cursor: pointer;
    transition:
      background-color 120ms ease,
      background-position 120ms ease;
  }

  /* Without `:not(:disabled)`. It raised the specificity above the states
     below, so the mouse removed the border of a switch that was on. The
     rules for checked and disabled come after this one and win on order. */
  .lt-switch:hover {
    border-color: var(--lt-color-neutral-border-strong);
  }

  .lt-switch:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }

  .lt-switch:dir(rtl) {
    background-position: right center;
  }

  .lt-switch:checked {
    background-color: var(--lt-color-accent-fill);
    border-color: var(--lt-color-accent-fill);
    background-position: right center;
    background-image: radial-gradient(
      circle at center,
      var(--lt-color-accent-content) 0 34%,
      transparent 36%
    );
  }

  .lt-switch:checked:dir(rtl) {
    background-position: left center;
  }

  .lt-switch:disabled {
    background-color: var(--lt-color-disabled-surface);
    border-color: var(--lt-color-disabled-surface);
    background-image: radial-gradient(
      circle at center,
      var(--lt-color-disabled-text) 0 34%,
      transparent 36%
    );
    cursor: not-allowed;
  }

  /* The user has asked for less motion. The switch should still change
     state, it just should not slide. */
  @media (prefers-reduced-motion: reduce) {
    .lt-switch {
      transition: none;
    }
  }

  .lt-switch-row {
    display: flex;
    align-items: center;
    gap: var(--lt-spacing-2);
    line-height: var(--lt-line-height-default);
  }

  /*
   * High contrast: the knob is a gradient, and disappears in the mode.
   * Without it on and off look exactly alike. Here we fall back to a plain
   * checkbox. The switch loses its shape, but `role="switch"` is still
   * there, so it is announced as on and off, and the state is visible
   * again.
   */
  @media (forced-colors: active) {
    .lt-switch,
    .lt-switch:checked {
      appearance: auto;
      inline-size: auto;
      block-size: auto;
      background-image: none;
      border: 0;
    }
  }
}