.preview-gallery {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  background: #000;
  z-index: 100;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: all var(--transition-duration) ease-in-out;
  background-color: #333333;
}

.preview-gallery.offscreen {
  opacity: 0;
  visibility: hidden;
  transition: all 200ms ease-in-out;
}

/** Frame Container
 ---------------------------------------------------------*/

.frame-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.media-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333333;
}

.media-frame > .image-view {
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
}

.media-frame > video {
  transform-origin: 0 0;
}

/** Preview Menu
 ---------------------------------------------------------*/

/**
 * 1. Sits on-top of frame-container.
 */

.preview-menu {
  position: relative;
  z-index: 1; /* 1 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility var(--transition-duration) ease-in-out,
              opacity var(--transition-duration) ease-in-out;
}

/**
 * visible
 */

.preview-menu.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/**
 * [secure-mode=true]
 *
 * 1. !important is required to over-ride
 *    strong specificty of <style scoped>
 *    inside <gaia-header>.
 *
 *    When the platform has `::content` (bug 992249)
 *    and `:host` (bug 992245) selectors, this scoped
 *    stylesheet will no longer be required and we
 *    can remove this `!important`.
 */

.preview-gallery[secure-mode=true] .preview-share-icon,
.preview-gallery[secure-mode=true] .preview-option-icon {
  display: none !important; /* 1 */
}

/** Count Text
 ---------------------------------------------------------*/

.count-text {
  position: absolute;
  bottom: 83px;
  width: 100%;
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  text-shadow:
    1px 1px 2px rgba(0,0,0,0.4),
    0 0 29px rgba(0,0,0,0.2);
  color: #FFF;
}

/** Preview Controls
 ---------------------------------------------------------*/

.preview-controls {
  position: absolute;
  display: flex;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 4.5rem;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100;
}

/**
  Overriding default styles from shared/style/headers.css
 */
section[role="region"].skin-dark > header:first-child > button:active,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active {
  background-color: rgba(0, 142, 171, 0.3);
}

section[role="region"].skin-dark > header:first-child > button,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled) {
  vertical-align: middle;
  text-align: center;
}

section[role="region"].skin-dark > header:first-child > button {
  width: 3rem;
}

section[role="region"] > header:first-child h1 {
  font-weight: normal;
  padding: 0 1rem;
}

section[role="region"].skin-dark > header:first-child,
.skin-dark > section[role="region"] > header:first-child {
   background: rgba(0, 0, 0, 0.75);
}

section[role="region"] > header:first-child > button:after,
section[role="region"] > header:first-child > a:after {
  width: 100%;
}

/**
  Button icon styles
 */

/**
 * 1. !important required to override
 *    specificity of scoped stylesheet.
 */

.preview-menu button {
  font-size: 3.0rem !important; /* 1 */
  text-align: center;
  text-shadow: none;
}

/**
 * 1. Allow flexbox to vertically center.
 */

.preview-menu button:before {
  display: block; /* 1 */
}

/**
 * Ensure nothing but the action-menu is visible when it's open, otherwise the
 * screen reader will have access to it.
 */
.preview-gallery.action-menu .preview-menu,
.preview-gallery.action-menu .count-text,
.preview-gallery.action-menu .frame-container {
  visibility: hidden;
}