/* Shared styles of the BroadcastManagement pages: only what several components share and Bootstrap cannot express.
   Colors, fonts, sizes and focus come from Bootstrap, cs-theme.css and the cs-vsa-ui boundary; the rules below only set
   which theme color a shared part takes. Every root carries .cs-bm-root, and so does the wrapper of its dialogs in the
   overlay portal. */

/* The navigation, the campaign tabs, the language tabs and the wizard steps read in the body colors: muted
   until hovered, the current entry in the emphasis color, with the primary color underlining the current tab only and
   a subtle surface behind the current pill. Bootstrap exposes these as variables of its nav. */
.cs-bm-root .cs-bm-nav {
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-emphasis-color);
  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
  --bs-nav-pills-link-active-color: var(--bs-emphasis-color);
  --bs-nav-pills-link-active-bg: var(--bs-tertiary-bg);
}
.cs-bm-root .cs-bm-nav.nav-underline .nav-link.active {
  border-bottom-color: var(--bs-primary);
}

/* Sandboxed Player App frames: the live preview of C2 and the preview dialog of C4. Each frame shows a desktop or, at
   the width of a phone, a mobile screen. */
:where(.cs-bm-root) .cs-bm-stage {
  overflow: hidden;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  background: var(--bs-body-bg);
}
:where(.cs-bm-root) .cs-bm-stage iframe {
  display: block;
  width: 100%;
  height: 30em;
  margin: 0 auto;
  border: 0;
  background: var(--bs-body-bg);
}
:where(.cs-bm-root) .cs-bm-stage[data-preview-device-frame="mobile"] iframe {
  width: 390px;
  max-width: 100%;
  height: 42em;
  border-inline: var(--bs-border-width) solid var(--bs-border-color);
}

/* The preview notice of D1 and D2 sits on the page body, outside the roots and the theme, like the Player App
   viewer it describes; its colors are those of the viewer. */
.cs-bm-preview-notice {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: 90vw;
  width: max-content;
  background: #101317;
  color: #f8d34b;
  border: 1px solid #63551d;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  pointer-events: none;
}