/* White alternative to the selected cream design. */
.theme-white,
.theme-white body { background: #fff; }

/* Paint the shadow as a separate static image, independent of video compositing. */
.theme-white .demo-screen {
  position: relative;
  overflow: visible;
  -webkit-mask: none;
  mask: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.theme-white .demo-screen::before {
  content: '';
  position: absolute;
  inset: -8% -16.6667%;
  z-index: 0;
  pointer-events: none;
  background: url("assets/product/screen-shadow.svg") center / 100% 100% no-repeat;
}
.theme-white .demo-screen video {
  position: relative;
  z-index: 1;
  -webkit-mask: url("assets/product/screen-mask.svg") center / 100% 100% no-repeat;
  mask: url("assets/product/screen-mask.svg") center / 100% 100% no-repeat;
}

/* Apply the pill shadows outside the scrolling mask to keep their edges soft. */
.theme-white .demo-controls { filter: drop-shadow(0 3px 4px #18202d26); }
.theme-white .demo-pill {
  color: #646974;
  background: #fff;
  box-shadow: inset 0 0 0 1px #18202d14;
}
.theme-white .demo-pill::before { background: #e7ecfa; }
.theme-white .demo-pill[aria-pressed="true"] {
  color: #292821;
  background: #fff;
  box-shadow: inset 0 0 0 1px #244bcc26;
}
.theme-white .demo-pill:hover { color: #292821; }

/* Keep the decorative shadow image from adding horizontal scrolling on phones. */
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  html.theme-white { overflow-x: clip; }
}