/**
 * We intentionally break with HTML5's default [hidden] styling to apply
 * !important.
 */
 [hidden] {
  /* This must be !important, else the toggle helper system would break down
     due to specificity */
  display: none !important;
}

.i-spzhtml-element {
  display: inline-block;
}

/* layout=nodisplay are automatically hidden until JS initializes. */
[layout=nodisplay]:not(.i-spzhtml-element) {
  display: none !important;
}

/* Initialized layout=nodisplay contain [hidden] */
.i-spzhtml-layout-nodisplay[hidden],
[layout=nodisplay][hidden]:not(.i-spzhtml-layout-nodisplay)
{
  /* Display is set/reset via the hidden attribute */
}
.i-spzhtml-layout-nodisplay:not([hidden]),
[layout=nodisplay]:not(.i-spzhtml-layout-nodisplay[hidden])
{
  /* Display is set/reset via the hidden attribute */
}

/**
 * layout=fixed does not have a unresolved implicit style, due to conflicts
 * with non-spz elements.
 */
.i-spzhtml-layout-fixed,
[layout=fixed][width][height]:not(.i-spzhtml-layout-fixed)
{
  display: inline-block;
  position: relative;
}

.i-spzhtml-layout-responsive,
[layout=responsive][width][height]:not(.i-spzhtml-layout-responsive),
[width][height][sizes]:not(img):not([layout]):not(.i-spzhtml-layout-responsive),
[width][height][heights]:not([layout]):not(.i-spzhtml-layout-responsive)
{
  display: block;
  position: relative;
}

.i-spzhtml-layout-intrinsic,
[layout=intrinsic][width][height]:not(.i-spzhtml-layout-intrinsic)
{
  display: inline-block;
  position: relative;
  max-width: 100%;
}
[layout=intrinsic][width][height].i-spzhtml-layout-intrinsic .i-spzhtml-fill-content {
  min-width: auto;
  width: auto;
}
.i-spzhtml-layout-intrinsic .i-spzhtml-sizer {
  max-width: 100%;
}

.i-spzhtml-intrinsic-sizer {
  max-width: 100%;
  display: block !important;
}

/**
 * layout=fixed-height does not have a unresolved implicit style, due to
 * conflicts with non-spz elements.
 */
.i-spzhtml-layout-fixed-height,
[layout=fixed-height][height]:not(.i-spzhtml-layout-fixed-height)
{
  display: block;
  position: relative;
}

/**
 * layout=container does not have a unresolved implicit style, due to conflicts
 * with non-spz elements.
 */
.i-spzhtml-layout-container,
.i-spzhtml-layout-logic,
[layout=container],
[layout=logic]
{
  display: block;
  position: relative;
}

/* Fill layout requires higher specificity than i-spz-html-notbuilt
 * so that the correct width/height can be applied before build.
 */
.i-spzhtml-layout-fill,
.i-spzhtml-layout-fill.i-spzhtml-notbuilt,
[layout=fill]:not(.i-spzhtml-layout-fill)
{
  display: block;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.i-spzhtml-layout-flex-item,
[layout=flex-item]:not(.i-spzhtml-layout-flex-item)
{
  display: block;
  position: relative;
  flex: 1 1 auto;
}

.i-spzhtml-layout-size-defined {
  overflow: hidden !important;
}

.i-spzhtml-layout-awaiting-size {
  position: absolute !important;
  top: auto !important;
  bottom: auto !important;
}

i-spzhtml-sizer {
  display: block !important;
}

/*
 * Disable `i-spzhtml-sizer` when aspect ratio is supported by both the
 * borwser and the optimizer.
 */
@supports (aspect-ratio: 1 / 1) {
  i-spzhtml-sizer.i-spzhtml-disable-ar {
    display: none !important;
  }
}

.i-spzhtml-fill-content {
  display: block;
  /* These lines are a work around to this issue in iOS:     */
  height: 0;
  max-height: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
  width: 0;
  margin: auto;
}

.i-spzhtml-layout-size-defined .i-spzhtml-fill-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.i-spzhtml-replaced-content {
  padding: 0 !important;
  border: none !important;
  /* TODO(dvoytenko): explore adding here object-fit. */
}

/* For author styling. */
.spz-unresolved {
}

.i-spzhtml-unresolved {
  position: relative;
  overflow: hidden !important;
}

/* "notbuild" classes are set as soon as an element is created and removed
   as soon as the element is built. */

.spz-notbuilt {
  /* For author styling. */
}

/**
 * [width][height][sizes] and [width][height][heights] imply layout=responsive
 * before the element has resolved.
 */
.i-spzhtml-notbuilt,
[layout]:not(.i-spzhtml-element):not([i-spzhtml-ssr]),
[width][height][sizes]:not(img):not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]),
[width][height][heights]:not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr])
{
  position: relative;
  overflow: hidden !important;
  color: transparent !important;
}

