@layer lotek {
  .lt-toggle-group {
    box-sizing: border-box;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--lt-color-neutral-border);
    border-radius: var(--lt-toggle-group-radius, var(--lt-spacing-1));
    overflow: hidden;
    min-inline-size: 0;
  }

  .lt-toggle-group__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40 pixels high, like the buttons, so a row of them lines up. */
    min-block-size: var(--lt-toggle-group-height, var(--lt-spacing-10));
    padding: var(--lt-toggle-group-padding, 0 var(--lt-spacing-4));
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-accent-text);
    background: var(--lt-color-neutral-canvas);
    cursor: pointer;
  }

  .lt-toggle-group__option + .lt-toggle-group__option {
    border-inline-start: 1px solid var(--lt-color-neutral-border);
  }

  /* The radio button sits inside the label and is shrunk away visually. It
     stays in the keyboard order, so the arrow keys and the screen reader
     work as in a plain radio group. */
  .lt-toggle-group__option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }

  .lt-toggle-group__option:hover {
    background: var(--lt-color-accent-surface);
  }

  .lt-toggle-group__option:has(input:focus-visible) {
    outline: var(--lt-focus-ring);
    outline-offset: -2px;
  }

  .lt-toggle-group__option:has(input:checked) {
    color: var(--lt-color-accent-content);
    background: var(--lt-color-accent-fill);
    font-weight: var(--lt-font-weight-semibold);
  }

  /* The ring is inside, on top of the selected surface, and
     `accent-border-strong` against `accent-fill` was 1.23:1. The selected
     option is always the one that gets focus in a radio group, so nobody
     could see where focus was. `content` against `fill` is a promise in the
     colour contract. The ring cannot be moved outside: the group has
     `overflow: hidden`, and it was clipped away. */
  .lt-toggle-group__option:has(input:checked:focus-visible) {
    outline-color: var(--lt-color-accent-content);
  }

  .lt-toggle-group__option:has(input:disabled) {
    color: var(--lt-color-disabled-text);
    background: var(--lt-color-disabled-surface);
    cursor: not-allowed;
  }

  /*
   * High contrast: the selected option differs only by background colour,
   * and custom colours are overridden in the mode. System colours get
   * through, and `Highlight` with `HighlightText` is exactly the pair the
   * operating system uses to show that something is selected.
   */
  @media (forced-colors: active) {
    .lt-toggle-group__option:has(input:checked) {
      background-color: Highlight;
      color: HighlightText;
    }
  }
}