/* components/media/src/scss/media.scss */
.media--type-remote-video .glightbox-link {
  position: relative;
}
.media--type-remote-video .glightbox-link::after {
  content: "";
  height: 6.25rem;
  width: 6.25rem;
  background: var(--iio-color-primary);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(./img/play-bg.svg);
  mask-image: url(./img/play-bg.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 5;
  -webkit-transition: var(--iio-transition-eased);
  transition: var(--iio-transition-eased);
}
.media--type-remote-video .glightbox-link::before {
  content: "";
  height: 1.875rem;
  width: 1.875rem;
  background: var(--iio-color-secondary);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(./img/play.svg);
  mask-image: url(./img/play.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
}
.trigger-hover:focus .media--type-remote-video .glightbox-link::after,
.trigger-hover:hover .media--type-remote-video .glightbox-link::after,
.media--type-remote-video .glightbox-link:hover::after,
.media--type-remote-video .glightbox-link:focus::after,
.media--type-remote-video .glightbox-link:active::after {
  -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1.05);
  transform: translate(-50%, -50%) rotate(360deg) scale(1.05);
  background: var(--iio-color-secondary);
}
/*# sourceMappingURL=media.css.map */