


.i-amphtml-lbg-top-bar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 56px !important; /* Matches top of gallery */
  z-index: 1 !important;
  background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0));
}

@media (min-width: 1024px) {
  .i-amphtml-lbg-top-bar {
    height: 80px !important; /* Matches top of gallery */
  }
}

.i-amphtml-lbg-button {
  position: absolute !important;
  cursor: pointer !important;
  width: 24px;
  height: 24px;
  padding: 16px;
  box-sizing: content-box;
}

@media (min-width: 1024px) {
  .i-amphtml-lbg-button {
    width: 40px;
    height: 40px;
    padding: 20px;
  }
}

.i-amphtml-lbg-button::after {
  content: '' !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.i-amphtml-lbg-button[data-action="close"] {
  top: 0 !important;
  right: 0 !important;
}

.i-amphtml-lbg-button[data-action="close"]::after {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.4 6.4 L17.6 17.6 Z M17.6 6.4 L6.4 17.6 Z" stroke="#fff" stroke-width="2" stroke-linejoin="round" /></svg>');
}

.i-amphtml-lbg-button[data-action="gallery"] {
  top: 0 !important;
  left: 0 !important;
}

.i-amphtml-lbg-button[data-action="gallery"]::after {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><rect x="3" y="3" width="6" height="8" rx="1" ry="1" /><rect x="15" y="13" width="6" height="8" rx="1" ry="1" /><rect x="11" y="3" width="10" height="8" rx="1" ry="1" /><rect x="3" y="13" width="10" height="8" rx="1" ry="1" /></g></svg>');
}

.i-amphtml-lbg-button[data-action="slides"] {
  top: 0 !important;
  left: 0 !important;
  display: none;
}

.i-amphtml-lbg-button[data-action="slides"]::after {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="4" width="16" height="16" rx="1" stroke-width="2" stroke="#fff" fill="none" /><circle fill="#fff" cx="15.5" cy="8.5" r="1.5" /><polygon fill="#fff" points="5,19 5,13 8,10 13,15 16,12 19,15 19,19" /></svg>');
}

.i-amphtml-lbg-button[data-action="next"],
.i-amphtml-lbg-button[data-action="prev"] {
  top: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  filter: drop-shadow(0 0 1px black) !important;
  width: 40px;
  height: 40px;
  padding: 20px;
}

.i-amphtml-lbg-button[data-action="next"] {
  right: 0 !important;
  /* Needed for screen reader mode to size correctly. */
  left: auto !important;
}

.i-amphtml-lbg-button[data-action="next"]::after {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10,7.4 L14.6,12 L10,16.6" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}

.i-amphtml-lbg-button[data-action="prev"] {
  /* Needed for screen reader mode to size correctly. */
  right: auto !important;
  left: 0 !important;
}

.i-amphtml-lbg-button[data-action="prev"]::after {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14,7.4 L9.4,12 L14,16.6" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" /></svg>');
}

[i-amphtml-lbg-single-item] .i-amphtml-lbg-button[data-action="gallery"],
[i-amphtml-lbg-single-item] .i-amphtml-lbg-button[data-action="prev"],
[i-amphtml-lbg-single-item] .i-amphtml-lbg-button[data-action="next"] {
  visibility: hidden !important;
}

.i-amphtml-lbg[gallery-view] .i-amphtml-lbg-button[data-action="gallery"],
.i-amphtml-lbg[gallery-view] .i-amphtml-lbg-button[data-action="next"],
.i-amphtml-lbg[gallery-view] .i-amphtml-lbg-button[data-action="prev"] {
  display: none !important;
}

.i-amphtml-lbg[gallery-view] .i-amphtml-lbg-button[data-action="slides"] {
  display: block !important;
}
