/* Pinned bottom-centre while a selection is live. The wrapper passes presses through except on the bar, or
   its invisible full-width box swallows row clicks. The gutter is the row's because `Card`'s
   `[data-padding="none"]` out-specifies padding on its own box. `state` and `acts` are nowrap rows, so the
   line splits only between them. Its z-index tops the in-page ladder, never compared with overlays (§2.3). */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-selection-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    inset: auto 0 var(--lotics-space-16) 0;
    /* With the bar's `max-width`, bounds it to a phone's viewport and off the edges. */
    padding-inline: var(--lotics-space-16);
    z-index: var(--lotics-z-floating-bar);
    pointer-events: none;
  }

  .lotics-selection-bar__bar {
    max-width: 100%;
    pointer-events: auto;
  }

  .lotics-selection-bar__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--lotics-space-16);
    padding-block: var(--lotics-space-10);
    padding-inline: var(--lotics-space-16);
  }

  .lotics-selection-bar__state,
  .lotics-selection-bar__acts {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--lotics-space-8);
  }
}