

.amp-video-docked-controls {
  /* Override in case of RTL so that buttons match their DOM order visually. */
  direction: ltr !important;

  opacity: 0;
  pointer-events: none !important;
  transition: 0.3s opacity ease;
  height: 120px;
}

.amp-video-docked-main-button-group {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Container is dynamically centered at corner. Offset by -50% in both axes
  to properly center. */
  margin: -20px 0 0 -60px;
}

.amp-large > .amp-video-docked-main-button-group {
  margin-left: -70px;
}

.amp-large > .amp-video-docked-main-button-group >
    .amp-video-docked-button-group {
  margin-right: 10px;
}

/* large/small breakpoints shouldn't affect this set, so we specify for both. */
.amp-large > .amp-video-docked-control-set-scroll-back,
.amp-small > .amp-video-docked-control-set-scroll-back {
  /* Container is dynamically centered at corner. Offset by -50% in horizontal
  axis to properly center (holds a single 64px wide button). */
  margin-left: -32px;
}

.amp-large > .amp-video-docked-control-set-scroll-back >
    .amp-video-docked-button-group {
  /* Reset margin since this set only holds one button. */
  margin-right: 0;
}

.amp-large > .amp-video-docked-button-dismiss-group {
  margin: 6px 0 0 -6px;
}

.amp-small > .amp-video-docked-button-dismiss-group,
.amp-small > .amp-video-docked-button-dismiss-group > div[role=button] {
  min-width: 32px;
  height: 32px;
  border-radius: 32px;
  background-size: 20px 20px;
}

.amp-small > .amp-video-docked-button-dismiss-group {
  /* docking.js will position the button based on a 40px width. Because this
     breakpoint will render the button at 32px, we set the difference as left
     margin to compensate. */
  margin-left: 8px;
}

.amp-video-docked-controls-shown {
  opacity: 1;
  pointer-events: initial !important;
}

.amp-video-docked-button-group {
  margin: 0;
}

.amp-video-docked-button-group,
.amp-video-docked-button-group > div[role=button],
.amp-video-docked-button-dismiss-group,
.amp-video-docked-button-dismiss-group > div[role=button] {
  min-width: 40px;
  height: 40px;
  border-radius: 40px;
}

.amp-video-docked-button-group:active,
.amp-video-docked-button-dismiss-group:active {
  background-color: rgba(255, 255, 255, 0.7);
}

.amp-video-docked-button-group,
.amp-video-docked-button-group > div[role=button],
.i-amphtml-video-docked-overlay,
.amp-video-docked-controls,
.amp-video-docked-button-dismiss-group >div[role=button] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

.amp-video-docked-button-group > div[role=button],
.amp-video-docked-button-dismiss-group > div[role=button] {
  background-repeat: no-repeat;
  background-position: center center;
}

.amp-video-docked-shadow {
  box-shadow: 0px 0 20px 6px rgba(0, 0, 0, 0.2);
  transition-property: transform, opacity !important;
}

.amp-video-docked-controls-bg {
  background: rgba(230, 230, 230, 0.6);
}

.amp-video-docked-mute {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}

.amp-video-docked-unmute {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}