/**
 * Hide all children of non-container elements.
 * [width][height][sizes] and [width][height][heights] imply layout=responsive
 * before the element has resolved.
 */
 .i-spzhtml-notbuilt:not(.i-spzhtml-layout-container):not([i-spzhtml-ssr]) > *,
[layout]:not([layout=container]):not(.i-spzhtml-element):not([i-spzhtml-ssr]) > *,
[width][height][sizes]:not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]) > *,
[width][height][heights]:not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]) > *
{
  display: none;
}
/** Hide all text node children of non-container elements. */
[layout]:not([layout='container']):not([manual]):not([i-spzhtml-ssr]).i-spzhtml-notbuilt,
[layout]:not([layout='container']):not(.i-spzhtml-element):not([i-spzhtml-ssr]),
[width][height][sizes]:not(img):not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]),
[width][height][heights]:not([layout]):not(.i-spzhtml-element):not([i-spzhtml-ssr]) {
  color: transparent !important;
  line-height: 0 !important;
}

/**
 * We special case the native <img> inside an SSR'd <spz-img>. We allow this to
 * display using `block` defined by .i-spzhtml-fill-content.
 *
 * As more elements get SSR, we'll need to add their special cases here.
 */
spz-img:not(.i-spzhtml-element)[i-spzhtml-ssr] > img.i-spzhtml-fill-content
{
  display: block;
}

.i-spzhtml-ghost {
  visibility: hidden !important;
}

/**
 * [width][height][sizes] and [width][height][heights] imply layout=responsive
 * before the element has resolved.
 */
.i-spzhtml-element > [placeholder],
[layout]:not(.i-spzhtml-element) > [placeholder],
[width][height][sizes]:not([layout]):not(.i-spzhtml-element) > [placeholder],
[width][height][heights]:not([layout]):not(.i-spzhtml-element) > [placeholder] {
  display: block;
  /* line-height:normal overrides line-height:0 from the "hide all children of
     non-container text node children" rule. This avoids a minor content jump during
     element build since placeholders should be fully visible. */
  line-height: normal;
}

.i-spzhtml-element > [placeholder].hidden,
.i-spzhtml-element > [placeholder].spz-hidden {
  visibility: hidden;
}
/* Placeholder, by design, expands layout=container unlike other layouts where
   it is position:absolute and overlays the layout box.
   However, when it goes away it should no longer expand the parent, so instead
   of visibility:hidden it must be display:none */
.i-spzhtml-layout-container > [placeholder].hidden,
.i-spzhtml-layout-container > [placeholder].spz-hidden {
  display: none;
}

.i-spzhtml-layout-size-defined > [placeholder] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1;
}

/* We reset the z-index of blurry image placeholders for images that are
   rendered by the server and are not (yet) controlled by JS to speed up
   display of the real image. This conveniently also fixes the display of
   the image when JS fails to load. */
spz-img.i-spzhtml-ssr:not(.i-spzhtml-element) > [placeholder] {
  z-index: auto;
}

.i-spzhtml-notbuilt > [placeholder] {
  display: block !important;
}

/* Polyfill for IE and any other browser that don't understand templates. */
template {
  display: none !important;
}

/**
 * Forms error/success messaging containers should be hidden at first.
 */
form [submitting],
form [submit-success],
form [submit-error] {
  display: none;
}

/**
 * Form validation error messages should be hidden at first.
 */
[visible-when-invalid]:not(.visible) {
  display: none;
}

[layout="intrinsic"][i-spzhtml-unheight-layout] img {
  width: 100% !important;
  height: auto !important;
  position: relative !important;
}