/* No rule beneath: the field's border is the boundary. */
@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);
  }

  /* Rounded squares, since fifteen circles read as beads. `[data-size]` lifts this over the `IconButton`'s
     class, as §5 rule 13 lets a class-only rule win only for a default. */
  .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);
  }

  /* A ground plus darker glyph, a pressed control's pair, matching `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);
  }
}