/**
 * Copyright 2021 SPZ HTML Authors. All Rights Reserved.
 */

/**
 * @fileoverview CSS specifically for non-SPZ4ADS formats.
 */

/**
 * Horizontal scrolling interferes with embedded scenarios and predominantly
 * the result of the non-responsive design.
 *
 * Notice that it's critical that `overflow-x: hidden` is only set on `html`
 * and not `body`. Otherwise, adding `overflow-x: hidden` forces `overflow-y`
 * to be computed to `auto` on both the `body` and `html` elements so they both
 * potentially get a scrolling box. See #3108 for more details.
 */
html {
  overflow-x: hidden !important;
}

html,
html body {
  height: auto !important;
}

/**
 * Margin:0 is currently needed for iOS viewer embeds.
 * See:
 */
html body {
  margin: 0 !important;
}

/** These properties can be overriden by user stylesheets. */
body {
  /* Text adjust is set to 100% to avoid iOS Safari bugs in Viewer where
     the font-size is sometimes not restored during orientation. See #449. */
  text-size-adjust: 100%;
}

/**
 * The enables passive touch handlers, e.g. for document swipe, since they
 * no will longer need to try to cancel vertical scrolls during swipes.
 * This is only done in the embedded mode because (a) the document swipe
 * is only possible in this case, and (b) we'd like to preserve pinch-zoom.
 */
html.i-spzhtml-doc {
  touch-action: pan-y pinch-zoom;
}

/**
 * Override a user-supplied `body{overflow: visible; position:relative}`. This
 * style is set in runtime vs css to avoid conflicts with ios-embedded mode
 * and fixed transfer layer.
 */
html.i-spzhtml-doc > body {
  overflow: visible !important;
}

/**
 * The `position: relative` is necessary to ensure that `paddingTop` can be
 * applied to a document to offset the header height, and it doesn't missplace
 * `position: absolute` elements.
 */
html.i-spzhtml-doc > body {
  position: relative !important;
}

.i-spzhtml-scroll-disabled {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.i-spzhtml-carousel-scroll-disabled {
  touch-action: none;
  touch-action: pan-y;
}

/* spz-list CSS to avoid FOUC */
spz-list [role=loading]:not([scroll]), spz-list [role=loading]:not([pagination]) {
  display: none;
}

spz-list [role="slot"]:not(.i-spzhtml-list-slot) {
  display: none;
}

spz-pagination > [role=arrow] {
  display: none;
}
spz-carousel {
  display: flex !important;
}

spz-img[layout="responsive"][auto-fit] {
  width: 100%;
}

spz-accordion > section > :last-child {
  display: none !important;
}
spz-accordion > section[expanded] > :last-child {
  display: block !important;
}
[layout='container']:not(.i-spzhtml-built) {
  color: inherit !important;
}
spz-menu [spz-menu-root] {
  display: flex;
  flex-wrap: nowrap;
}
spz-carousel:not([dom-mounted]) .i-spzhtml-slides-container>:not(.i-spzhtml-slide-item-show) {
  display: none;
}
spz-carousel:not([dom-mounted]):not([i-spzhtml-ssr]) >* {
  display: none;
}
spz-carousel:not([dom-mounted]) [pre], spz-carousel:not([dom-mounted]) [next] {
  display: none;
}
spz-carousel .i-spzhtml-slides-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  transform: translate(0px, 0px);
}
spz-carousel .i-spzhtml-slide-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: flex;
}

spz-carousel .i-spzhtml-slide-item > * {
  width: 100%;
  overflow: hidden !important;
}
spz-carousel[effect="fade"] .i-spzhtml-slides-container .i-spzhtml-slide-item {
  opacity: 0;
  display: none;
}
spz-carousel[effect="fade"] .i-spzhtml-slides-container .i-spzhtml-slide-item-show {
  opacity: 1 !important;
  display: flex;
}
spz-menu [spz-menu-submenu] {
  display: none;
}
.i-spzhtml-tab-panel:not([active]) {
  display: none;
}

spz-menu > * {
  opacity: 0;
  pointer-events: none;
}

spz-menu[finish] > * {
  opacity: 1 !important;
  pointer-events: auto !important;
}
spz-list[display-in-order] [role="listitem"] spz-img img {
  opacity: 0;
  transition: opacity .5s linear;
}
/* always non-displayed. */
spz-dropdown {
  display: none;
}
spz-script {
  font-size: 0;
}

/** ljs css*/
ljs-list [role=loading]:not([scroll]), ljs-list [role=loading]:not([pagination]) {
  display: none;
}

ljs-list [role="slot"]:not(.i-spzhtml-list-slot) {
  display: none;
}

ljs-pagination > [role=arrow] {
  display: none;
}

ljs-carousel {
  display: flex !important;
}

ljs-img[layout="responsive"][auto-fit] {
  width: 100%;
}

ljs-accordion > section > :last-child {
  display: none !important;
}
ljs-accordion > section[expanded] > :last-child {
  display: block !important;
}
[layout='container']:not(.i-spzhtml-built) {
  color: inherit !important;
}
ljs-menu [spz-menu-root] {
  display: flex;
  flex-wrap: nowrap;
}

ljs-menu > * {
  opacity: 0;
  pointer-events: none;
}

ljs-menu[finish] > * {
  opacity: 1 !important;
  pointer-events: auto !important;
}
ljs-list[display-in-order] [role="listitem"] ljs-img img {
  opacity: 0;
  transition: opacity .5s linear;
}
ljs-script {
  font-size: 0;
}
ljs-img:not(.i-spzhtml-element)[i-spzhtml-ssr] > img.i-spzhtml-fill-content{
  display: block;
}
ljs-img.i-spzhtml-ssr:not(.i-spzhtml-element) > [placeholder] {
  z-index: auto;
}
ljs-carousel:not([dom-mounted]):not([i-spzhtml-ssr]) >* {
  display: none;
}
ljs-carousel:not([dom-mounted]) [pre], ljs-carousel:not([dom-mounted]) [next] {
  display: none;
}
ljs-carousel:not([dom-mounted]) .i-spzhtml-slides-container>:not(.i-spzhtml-slide-item-show) {
  display: none;
}
ljs-carousel .i-spzhtml-slides-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  transform: translate(0px, 0px);
}
ljs-carousel .i-spzhtml-slide-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: flex;
}

ljs-carousel .i-spzhtml-slide-item > * {
  width: 100%;
  overflow: hidden !important;
}
ljs-carousel[effect="fade"] .i-spzhtml-slides-container .i-spzhtml-slide-item {
  opacity: 0;
  display: none;
}
ljs-carousel[effect="fade"] .i-spzhtml-slides-container .i-spzhtml-slide-item-show {
  opacity: 1 !important;
  display: flex;
}
ljs-menu [spz-menu-submenu] {
  display: none;
}

spz-tabs:not([finish]) [role="tabpanel"] {
  display: none;
}

ljs-tabs:not([finish]) [role="tabpanel"] {
  display: none;
}

spz-text, ljs-text{
  visibility: hidden;
}

spz-gallery > *:not(:first-child),
ljs-gallery > *:not(:first-child) {
  display: none;
}

spz-gallery.i-spzhtml-built > *:not(:first-child),
ljs-gallery.i-spzhtml-built > *:not(:first-child) {
  display: unset;
}

spz-lightbox + .i-spzhtml-lightbox-mask {
  background: rgba(0, 0, 0, 0.70);
}