@layer lotek {
  .lt-accordion {
    box-sizing: border-box;
    border: 1px solid var(--lt-color-neutral-border-subtle);
    border-radius: var(--lt-accordion-radius, var(--lt-spacing-1));
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
    background: var(--lt-color-neutral-canvas);
  }

  .lt-accordion + .lt-accordion {
    margin-block-start: var(--lt-spacing-2);
  }

  .lt-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lt-spacing-2);
    padding: var(
      --lt-accordion-padding,
      var(--lt-spacing-3)
        var(--lt-accordion-padding-inline, var(--lt-spacing-4))
    );
    font-weight: var(--lt-font-weight-semibold);
    cursor: pointer;
    /* The browser's triangle differs in each of them. It is replaced with
       one that is the same everywhere, and that turns with the panel. */
    list-style: none;
  }

  .lt-accordion summary::-webkit-details-marker {
    display: none;
  }

  .lt-accordion summary::after {
    content: "";
    inline-size: var(--lt-spacing-2);
    block-size: var(--lt-spacing-2);
    flex: none;
    border-inline-end: 2px solid var(--lt-color-accent-text);
    border-block-end: 2px solid var(--lt-color-accent-text);
    transform: rotate(45deg) translate(-2px, -2px);
  }

  .lt-accordion[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  /* The borders are logical and switch sides in right-to-left, but `rotate`
     is physical. Without these the arrow pointed sideways: left when closed
     and right when open. The angle and the offset are flipped, so it points
     down and up as it otherwise does. */
  .lt-accordion summary:dir(rtl)::after {
    transform: rotate(-45deg) translate(2px, -2px);
  }

  .lt-accordion[open] summary:dir(rtl)::after {
    transform: rotate(-225deg) translate(2px, -2px);
  }

  .lt-accordion summary:hover {
    background: var(--lt-color-neutral-surface);
  }

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

  /* The documentation shows a heading in `summary`, so the panels get a
     place in the document outline. Without this it got the browser's margin
     and size, and the row became taller and the text larger than without a
     heading. `:where` lets a class from Heading on the heading win. */
  :where(.lt-accordion summary) > :where(h2, h3, h4, h5, h6) {
    margin: 0;
    font: inherit;
  }

  /* The same space at the sides as the summary, so text and content line up
     also when it changes. */
  .lt-accordion__content {
    padding: 0 var(--lt-accordion-padding-inline, var(--lt-spacing-4))
      var(--lt-spacing-4);
  }

  .lt-accordion__content > :first-child {
    margin-block-start: 0;
  }

  .lt-accordion__content > :last-child {
    margin-block-end: 0;
  }

  .lt-accordion[data-variant="plain"] {
    border-inline: 0;
    border-block-start: 0;
    border-radius: 0;
  }
}