/* A long surface's sections as a gutter rail or a strip pinned over a narrow column; one list either way.
   The caller picks the form from its measured container and places it (the rail sticky in its column, the
   strip sticky at the column's top). */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-section-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  /* Pinned by its caller, so it never exceeds the screen: the viewport less twice the region rung it is
     pinned at, in `dvh` since a phone's chrome owns the difference. Only the list scrolls, so the way back
     above it stays on screen. */
  .lotics-section-nav[data-form="rail"] {
    max-height: calc(100dvh - var(--lotics-space-48));
    gap: var(--lotics-space-16);
    overflow: hidden;
  }

  /* A hair, not a rung: the rows are one object. */
  .lotics-section-nav__list[data-form="rail"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    overflow-y: auto;
    gap: var(--lotics-space-2);
  }

  /* One line that scrolls sideways, since a wrapped strip reads as two and moves its names under the
     reader; the hairline under it is the column's edge while it is pinned. */
  .lotics-section-nav[data-form="strip"] {
    background: var(--background);
    border-bottom: 1px solid var(--border);
  }

  .lotics-section-nav__list[data-form="strip"] {
    --lotics-section-nav-fade: var(--lotics-space-24);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--lotics-space-4);
  }

  /* The end hiding names fades, as `Tabs` does, since a flush last name reads as a whole strip. A mask, not a
     gradient, since the ground varies. */
  .lotics-section-nav__list[data-form="strip"][data-ahead] {
    mask-image: linear-gradient(to right, currentcolor calc(100% - var(--lotics-section-nav-fade)), transparent 100%);
  }

  .lotics-section-nav__list[data-form="strip"][data-behind] {
    mask-image: linear-gradient(to right, transparent 0, currentcolor var(--lotics-section-nav-fade));
  }

  .lotics-section-nav__list[data-form="strip"][data-behind][data-ahead] {
    mask-image: linear-gradient(
      to right,
      transparent 0,
      currentcolor var(--lotics-section-nav-fade),
      currentcolor calc(100% - var(--lotics-section-nav-fade)),
      transparent 100%
    );
  }

  /* A strip item: the name on the control's line, the section in view underlined in the ink that acts. */
  .lotics-section-nav__list[data-form="strip"] > .lotics-section-nav__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: var(--lotics-space-6);
    height: var(--lotics-control-height);
    padding-inline: var(--lotics-space-8);
    border-width: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--lotics-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-tight-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-medium);
    white-space: nowrap;
    cursor: pointer;
  }

  .lotics-section-nav__list[data-form="strip"] > .lotics-section-nav__item:focus-visible {
    outline-width: var(--lotics-ring-width);
    outline-style: solid;
    outline-color: var(--ring);
    outline-offset: calc(var(--lotics-ring-width) * -1);
  }

  .lotics-section-nav__list[data-form="strip"] > .lotics-section-nav__item[data-active] {
    border-bottom-color: var(--primary);
    color: var(--lotics-ink-default);
  }

  .lotics-section-nav__label[data-step="waiting"] {
    color: var(--lotics-ink-inactive);
  }

  /* An exit stands apart from the steps: a group's rung before the first of them, never a fifth step. */
  .lotics-section-nav__list[data-form="rail"] > .lotics-section-nav__item:not([data-exit]) + .lotics-section-nav__item[data-exit] {
    margin-block-start: var(--lotics-space-16);
  }

  .lotics-section-nav__list[data-form="strip"] > .lotics-section-nav__item:not([data-exit]) + .lotics-section-nav__item[data-exit] {
    margin-inline-start: var(--lotics-space-16);
  }

  /* A box, not the bare dot, since it carries its own name. */
  .lotics-section-nav__dot {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /* The leading slot, in `MenuButton`'s `Icon size={20}` box so words start on one x; empty before a bare
     name. */
  .lotics-section-nav__marker {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  /* A section's glyph is quiet beside a step's disc: muted, never the name's ink. */
  .lotics-section-nav__marker[data-glyph] {
    --lotics-icon-color: var(--lotics-ink-muted);
  }

  /* The work now, in words under its name in the rail and after it in the strip, in the accent its ring wears. */
  .lotics-section-nav__now {
    flex-shrink: 0;
    color: var(--lotics-accent);
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-tight-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-weight: var(--lotics-weight-medium);
    white-space: nowrap;
  }

  /* A page item's chevron, after its name, in muted ink: the press leaves this page. */
  .lotics-section-nav__chevron {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    color: var(--lotics-ink-muted);
  }
}