@layer lotek {
  lt-tabs {
    display: block;
  }

  /* The tab list looks like tabs only when scripts run. Without JavaScript it
     is a table of contents: a plain list of links to the panels, which follow
     one another below it. */
  @media (scripting: enabled) {
    .lt-tabs__list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--lt-tabs-gap, var(--lt-spacing-1));
      margin: 0;
      padding: 0;
      list-style: none;
      border-block-end: 1px solid var(--lt-color-neutral-border-subtle);
    }

    .lt-tabs__list a {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      padding: var(--lt-tabs-padding, var(--lt-spacing-2) var(--lt-spacing-4));
      min-block-size: var(--lt-spacing-10);
      font-family: inherit;
      font-size: var(--lt-font-size-m);
      line-height: var(--lt-line-height-default);
      color: var(--lt-color-accent-text);
      text-decoration: none;
      background: transparent;
      border: 0;
      /* The line under the selected tab is drawn on every tab, transparent on
         those that are not selected. The text then does not jump when the user
         switches tab. */
      border-block-end: var(--lt-spacing-0-5) solid transparent;
      margin-block-end: -1px;
      cursor: pointer;
    }

    .lt-tabs__list a:hover {
      background: var(--lt-color-accent-surface);
    }

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

    .lt-tabs__list a[aria-selected="true"] {
      color: var(--lt-color-neutral-text-strong);
      font-weight: var(--lt-font-weight-semibold);
      border-block-end-color: var(--lt-color-accent-border);
    }

    .lt-tabs__list a[aria-disabled="true"] {
      color: var(--lt-color-disabled-text);
      cursor: not-allowed;
    }

    /* Markup written without a builder function comes without `hidden` on the panels,
       and the web component sets it only once it is registered. Until then
       only one panel is shown, the one the web component is going to select,
       so the content does not jump when the rest are hidden:
       - If the server wrote `hidden` itself, that applies, and the first
         visible panel is the one the server selected.
       - Otherwise the panel the address points to, or the panel containing
         it. That is also where a link in the tab list leads when the web
         component is never registered.
       - Otherwise the first.
       Under `server-controlled` the address does not select, and the first
       visible panel is shown. The lines of the rule are in that order: all
       after the first except the match, all after the first under
       `server-controlled`, and the first when the match is further down.
       `:has()` cannot be nested in `:has()`, hence two forms of the match in
       the last one. Only when scripts run: without JavaScript all are
       shown. */
    lt-tabs:not(:defined) .lt-tabs__panel:not([hidden])
      ~ .lt-tabs__panel:not([hidden]):not(:target, :has(:target)),
    lt-tabs:not(:defined)[server-controlled]
      .lt-tabs__panel:not([hidden])
      ~ .lt-tabs__panel:not([hidden]),
    lt-tabs:not(:defined)
      .lt-tabs__panel:not([hidden]):not(lt-tabs[server-controlled] *):has(
        ~ .lt-tabs__panel:not([hidden]):target,
        ~ .lt-tabs__panel:not([hidden]) :target
      ) {
      display: none;
    }
  }

  /* Without JavaScript the links are a table of contents, one per line. With
     the line height alone they were so close together that the target size
     was under 24 pixels (WCAG 2.5.8). */
  @media (scripting: none) {
    .lt-tabs__list a {
      display: inline-block;
      min-block-size: var(--lt-spacing-6);
      line-height: var(--lt-spacing-6);
    }
  }

  .lt-tabs__panel {
    padding-block-start: var(--lt-tabs-panel-space, var(--lt-spacing-4));
  }

  /* A panel hidden with `until-found` keeps its box but not its content, so
     find in page can reach it. The spacing must go, or there is an empty gap
     under the selected panel for every tab. */
  .lt-tabs__panel[hidden="until-found" i] {
    padding: 0;
  }

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

  /* High contrast: the line under the selected tab is forced to the same
     colour as the transparent lines under the others. `Highlight` gets
     through, and restores the difference. */
  @media (forced-colors: active) {
    .lt-tabs__list a[aria-selected="true"] {
      border-block-end-color: Highlight;
      color: Highlight;
    }
  }
}