/* Standalone design samples: tokens and room for the same component markup. */
.mbk-library {
  font-family: var(--sans);
  font-size: 13px;
  padding: 24px;
}
.mbk-library-host {
  background: var(--chrome-surface);
  border: 0;
  display: block;
  height: auto;
  margin-inline: auto;
  min-height: 160px;
  overflow: visible;
  position: relative;
}
.mbk-library-host.mbk-shell--desktop { max-width: 1120px; }
.mbk-library-host.mbk-shell--mobile { max-width: 392px; }
.mbk-library[data-library-component="top-bar"] .mbk-library-host { min-height: 240px; }
.mbk-library[data-library-component="tag-picker"] .mbk-library-host { max-width: 440px; padding-top: 30px; }
.mbk-library[data-library-component="tag-picker"] .mbk-tag-picker { top: 30px; }
.mbk-library[data-library-component="catalogue-navigation"] .mbk-library-host { height: 540px; }
.mbk-library .mbk-drawer { bottom: 0; top: 0; }
.mbk-library[data-library-component="inspector"] .mbk-library-host { display: flex; height: 680px; }
.mbk-library[data-library-component="prop-field"] .mbk-library-host { max-width: 680px; padding: 16px; }
.mbk-library[data-library-component="device-frame"] .mbk-library-host {
  height: calc(100dvh - 48px);
  min-height: 0;
  overflow: auto;
}
.mbk-library .browser-frame { max-width: 100%; }
.mbk-library[data-library-component="comparison-pane"] .mbk-library-host { padding: 16px; }
.mbk-library[data-library-component="flow-step"] .mbk-library-host { padding: 16px; }