@layer lotek {
  .lt-divider {
    /* <hr> has both a border and a height from the browser. Both must go
       before the colour below is the only thing shown. */
    border: 0;
    block-size: 1px;
    /* The browser also gives <hr> auto margins at the sides. In a flex
       column they win over stretch, and the line shrinks to its content,
       which is nothing. It was 0 pixels wide and invisible. It also
       stretches when the parent centres its children or aligns them to the
       start. */
    margin-block: var(--lt-divider-space, var(--lt-spacing-4));
    margin-inline: 0;
    align-self: stretch;
    justify-self: stretch;
    background: var(--lt-color-neutral-border-subtle);
  }

  .lt-divider[data-variant="strong"] {
    background: var(--lt-color-neutral-border-strong);
  }

  /* The surface colour alone was so close to the canvas that the line almost
     disappeared. raised sits between it and border-subtle in both themes. */
  .lt-divider[data-variant="subtle"] {
    background: var(--lt-color-neutral-raised);
  }

  /* High contrast: backgrounds are forced to the page surface colour, and the
     line was only a background. It became invisible. A system colour
     survives. */
  @media (forced-colors: active) {
    .lt-divider,
    .lt-divider[data-variant] {
      background: CanvasText;
    }
  }
}