/*
  Toolbar — a horizontal row of compact actions separated by thin vertical rules.
  `.a-toolbar` is the base row; `.a-floating-toolbar` layers the floating-surface
  elevation used when the bar hovers over a selection (Notion-style) or canvas object.
*/

.a-toolbar {
  --gap: var(--lens-semantic-spacing-desktop-gap-3);
  --padding-inline: var(--lens-semantic-spacing-desktop-padding-1);
  --divider-color: var(--lens-semantic-color-ui-divider-default);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--a-toolbar-gap, var(--gap));
  padding-inline: var(--a-toolbar-padding-inline, var(--padding-inline));
  & > * + * {
    position: relative;
    &::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: calc(var(--a-toolbar-gap, var(--gap)) / -2);
      border-inline-start: var(--lens-semantic-border-width-thin)
        var(--lens-core-border-style-solid) var(--a-toolbar-divider-color, var(--divider-color));
    }
  }
}

.a-floating-toolbar {
  --height: 44px;
  --radius: var(--lens-semantic-radius-lg);
  --bg: var(--lens-semantic-color-surface-default);
  --shadow: var(--lens-semantic-shadow-medium);
  --border-color: var(--lens-semantic-color-outline-fixed);
  height: var(--a-floating-toolbar-height, var(--height));
  border: var(--lens-semantic-border-width-thin) var(--lens-core-border-style-solid)
    var(--a-floating-toolbar-border-color, var(--border-color));
  border-radius: var(--a-floating-toolbar-radius, var(--radius));
  background: var(--a-floating-toolbar-bg, var(--bg));
  box-shadow: var(--a-floating-toolbar-shadow, var(--shadow));
  width: fit-content;
}