[data-ui-surface="toolbar"].toolbar {
  position: fixed;
  z-index: var(--arhix-layer-toolbar);
  right: auto;
  bottom: var(--arhix-space-edge);
  left: 50%;
  display: flex;
  overflow: visible;
  width: max-content;
  height: auto;
  padding: 0;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--arhix-island-border);
  border-radius: var(--arhix-radius-island);
  background: var(--arhix-surface-raised);
  box-shadow: var(--arhix-shadow-island);
  color: var(--arhix-ink-muted);
  transform: translateX(-50%);
}

[data-ui-surface="toolbar"] .toolbar__top {
  display: flex;
  height: var(--arhix-bar-zone-height);
  padding: 0 var(--arhix-space-bar-inset);
  align-items: center;
}

[data-ui-surface="toolbar"] :where(
  .toolbar__tool,
  .toolbar__vertical-toggle
) {
  display: grid;
  padding: 0;
  border: 0;
  appearance: none;
  box-shadow: none;
  line-height: 0;
  place-items: center;
}

[data-ui-surface="toolbar"] .toolbar-group {
  display: flex;
  height: var(--arhix-control-height);
  align-items: center;
  gap: var(--arhix-space-micro);
}

[data-ui-surface="toolbar"] .toolbar-group__grid {
  display: flex;
  width: auto;
  height: var(--arhix-control-height);
  align-items: center;
  gap: var(--arhix-space-micro);
}

[data-ui-surface="toolbar"] .toolbar-group__grid > .ui-button,
[data-ui-surface="toolbar"] .toolbar__vertical-toggle {
  width: var(--arhix-control-height);
  min-width: var(--arhix-control-height);
  height: var(--arhix-control-height);
  min-height: var(--arhix-control-height);
  border-radius: var(--arhix-radius-control);
  background: transparent;
  color: var(--arhix-ink-muted);
}

[data-ui-surface="toolbar"] .toolbar__vertical-toggle {
  width: var(--arhix-icon-size-compact);
  min-width: var(--arhix-icon-size-compact);
  border-radius: var(--arhix-radius-pill);
}

[data-ui-surface="toolbar"] :is(.toolbar-group__grid > .ui-button, .toolbar__vertical-toggle):hover,
[data-ui-surface="toolbar"] :is(.toolbar-group__grid > .ui-button, .toolbar__vertical-toggle):focus-visible {
  background: var(--arhix-surface);
  color: var(--arhix-ink-active);
}

[data-ui-surface="toolbar"] :is(.toolbar-group__grid > .ui-button, .toolbar__vertical-toggle):where(.active, ._active, [aria-pressed="true"]) {
  --arhix-icon-secondary: color-mix(in srgb, var(--arhix-accent) 15%, transparent);

  background: var(--arhix-accent-tint);
  color: var(--arhix-accent);
}

[data-ui-surface="toolbar"] :is(.toolbar-group__grid > .ui-button, .toolbar__vertical-toggle):where(.active, ._active, [aria-pressed="true"]):hover,
[data-ui-surface="toolbar"] :is(.toolbar-group__grid > .ui-button, .toolbar__vertical-toggle):where(.active, ._active, [aria-pressed="true"]):focus-visible {
  background: var(--arhix-accent-tint);
  color: var(--arhix-accent);
}

[data-ui-surface="toolbar"] :is(.toolbar-group__grid > .ui-button, .toolbar__vertical-toggle):focus-visible {
  outline: 0;
  box-shadow: none;
}

[data-ui-surface="toolbar"] .toolbar-separator {
  display: block;
  width: 1px;
  height: var(--arhix-notch-bar);
  margin: 0 var(--arhix-space-gap);
  padding: 0;
  align-self: center;
  background: var(--arhix-line);
}

[data-ui-surface="toolbar"] .toolbar-separator::before {
  display: none;
}

[data-ui-surface="toolbar"] .toolbar__divider {
  width: 100%;
  height: 1px;
  background: var(--arhix-line);
}

[data-ui-surface="toolbar"] .toolbar__bottom {
  display: flex;
  height: var(--arhix-control-height);
  padding: 0 var(--arhix-space-gap);
  align-items: center;
  border-radius: 0 0 var(--arhix-radius-island) var(--arhix-radius-island);
  background: var(--arhix-surface-soft);
}

