/* Copyright 2013 Google Inc. All Rights Reserved. */

* {
  animation: none !important;
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-name: none !important;
  animation-fill-mode: none !important;
}

body {
  margin: 0;
  padding: 0;
  position: absolute;
  background: transparent;
  /* Video documents have overflow set to hidden, which is required during
   * capture, but breaks scrolling on stage (b/190653730). */
  overflow: initial !important;
}

html {
  overflow: scroll;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAIAAABvrngfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjMwRTFCRjkwMDBEMTFFNkJGNDJGM0EwNDU2NTNGQjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjMwRTFCRkEwMDBEMTFFNkJGNDJGM0EwNDU2NTNGQjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMzBFMUJGNzAwMEQxMUU2QkY0MkYzQTA0NTY1M0ZCNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMzBFMUJGODAwMEQxMUU2QkY0MkYzQTA0NTY1M0ZCNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pvh6SjIAAABFSURBVHjaNIvLCQAwCEMtFZzBg+AM7r+YB6EpaXPK52VVlYiYWXfTbHeHmxkEVcXwKgiZ26t4JLszkzzZS0UEnXwdAQYAPugdS8CVkl8AAAAASUVORK5CYII=');
}

html,body {
  width: 100%;
  height: 100%;
}

/* As of Chrome ~70, adding a clip-path to elements in scrolling documents
 * embedded in iframes with 3-d transforms (which exist on our pages and the
 * body of full-page documents) causes scrolling to shift (b/129558596).
 * Applying an initial clip-path to some element in the document prevents this
 * from occurring, since the bug only occurs when a clip-path is added for the
 * first time or when the last clip-path is removed.
 */
html::after {
  content: '';
  clip-path: inset(0);
}

a {
  pointer-events: none;
}

[contenteditable="true"] {
  word-wrap: normal;
  outline-color: inherit;
  outline-width: inherit;
  outline-style: initial;
  line-break: auto;
  min-height: initial;
  min-width: initial;
}

.text-tool-feedback:hover {
  outline-color: rgba(0, 142, 255, 0.29);
  outline-width: 3px;
  outline-style: dashed;
}

[g_editable="true"] {
  word-wrap: normal;
  -webkit-line-break: normal;
  min-height: 18px;
  min-width: 10px;
}

ninjaloadinghack {
  display: none;
}

.active-element-outline {
  outline: #adff2f solid 2px;
}

/* Hide hidden layers. !important is needed to override visibility if it's set
 * as an override (inline) style as a result of a visibility range animation. */
[data-gwd-tl-hidden] {
  visibility: hidden !important;
}

/* Turn off pointer-events on locked layers so unlocked layers underneath can be
 * selected. When selecting overlapping elements, the snap manager favors the
 * element with the highest z-index, but if the element cannot accept mouse
 * events (e.g., because it is invisible or does not accept pointer-events), the
 * selection controller will go with the valid event target identified by the
 * browser (the next clickable element below). */
[data-gwd-tl-locked] {
  pointer-events: none;
}

/**
 * TODO: b/319502810 - Remove the prefixed mask property when CEF is upgraded
 * to version 120.
 * Remove masking effects from elements with hidden masks.
 */
