/* The panel inside the web page: its settings button opens the page's settings dialog, where there is one. */
html:not(.bx-settings) #settings {
  display: none;
}

body {
  margin: 0;
  background: var(--vscode-editor-background);
}

/* The page around has the header's controls in its top bar and menu. */
html.bx-web header {
  display: none;
}

/* The panel's header, as a pane header of the page: a bar across the frame, with small buttons. */
header {
  margin: -0.5rem -1rem 0.5rem;
  padding: 6px 12px 6px 1rem;
  min-height: 40px;
  background: var(--page-background);
  border-bottom: 1px solid var(--vscode-panel-border);
}

/* Its controls in the page's shapes: rounder, a little bigger, the page's 2px focus ring. */
.tb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  transition: background-color 0.15s;
}

.tb:hover,
.segmented button[aria-pressed="false"]:hover {
  background: var(--vscode-list-hoverBackground);
  outline: none;
}

/* Without a mouse no hover either: it would stay after a tap. */
@media (hover: none) {
  .tb:hover,
  .segmented button[aria-pressed="false"]:hover {
    background: transparent;
  }
}

.tb[aria-pressed="true"],
.segmented button[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--vscode-foreground);
}

.segmented {
  border-radius: var(--radius-sm);
}

.segmented button {
  height: 24px;
  border-radius: 4px;
}

.dropdown select {
  height: 28px;
  border-radius: 6px;
}

.tb:focus-visible,
.segmented button:focus-visible,
.dropdown select:focus-visible {
  outline: 2px solid var(--vscode-focusBorder);
  outline-offset: 0;
}

pre#line {
  border-radius: 8px;
}

/* The search box of the quick reference is round like the header's buttons and selects. */
#ref-search {
  border-radius: var(--radius-sm);
}

/* A phone: the header in as few rows as it can, its controls still big enough to tap. */
@media (max-width: 520px) {
  /* It scrolls away with the explanation, which then has the whole frame. */
  header {
    position: static;
    font-size: 12px;
  }

  .tb {
    width: 36px;
    height: 36px;
  }

  .segmented button {
    height: 32px;
  }

  .dropdown select {
    height: 34px;
  }
}