[data-ui-surface="toolbar"] .toolbar__scale {
  color: var(--arhix-ink-muted);
  font: 400 var(--arhix-font-size-body)/1 var(--arhix-font);
}

[data-ui-surface="toolbar"] .toolbar__statuses {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  gap: var(--arhix-space-micro);
}

[data-ui-surface="toolbar"] .toolbar__status {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arhix-ink-ghost);
}

[data-ui-surface="toolbar"] .toolbar__status--presence[data-state="active"] {
  background: var(--arhix-accent);
}

[data-ui-surface="toolbar"] .toolbar__status--server:where(
  [data-state="pending"],
  [data-state="dirty"],
  [data-state="saving"]
) {
  background: var(--arhix-ink-muted);
}

[data-ui-surface="toolbar"] .toolbar__status--server:where(
  [data-state="unavailable"],
  [data-state="problem"]
) {
  background: var(--arhix-mark-problem);
}

[data-ui-surface="toolbar"] .toolbar-drop__wrap {
  bottom: calc(100% + var(--arhix-space-gap));
  border: 1px solid var(--arhix-island-border);
  border-radius: var(--arhix-radius-island);
  background: var(--arhix-surface-raised);
  box-shadow: var(--arhix-shadow-island);
}

[data-ui-surface="toolbar"] .toolbar__tool > svg,
[data-ui-surface="toolbar"] .toolbar__vertical-toggle > svg {
  width: var(--arhix-icon-size);
  height: var(--arhix-icon-size);
}

[data-ui-surface="toolbar"] .toolbar__vertical-toggle > svg {
  width: var(--arhix-icon-size-compact);
  height: var(--arhix-icon-size-compact);
}

[data-ui-surface="toolbar"] .toolbar-drop {
  position: relative;
}

[data-ui-surface="toolbar"] .toolbar-drop__wrap {
  position: absolute;
  z-index: var(--arhix-layer-menu);
  bottom: calc(100% + var(--arhix-space-gap));
  left: 50%;
  display: none;
  width: max-content;
  min-width: var(--arhix-menu-min-width);
  padding: var(--arhix-space-micro);
  transform: translateX(-50%);
}

[data-ui-surface="toolbar"] .toolbar-drop._open > .toolbar-drop__wrap {
  display: block;
}

[data-ui-surface="toolbar"] .toolbar-drop._open > .toolbar-drop__toggle {
  background: var(--arhix-surface);
  color: var(--arhix-ink-active);
}

[data-ui-surface="toolbar"] .toolbar-drop__items {
  display: grid;
  gap: var(--arhix-space-row);
}

[data-ui-surface="toolbar"] .toolbar-drop__items--cols-2 {
  grid-template-columns: repeat(2, minmax(168px, 1fr));
  column-gap: var(--arhix-space-micro);
}

[data-ui-surface="toolbar"] .toolbar-drop__item {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--arhix-control-height);
  min-height: var(--arhix-control-height);
  padding: 0 var(--arhix-space-gap);
  align-items: center;
  gap: var(--arhix-space-gap);
  overflow: hidden;
  border: 0;
  border-radius: var(--arhix-radius-control);
  background: transparent;
  color: var(--arhix-ink-muted);
  cursor: pointer;
  text-align: left;
}

[data-ui-surface="toolbar"] .toolbar-drop__item:hover {
  background: var(--arhix-surface);
  color: var(--arhix-ink-active);
}

[data-ui-surface="toolbar"] .toolbar-drop__icon,
[data-ui-surface="toolbar"] .toolbar-drop__icon > svg {
  display: block;
  width: var(--arhix-icon-size);
  height: var(--arhix-icon-size);
  flex: none;
}

[data-ui-surface="toolbar"] .toolbar-drop__label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--arhix-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-ui-surface="toolbar"] .toolbar-drop__item small {
  min-width: 28px;
  margin-left: auto;
  flex: none;
  color: var(--arhix-ink-muted);
  font: 500 var(--arhix-font-size-body)/1 var(--arhix-font);
  letter-spacing: 0.5px;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 900px) {
  [data-ui-surface="toolbar"].toolbar {
    max-width: calc(100vw - 2 * var(--arhix-space-edge));
  }

  [data-ui-surface="toolbar"] .toolbar__top {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }

  [data-ui-surface="toolbar"] .toolbar__top::-webkit-scrollbar {
    display: none;
  }
}