[data-gwd-tl-mask-hidden] {
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/*
 * Do not add a size for the scrollbar on documents without pages.
 * @bug 32583344
 */
:not(.htmlNoPages)::-webkit-scrollbar {
  width: 8px;
  height: 9px;
}

::-webkit-scrollbar {
  zoom: 1 !important;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  border: none;
}

::-webkit-scrollbar-track:hover {
  background-color: rgba(119, 119, 119, 0.2);
  border: none;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(119, 119, 119, 0.8);
  border: none;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(119, 119, 119, 0.9);
  border: none;
}

::-webkit-scrollbar-thumb:active {
  background-color: rgba(119, 119, 119, 1);
  border: none;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

/*
 * Parallax, swirl, carousel, and swipe galleries render with overflow hidden at
 * runtime; mimic this behavior on stage.
 */
amp-carousel,
gwd-carouselgallery,
gwd-parallax,
gwd-swipegallery,
gwd-swirl {
  overflow: hidden;
}

/*
 * Show an edit icon at the bottom-right of components whose properties can
 * be configured in a component settings dialog.
 */
gwd-3d-model-viewer::after,
gwd-image-effect::after,
gwd-parallax::after,
gwd-particleeffects::after,
gwd-swirl::after,
gwd-transitiongallery::after,
gwd-video::after {
  position: absolute;
  content: '';
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;opacity:1;" xml:space="preserve"><path fill="dimgray" d="M6.2978,14.6479v3.1318h3.1333l6.8769-6.8794L13.1772,7.768L6.2978,14.6479z M17.8393,7.5312l-1.293-1.2935 c-0.5044-0.5078-1.3291-0.5092-1.8374-0.0034L13.6142,7.33l3.1333,3.1323l1.0942-1.0957C18.3491,8.8603,18.3471,8.04,17.8393,7.5312 z"/></svg>');
  background-repeat: no-repeat;
  width: 36px;
  height: 36px;
  bottom: 5px;
  right: 5px;
}

/*
 * Don't show an edit icon at the bottom-right of a gwd-3d-model-viewer element
 * if it is a child of a gwd-swirl element because the gwd-swirl element already
 * shows an edit icon.
 */
gwd-swirl > gwd-3d-model-viewer::after {
  background: none;
}

/*
 * @bug 117674260 Video background is black when controls attribute is enabled.
 * The following styles are required to override Chrome's default styling for
 * video controls.
 */
video::-webkit-media-controls-panel {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;opacity:1;" xml:space="preserve"><style type="text/css">.st0{fill:none;enable-background:new;}.st1{fill:white;enable-background:new;}</style><rect class="st0" width="24" height="24"/><path class="st1" d="M18,4l2,4h-3l-2-4h-2l2,4h-3l-2-4H8l2,4H7L5,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4H18z"/></svg>') 50% 50% / 50% no-repeat rgba(204, 204, 204, 0.5) !important;
}

video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}

video::-webkit-media-controls-timeline {
  display: none !important;
}

video::-webkit-media-controls {
  background: none !important;
}

video::-webkit-media-controls div::-webkit-media-controls-panel {
  background: none !important;
}

video:not([controls], gwd-av-clip video) {
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;opacity:1;" xml:space="preserve"><style type="text/css">.st0{fill:none;enable-background:new;}.st1{fill:white;enable-background:new;}</style><rect class="st0" width="24" height="24"/><path class="st1" d="M18,4l2,4h-3l-2-4h-2l2,4h-3l-2-4H8l2,4H7L5,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4H18z"/></svg>') 50% 50% / 50% no-repeat rgba(204, 204, 204, 0.5);
}

/*
 * @bug 230022733 Elements are not rendered after adding a video, video
 * component, or carousel component to a plain HTML document in Chrome 94. This
 * issue is a result of the fix in cl/367316336, which added z-index:1000 to
 * the ::before pseudo-element of the body tag for documents without pages. To
 * fix the rendering, it appears that we need to force the custom element's
 * background elements to be in a new stacking context. We attempted to do this
 * with isolation:isolate, but that didn't work, so we arbitrarily chose
 * filter: blur(0) as another style that forces a new stacking context without
 * introducing visual changes.
 */
gwd-carouselgallery,
gwd-video,
video[data-gwd-node] {
  filter: blur(0);
}

/*
 * Hide all video clips by default; the stage's video preview controller is
 * responsible for overriding this for clips that are visible at the current
 * time.
 */
gwd-av-clip {
  visibility: hidden;
}

audio {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;opacity:1;" xml:space="preserve"><style type="text/css">.st0{fill:none;enable-background:new;}.st1{fill:white;}</style><rect class="st0" width="24" height="24"/><path class="st1" d="M3,9v6h4l5,5V4L7,9H3z M16.5,12c0-1.8-1-3.3-2.5-4v8C15.5,15.3,16.5,13.8,16.5,12z M14,3.2v2.1c2.9,0.9,5,3.5,5,6.7s-2.1,5.8-5,6.7v2.1c4-0.9,7-4.5,7-8.8S18,4.1,14,3.2z"/></svg>');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
  background-color: rgba(204, 204, 204, 0.5);
}

audio:not([data-gwd-controls])::-webkit-media-controls-enclosure {
  display: none !important;
}

gwd-hotspot {
  display: none;
}

/*
 * This style is added so that the child elements of these custom elements are
 * rendered correctly in the on-stage preview (b/204979730).
 */
gwd-audio,
gwd-image,
gwd-video {
  display: inline-block;
}

/*
 * Crop overflow on the stage when stage masking is enabled. This must be done
 * above the document root (in the case of a document with pages, the
 * gwd-page-content element) because overflow:hidden forces transform-style
 * to flat, which is incompatible with the root defining the document's 3D
 * coordinate system.
 */
[stage-mask] .gwd-page-wrapper {
  overflow: hidden;
}