.presentation-command {
  color: var(--arhix-ink-active);
  font-family: var(--arhix-font);
}

.presentation-command {
  position: fixed;
  z-index: var(--arhix-layer-command-bar);
  right: auto;
  bottom: var(--arhix-space-edge);
  left: 50%;
  display: none;
  gap: var(--arhix-space-gap);
  transform: translateX(-50%);
}

body.presentation-mode .presentation-command {
  display: flex;
}

body.presentation-mode [data-ui-surface="toolbar"] {
  display: none;
}

body[data-role="presentation"] .presentation-command {
  display: flex;
}

body[data-role="presentation"] :is(
  [data-ui-surface="rail"],
  [data-ui-surface="navigator"],
  [data-ui-surface="toolbar"],
  [data-ui-surface="inspector"],
  [data-ui-surface="secondary-inspector"]
) {
  display: none;
}

body[data-role="presentation"] .presentation-command__bar--mode {
  display: none;
}

.presentation-command__bar {
  display: flex;
  align-items: center;
  height: calc(var(--arhix-bar-zone-height) + 2 * var(--arhix-border-hairline));
  padding: var(--arhix-space-bar-inset);
  gap: var(--arhix-space-micro);
  border: var(--arhix-border-hairline) 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-active);
}

.presentation-command__button {
  display: grid;
  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);
  padding: 0;
  border: 0;
  place-items: center;
  background: transparent;
  color: var(--arhix-ink-muted);
}

.presentation-command__button > svg {
  width: var(--arhix-icon-size);
  height: var(--arhix-icon-size);
}

.presentation-command__expand > [data-ui-presentation-expand-icon] {
  display: grid;
  place-items: center;
}

.presentation-command__expand > [data-ui-presentation-expand-icon][hidden] {
  display: none;
}

.presentation-command__expand > [data-ui-presentation-expand-icon] > svg {
  width: var(--arhix-icon-size);
  height: var(--arhix-icon-size);
}

[data-ui-surface="command-bar"] .presentation-command__button--tool {
  background: transparent;
  color: var(--arhix-ink-muted);
}

[data-ui-surface="command-bar"] .presentation-command__button--tool:hover {
  background: var(--arhix-surface);
  color: var(--arhix-ink-active);
}

[data-ui-surface="command-bar"] .presentation-command__button--tool:where(
  .active,
  ._active,
  [aria-pressed="true"]
) {
  background: var(--arhix-accent-tint);
  color: var(--arhix-accent);
}

[data-ui-surface="command-bar"] .presentation-command__button--tool:where(
  .active,
  ._active,
  [aria-pressed="true"]
):hover {
  background: var(--arhix-accent-tint);
  color: var(--arhix-accent);
}

.presentation-command__button:hover {
  background: var(--arhix-surface);
  color: var(--arhix-ink-active);
}

.presentation-command__button:where(.active, ._active, [aria-pressed="true"], [aria-checked="true"]) {
  background: var(--arhix-accent-tint);
  color: var(--arhix-accent);
}

.presentation-command__button--soft {
  background: var(--arhix-surface);
}

[data-ui-surface="command-bar"] .presentation-command__button--soft {
  background: var(--arhix-surface);
}

[data-ui-surface] .presentation-command__separator {
  align-self: center;
  width: 1px;
  min-width: 1px;
  height: var(--arhix-notch-bar);
  margin: 0 var(--arhix-space-micro);
  background: var(--arhix-line);
}

.presentation-command__counter {
  display: inline-flex;
  min-width: 72px;
  height: var(--arhix-control-height);
  align-items: center;
  justify-content: center;
  color: var(--arhix-ink-active);
  font: 500 var(--arhix-font-size-body)/1 var(--arhix-font);
  white-space: nowrap;
}

[data-ui-surface="notification"] {
  position: fixed;
  top: var(--arhix-space-edge);
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 2 * var(--arhix-space-edge));
  transform: translateX(-50%);
  font-family: var(--arhix-font);
}

[data-ui-surface="notification"] .presentation-command__bar {
  flex-wrap: wrap;
  align-content: center;
}

[data-ui-surface="notification"] [hidden] {
  display: none;
}

[data-ui-surface="notification"] .presentation-command__bar {
  height: auto;
  min-height: calc(var(--arhix-bar-zone-height) + 2 * var(--arhix-border-hairline));
}

[data-ui-surface="notification"] [data-ui-notification-message] {
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: var(--arhix-control-height);
  white-space: normal;
  line-height: 1.2;
}

@media (max-width: 360px) {
  [data-ui-surface="notification"] .presentation-command__bar {
    height: auto;
    min-height: calc(var(--arhix-bar-zone-height) + 2 * var(--arhix-border-hairline));
  }
}

.presentation-command__notice-icon {
  display: grid;
  width: var(--arhix-control-height);
  height: var(--arhix-control-height);
  place-items: center;
}

.presentation-command__notice-icon > svg {
  width: var(--arhix-icon-size);
  height: var(--arhix-icon-size);
}

.presentation-command__button--text {
  width: auto;
  padding-inline: var(--arhix-space-block);
  font: 500 var(--arhix-font-size-body)/1 var(--arhix-font);
}

.presentation-command__actions {
  display: flex;
  gap: calc(var(--arhix-space-micro) + var(--arhix-space-pill));
}

.presentation-command__progress {
  flex: 0 0 4ch;
  min-width: 4ch;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

.presentation-command__page--prev > svg {
  transform: rotate(-90deg);
}

.presentation-command__page--next > svg {
  transform: rotate(90deg);
}

body[data-contour-edit="true"] [data-ui-surface="toolbar"] [data-contour-edit-disabled] {
  opacity: 0.22;
  filter: grayscale(1);
  pointer-events: none;
}