.amp-video-docked-pause {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'><path d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}

.amp-video-docked-play {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}

.amp-video-docked-fullscreen {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
}

.amp-video-docked-dismiss {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}

.amp-video-docked-scroll-back {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-4-4h48v48H-4z'/%3E%3Cpath d='M36 0c2.2 0 4 1.8 4 4v24c0 2.2-1.8 4-4 4H12c-2.2 0-4-1.8-4-4V4c0-2.2 1.8-4 4-4h24zM16 11.868l12.618 12.618 2.829-2.828L18.789 9H27V5H12v15h4v-8.132zM4 8H0v28c0 2.2 1.8 4 4 4h28v-4H4V8z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 50%; /* 🤷🏻‍♂️ */
}

.amp-rtl .amp-video-docked-scroll-back {
  /* opposite direction of icon arrow */
  /* TODO(alanorozco): Might not be worth it to keep a horizontally asymmetrical
     icon for a simple drop shadow, consider removing drop shadow and use a
     horizontal flip CSS transform instead of another SVG definition here. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-4-4h48v48H-4z'/%3E%3Cpath d='M36 0c2.2 0 4 1.8 4 4v24c0 2.2-1.8 4-4 4H12c-2.2 0-4-1.8-4-4V4c0-2.2 1.8-4 4-4h24zM16 11.868l12.618 12.618 2.829-2.828L18.789 9H27V5H12v15h4v-8.132zM4 8H0v28c0 2.2 1.8 4 4 4h28v-4H4V8z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
}

.amp-video-docked-control-set-scroll-back > .amp-video-docked-button-group,
.amp-video-docked-control-set-scroll-back > .amp-video-docked-button-group > div[role=button] {
  min-width: 64px;
  height: 64px;
}

.amp-video-docked-shadow,
.i-amphtml-video-docked,
.i-amphtml-video-docked-overlay {
  margin: 0 !important;
}

.i-amphtml-video-docked {
  transition-property: transform !important;
}

.amp-video-docked-shadow,
.amp-video-docked-controls,
.i-amphtml-video-docked,
.i-amphtml-video-docked-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: auto !important;
  max-height: auto !important;

  /* So (x, y) coordinates can be used in transforms: */
  transform-origin: left top !important;

  will-change: width, height, transition, transform, opacity;

  /* Needs an arbitrary transition by default so browser won't glitch/jump. */
  transition: 0.05s transform;
}

.i-amphtml-video-docked-overlay {
  opacity: 0;
  transition: 0.3s opacity ease;
  contain: strict !important;
}

.amp-video-docked-controls-bg {
  opacity: 1;
}

.i-amphtml-video-docked-overlay.amp-video-docked-almost-dismissed {
  opacity: 1;
  background: rgba(100, 100, 100, 0.1);
}

.i-amphtml-video-docked.amp-video-docked-almost-dismissed,
.i-amphtml-video-docked-shadow.amp-video-docked-almost-dismissed {
  opacity: 0.3;
}

.amp-video-docked-button-dismiss-group {
  position: absolute;
  top: -40px;
}

.amp-video-docked-placeholder-background {
  background: rgba(200, 200, 200, 0.5);
  transition-property: opacity;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.amp-video-docked-placeholder-icon {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpolygon points='0 0 48 0 48 48 0 48'/%3E%3Cpath d='m40 4h-24c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h24c2.2 0 4-1.8 4-4v-24c0-2.2-1.8-4-4-4zm-32 8h-4v28c0 2.2 1.8 4 4 4h28v-4h-28v-28zm28 3.868l-12.618 12.618-2.8284-2.8284 12.658-12.658h-8.2111v-4h15v15h-4v-8.132z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
  mask-size: 48px 48px;
  height: 48px;
  width: 48px;
  mask-repeat: no-repeat;
  mask-position: bottom left;
  background: rgba(100, 100, 100, 0.8);
  transition-property: opacity, transform;
  will-change: opacity, transform;
  position: absolute;
  bottom: 40px;
  left: 40px;
}

.amp-video-docked-placeholder-icon.amp-rtl {
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M-4-4h48v48H-4z'/%3E%3Cpath d='M36 0c2.2 0 4 1.8 4 4v24c0 2.2-1.8 4-4 4H12c-2.2 0-4-1.8-4-4V4c0-2.2 1.8-4 4-4h24zM16 11.868l12.618 12.618 2.829-2.828L18.789 9H27V5H12v15h4v-8.132zM4 8H0v28c0 2.2 1.8 4 4 4h28v-4H4V8z' fill='%23000' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E");
  left: auto;
  right: 40px;
}

.amp-video-docked-placeholder-icon.amp-small {
  mask-size: 32px 32px;
  width: 32px;
  height: 32px;
  bottom: 20px;
  left: 20px;
}

.amp-video-docked-placeholder-icon.amp-rtl.amp-small {
  left: auto;
  right: 20px;
}

.amp-video-docked-placeholder-background-poster {
  background-size: cover;
  background-repeat: no-repeat;

  filter: blur(20px);

  /* Scale outwards to clip blur-bleed. */
  transform: scale(1.1);

  opacity: 0.3;
}

/*
  Z-index ordering positions all right below amp-sidebar, which has a value of
  2147483647.
  Please keep this list in descending order.
*/
.amp-video-docked-controls {
  z-index: 2147483646 !important;
}
.i-amphtml-video-docked-overlay {
  z-index: 2147483645 !important;
}
.i-amphtml-video-docked {
  z-index: 2147483644 !important;
}
.amp-video-docked-shadow {
  z-index: 2147483643 !important;
}
