/* Shared presentation controls for full and embedded ecosystem graphs.
 * TODO(monorepo-graph): replace this scoped shell with the shared graph toolbar.
 */
.eg-size-controls {
  --size-bg: #183538;
  --size-line: #4b685c;
  --size-text: #d5e3c8;
  --size-muted: #abc0ae;
  --size-choice: #102a30;
  --size-active: #c7d4a5;
  --size-active-text: #193a2c;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--size-line);
  background: var(--size-bg);
  color: var(--size-text);
  min-width: 0;
}
.eg-size-controls[hidden] { display: none !important; }
.eg-size-controls .eg-size-label {
  font: 9px/1.4 SourcePlexMono, monospace;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eg-size-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--size-line);
  border-radius: 7px;
  background: var(--size-choice);
  max-width: 100%;
}
.eg-size-choices button {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--size-text);
  padding: 7px 10px;
  min-height: 32px;
  font: 11px/1.3 SourcePlex, Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.eg-size-choices button:hover { box-shadow: inset 0 0 0 1px var(--size-line); }
.eg-size-choices button[aria-pressed="true"] {
  background: var(--size-active);
  color: var(--size-active-text);
  font-weight: 600;
}
.eg-size-choices button:focus-visible {
  outline: 2px solid var(--size-active);
  outline-offset: 3px;
}
.eg-size-controls > p {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
  color: var(--size-muted);
  font: 10px/1.5 SourcePlex, Arial, sans-serif;
}
.ec-network-controls {
  --size-bg: #edf3e7;
  --size-line: #becdb3;
  --size-text: #344f3c;
  --size-muted: #576e52;
  --size-choice: #e2ebda;
  --size-active: #244c3a;
  --size-active-text: #f2f6e9;
}
.ec-network-controls .eg-size-choices button:focus-visible { outline-color: #355c40; }
@media (max-width: 780px) {
  .eg-size-controls { gap: 7px 10px; padding: 9px 12px; }
  .eg-size-controls .eg-size-label { flex-basis: 100%; }
  .eg-size-choices { width: 100%; }
  .eg-size-choices button { flex: 1 1 auto; padding: 8px; min-height: 36px; }
  .eg-size-controls > p { flex-basis: 100%; font-size: 10px; }
}