/* Styles for src/components/help-drawer.js and nothing else. A docked help pane. */

.help-drawer {
  position: sticky;
  top: var(--menu-height);
  height: calc(100vh - var(--menu-height) - var(--statusbar-height));
  overflow-y: auto;
  width: var(--help-width);
  background: var(--c-control);
  border-left: 1px solid var(--c-win-border);
  padding: 0 var(--s-3) var(--s-4);
  font-size: var(--t-base);
}

.help-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  margin: 0 calc(-1 * var(--s-3)) var(--s-2);
  padding: 0 var(--s-2);
  background: var(--c-title-bar);
  border-bottom: 1px solid var(--c-etched);
}

.help-drawer__kicker { font-weight: 400; }
.help-drawer__close { min-height: 20px; padding: 0 8px; font-size: var(--t-xs); }
.help-drawer__title { font-size: var(--t-md); font-weight: 600; margin: var(--s-2) 0; }
.help-drawer__foot { margin-top: var(--s-3); color: var(--c-text-gray); }

@media (max-width: 900px) {
  .help-drawer { position: static; height: auto; width: 100%; border-left: none; }
}