

@import './amp-story-desktop-user-overridable.css';

amp-story[standalone] {
  background-color: black;
}

/**
 * NOTE: If you change any variables or media queries change:
 * css/amp-story-player-shadow.css
 *
 * Story previews are shown on the mobile SERP in a viewer with a 3/4 aspect
 * ratio, so a 31/40 min-aspect-ratio here ensures that the mobile UI is
 * displayed instead of the desktop UI.
 */

@media (min-aspect-ratio: 31/40) {
  /** Variables shared between page, system layer and pagination buttons. */
  :root:not([data-story-supports-landscape]):not([i-amphtml-story-mobile]) {
    --i-amphtml-story-desktop-one-panel-ratio: 69 / 116;
    --i-amphtml-story-desktop-one-panel-responsive-margin: max(74px, 8.25vh);
    /** Calculates panel height by subtracting responsive vertical margin. */
    --i-amphtml-story-desktop-one-panel-height: calc(var(--story-100dvh) - var(--i-amphtml-story-desktop-one-panel-responsive-margin) * 2);
    --i-amphtml-story-desktop-one-panel-width: calc(var(--i-amphtml-story-desktop-one-panel-height) * var(--i-amphtml-story-desktop-one-panel-ratio));
    --i-amphtml-story-desktop-one-panel-border-radius: 20px;
    --story-page-vw: calc(var(--i-amphtml-story-desktop-one-panel-width) * .01) !important;
    --story-page-vh: calc(var(--i-amphtml-story-desktop-one-panel-height) * .01) !important;
  }

  @media(max-height: 756px) {
    :root:not([data-story-supports-landscape]):not([i-amphtml-story-mobile]) {
      --i-amphtml-story-desktop-one-panel-responsive-margin: 0px;
      --i-amphtml-story-desktop-one-panel-width: calc(var(--story-100dvh) * var(--i-amphtml-story-desktop-one-panel-ratio));
      --i-amphtml-story-desktop-one-panel-border-radius: 0;
    }
  }

  @media(max-height: 538px) {
    :root:not([data-story-supports-landscape]):not([i-amphtml-story-mobile]) {
      /** If changing this, also change amp-story-player-shadow.css **/
      --i-amphtml-story-desktop-one-panel-ratio: 36 / 53;
    }
  }
  :root:not([i-amphtml-story-mobile]) amp-story:not([supports-landscape]) amp-story-page {
    width: var(--i-amphtml-story-desktop-one-panel-width) !important;
    height: var(--i-amphtml-story-desktop-one-panel-height) !important;
    border-radius: var(--i-amphtml-story-desktop-one-panel-border-radius) !important;
    margin: auto !important;
  }
}
