/*
 * The formatting band. No rule beneath it: the toolbar sits ABOVE the field
 * rather than inside its frame, so the field's own border is the boundary, and
 * a second line 4px above it was two boundaries for one object.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-markdown-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-2);
    padding-bottom: var(--lotics-space-6);
  }

  /*
   * The band's buttons are rounded SQUARES rather than discs — fifteen circles
   * in a row read as beads. `[data-size]` is the `IconButton`'s own state,
   * present on every one of them, and it is what lifts a composer's shape over
   * the component's own single class: §5 rule 13 gives a class-only win to a
   * DEFAULT, and a control's shape is not one.
   */
  .lotics-markdown-toolbar__button[data-size] {
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background-color: transparent;
    color: var(--lotics-ink-muted);
  }

  /* ON is a ground plus a darker glyph — the same pair a pressed control wears,
     and the reason the button also announces `aria-pressed`. */
  .lotics-markdown-toolbar__button[data-active] {
    background-color: var(--lotics-wash-press);
    color: var(--lotics-ink-default);
  }

  .lotics-markdown-toolbar__divider {
    flex-shrink: 0;
    width: 1px;
    height: 22px;
    margin-inline: var(--lotics-space-6);
    background-color: var(--border);
  }
}