@smartimpact-it/modern-video-embed 2.0.5 → 2.0.7

package/dist/css/components.css

@@ -1,42 +1,45 @@
 /**
-* SVG encoding functions
-*/
+ * YouTube Embed Component Styles
+ * Uses shared base styles with YouTube-specific branding
+ */
+/**
+ * Base styles and mixins for all video embed components
+ * Provides reusable CSS patterns to reduce duplication
+ */
+/**
+ * Shared SCSS functions for SVG encoding
+ * Used by all video embed components
+ */
 youtube-embed {
-  --video-aspect-ratio: 56.25%;
-  --poster-object-fit: cover;
-  --video-object-fit: contain;
-  --control-button-size: 70px;
-  --control-button-color: #ffffff;
-  --overlay-background-color: rgba(0, 0, 0, 0.5);
+  --si-embed-video-aspect-ratio: 56.25%;
+  --si-embed-aspect-width: 16;
+  --si-embed-aspect-height: 9;
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
   display: block;
   position: relative;
   width: 100%;
-  padding-top: var(--video-aspect-ratio);
+  padding-top: var(--si-embed-video-aspect-ratio);
   overflow: hidden;
   background-color: #000;
 }
-youtube-embed iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-  object-fit: var(--video-object-fit);
-}
+youtube-embed .video-poster,
 youtube-embed .youtube-poster,
-youtube-embed .video-poster {
+youtube-embed .vimeo-poster {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: var(--poster-object-fit);
+  object-fit: var(--si-embed-poster-object-fit);
   display: block;
   cursor: pointer;
 }
 youtube-embed .button-overlay {
-  background: var(--overlay-background-color);
+  background: var(--si-embed-overlay-background-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -53,17 +56,19 @@ youtube-embed .button-overlay {
 }
 youtube-embed.is-playing .button-overlay {
   opacity: 0;
+  pointer-events: none;
 }
 youtube-embed.is-playing:hover .button-overlay {
   opacity: 1;
+  pointer-events: auto;
 }
 youtube-embed .button-overlay .button {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--control-button-size);
-  width: var(--control-button-size);
+  height: var(--si-embed-control-button-size);
+  width: var(--si-embed-control-button-size);
   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
   background-size: cover;
   background-repeat: no-repeat;
@@ -88,17 +93,11 @@ youtube-embed.is-background iframe {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  min-width: 100%;
-  min-height: 100%;
+  aspect-ratio: var(--si-embed-aspect-width)/var(--si-embed-aspect-height);
   width: auto;
   height: auto;
-}
-@supports (aspect-ratio: 16/9) {
-  youtube-embed.is-background iframe {
-    aspect-ratio: 16/9;
-  }
-}
-youtube-embed.is-background iframe {
+  min-width: 100%;
+  min-height: 100%;
   pointer-events: none;
 }
 youtube-embed.is-background .button-overlay {
@@ -112,7 +111,7 @@ youtube-embed.has-background-controls .button-overlay {
   padding: 1rem;
 }
 youtube-embed.has-background-controls .button-overlay .button {
-  --control-button-size: 40px;
+  --si-embed-control-button-size: 40px;
   opacity: 0.7;
   transition: opacity 0.2s ease;
 }
@@ -144,7 +143,7 @@ youtube-embed .youtube-error-message .error-content {
   max-width: 400px;
 }
 youtube-embed .youtube-error-message .error-content svg {
-  color: #ff4444;
+  color: #ff0000;
   margin-bottom: 1rem;
 }
 youtube-embed .youtube-error-message .error-content .error-message {
@@ -171,46 +170,50 @@ youtube-embed .youtube-error-message .error-content .retry-button:focus {
   outline: 2px solid white;
   outline-offset: 2px;
 }
+youtube-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  object-fit: var(--si-embed-video-object-fit);
+}
 
 /**
-* SVG encoding functions (shared with YouTube embed)
-*/
+ * Vimeo Embed Component Styles
+ * Uses shared base styles with Vimeo-specific branding
+ */
 vimeo-embed {
-  --video-aspect-ratio: 56.25%;
-  --poster-object-fit: cover;
-  --video-object-fit: contain;
-  --control-button-size: 70px;
-  --control-button-color: #ffffff;
-  --overlay-background-color: rgba(0, 0, 0, 0.5);
+  --si-embed-video-aspect-ratio: 56.25%;
+  --si-embed-aspect-width: 16;
+  --si-embed-aspect-height: 9;
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
   display: block;
   position: relative;
   width: 100%;
-  padding-top: var(--video-aspect-ratio);
+  padding-top: var(--si-embed-video-aspect-ratio);
   overflow: hidden;
   background-color: #000;
 }
-vimeo-embed iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-  object-fit: var(--video-object-fit);
-}
-vimeo-embed .vimeo-poster,
-vimeo-embed .video-poster {
+vimeo-embed .video-poster,
+vimeo-embed .youtube-poster,
+vimeo-embed .vimeo-poster {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: var(--poster-object-fit);
+  object-fit: var(--si-embed-poster-object-fit);
   display: block;
   cursor: pointer;
 }
 vimeo-embed .button-overlay {
-  background: var(--overlay-background-color);
+  background: var(--si-embed-overlay-background-color);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -227,17 +230,19 @@ vimeo-embed .button-overlay {
 }
 vimeo-embed.is-playing .button-overlay {
   opacity: 0;
+  pointer-events: none;
 }
 vimeo-embed.is-playing:hover .button-overlay {
   opacity: 1;
+  pointer-events: auto;
 }
 vimeo-embed .button-overlay .button {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--control-button-size);
-  width: var(--control-button-size);
+  height: var(--si-embed-control-button-size);
+  width: var(--si-embed-control-button-size);
   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
   background-size: cover;
   background-repeat: no-repeat;
@@ -262,17 +267,11 @@ vimeo-embed.is-background iframe {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  min-width: 100%;
-  min-height: 100%;
+  aspect-ratio: var(--si-embed-aspect-width)/var(--si-embed-aspect-height);
   width: auto;
   height: auto;
-}
-@supports (aspect-ratio: 16/9) {
-  vimeo-embed.is-background iframe {
-    aspect-ratio: 16/9;
-  }
-}
-vimeo-embed.is-background iframe {
+  min-width: 100%;
+  min-height: 100%;
   pointer-events: none;
 }
 vimeo-embed.is-background .button-overlay {
@@ -286,7 +285,7 @@ vimeo-embed.has-background-controls .button-overlay {
   padding: 1rem;
 }
 vimeo-embed.has-background-controls .button-overlay .button {
-  --control-button-size: 40px;
+  --si-embed-control-button-size: 40px;
   opacity: 0.7;
   transition: opacity 0.2s ease;
 }
@@ -345,5 +344,223 @@ vimeo-embed .vimeo-error-message .error-content .retry-button:focus {
   outline: 2px solid white;
   outline-offset: 2px;
 }
+vimeo-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  object-fit: var(--si-embed-video-object-fit);
+}
+
+/**
+ * Video Embed Component Styles
+ * Uses shared base styles with video-specific overrides
+ */
+video-embed {
+  --si-embed-video-aspect-ratio: 56.25%;
+  --si-embed-aspect-width: 16;
+  --si-embed-aspect-height: 9;
+  --si-embed-poster-object-fit: cover;
+  --si-embed-video-object-fit: contain;
+  --si-embed-control-button-size: 70px;
+  --si-embed-control-button-color: #ffffff;
+  --si-embed-overlay-background-color: rgba(0, 0, 0, 0.5);
+  display: block;
+  position: relative;
+  width: 100%;
+  padding-top: var(--si-embed-video-aspect-ratio);
+  overflow: hidden;
+  background-color: #000;
+}
+video-embed .video-poster,
+video-embed .youtube-poster,
+video-embed .vimeo-poster {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--si-embed-poster-object-fit);
+  display: block;
+  cursor: pointer;
+}
+video-embed .button-overlay {
+  background: var(--si-embed-overlay-background-color);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+  transition: opacity 0.3s ease;
+  z-index: 10;
+}
+video-embed.is-playing .button-overlay {
+  opacity: 0;
+  pointer-events: none;
+}
+video-embed.is-playing:hover .button-overlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+video-embed .button-overlay .button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--si-embed-control-button-size);
+  width: var(--si-embed-control-button-size);
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+video-embed.is-playing .button-overlay .button {
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E");
+}
+video-embed.is-background {
+  padding-top: 0;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  overflow: hidden;
+  background: #000;
+}
+video-embed.is-background video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: calc(100% * var(--si-embed-aspect-height) / var(--si-embed-aspect-width));
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+video-embed.is-background video::-webkit-media-controls {
+  display: none !important;
+}
+video-embed.is-background video::-webkit-media-controls-enclosure {
+  display: none !important;
+}
+video-embed.is-background .button-overlay {
+  display: none;
+}
+video-embed.has-background-controls .button-overlay {
+  display: flex;
+  background: none;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 1rem;
+}
+video-embed.has-background-controls .button-overlay .button {
+  --si-embed-control-button-size: 40px;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+video-embed.has-background-controls .button-overlay .button:hover {
+  opacity: 1;
+}
+video-embed.has-background-controls.is-playing .button-overlay {
+  opacity: 0;
+}
+video-embed.has-background-controls.is-playing .button-overlay:hover {
+  opacity: 1;
+}
+video-embed .video-error-message {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  z-index: 1000;
+}
+video-embed .video-error-message .error-content {
+  text-align: center;
+  padding: 2rem;
+  max-width: 400px;
+}
+video-embed .video-error-message .error-content svg {
+  color: #ff4444;
+  margin-bottom: 1rem;
+}
+video-embed .video-error-message .error-content .error-message {
+  margin: 1rem 0;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+video-embed .video-error-message .error-content .retry-button {
+  margin-top: 1rem;
+  padding: 0.75rem 1.5rem;
+  background: #ff4444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: background 0.2s ease;
+}
+video-embed .video-error-message .error-content .retry-button:hover {
+  background: #cc0000;
+}
+video-embed .video-error-message .error-content .retry-button:focus {
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+video-embed video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  object-fit: var(--si-embed-video-object-fit);
+}
+video-embed video::-webkit-media-controls {
+  display: none !important;
+}
+video-embed video::-webkit-media-controls-enclosure {
+  display: none !important;
+}
+video-embed[controls] video::-webkit-media-controls {
+  display: flex !important;
+}
+video-embed[controls] video::-webkit-media-controls-enclosure {
+  display: flex !important;
+}
+video-embed .video-poster {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+video-embed.is-fullscreen {
+  padding-top: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+}
+video-embed.is-fullscreen video {
+  object-fit: contain;
+}
 
 /*# sourceMappingURL=components.css.map */

package/dist/css/components.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/styles/youtube-embed.scss","../../src/styles/vimeo-embed.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAqDA;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;;AAGA;EAdF;IAeI;;;AAfJ;EAoBE;;AAGF;EACE;;AAIF;EACE;EACA;EAEA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AACA;EACE;;AAMN;EACE;;AACA;EACE;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC/PV;AAAA;AAAA;AAqDA;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EAXF;IAYI;;;AAZJ;EAeE;;AAGF;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAMN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA","file":"components.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/styles/youtube-embed.scss","../../src/styles/_embed-base.scss","../../src/styles/_shared-functions.scss","../../src/styles/vimeo-embed.scss","../../src/styles/video-embed.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AFMA;ECIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;EAEA;EAGA;EACA;EAEA;EACA;EACA;;AA4BJ;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,ODtN0C;ECuN1C;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YDnO0C;ECoO1C;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YD7OiD;;ACgPnD;EACE;EACA;;AD/OR;ECqBA;EACA;EACA;EACA;EACA;EACA;EACA;;;AEtCF;AAAA;AAAA;AAAA;AAMA;EFIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;EAEA;EAGA;EACA;EAEA;EACA;EACA;;AA4BJ;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,OEtNwC;EFuNxC;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YEnOwC;EFoOxC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YE7O+C;;AFgPjD;EACE;EACA;;AE/OR;EFqBA;EACA;EACA;EACA;EACA;EACA;EACA;;;AGtCF;AAAA;AAAA;AAAA;AAMA;EHIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;EACA;;AAgBA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAGF;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAoBE;EACE;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;;AAGA;EACE;;AAEF;EACE;;AAKN;EACE;;AAMF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAKN;EACE;;AACA;EACE;;AAYN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE,OGtNuC;EHuNvC;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA,YGnOuC;EHoOvC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YG7O8C;;AHgPhD;EACE;EACA;;AG/OR;EHqBA;EACA;EACA;EACA;EACA;EACA;EACA;;AGvBE;EACE;;AAEF;EACE;;AAMF;EACE;;AAEF;EACE;;AAKJ;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"components.css"}

package/dist/css/components.min.css

@@ -1 +1 @@
-vimeo-embed,youtube-embed{--video-aspect-ratio:56.25%;--poster-object-fit:cover;--video-object-fit:contain;--control-button-size:70px;--control-button-color:#ffffff;--overlay-background-color:rgba(0, 0, 0, 0.5);display:block;position:relative;width:100%;padding-top:var(--video-aspect-ratio);overflow:hidden;background-color:#000}vimeo-embed iframe,youtube-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;object-fit:var(--video-object-fit)}youtube-embed .video-poster,youtube-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--poster-object-fit);display:block;cursor:pointer}youtube-embed .button-overlay,youtube-embed .youtube-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}youtube-embed .button-overlay{background:var(--overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}youtube-embed.is-playing .button-overlay{opacity:0}youtube-embed.has-background-controls .button-overlay .button:hover,youtube-embed.has-background-controls.is-playing .button-overlay:hover,youtube-embed.is-playing:hover .button-overlay{opacity:1}youtube-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--control-button-size);width:var(--control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}youtube-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}vimeo-embed.is-background,youtube-embed.is-background{padding-top:0;position:absolute;height:100%;width:100%;top:0;left:0;z-index:0;overflow:hidden;background:#000}youtube-embed.is-background iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto}@supports (aspect-ratio:16/9){youtube-embed.is-background iframe{aspect-ratio:16/9}}youtube-embed.is-background iframe{pointer-events:none}youtube-embed.is-background .button-overlay{display:none}youtube-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}youtube-embed.has-background-controls .button-overlay .button{--control-button-size:40px;opacity:.7;transition:opacity .2s ease}youtube-embed.has-background-controls.is-playing .button-overlay{opacity:0}youtube-embed .youtube-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}youtube-embed .youtube-error-message .error-content{text-align:center;padding:2rem;max-width:400px}youtube-embed .youtube-error-message .error-content svg{color:#f44;margin-bottom:1rem}youtube-embed .youtube-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}youtube-embed .youtube-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:red;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}youtube-embed .youtube-error-message .error-content .retry-button:hover{background:#c00}youtube-embed .youtube-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}vimeo-embed .video-poster,vimeo-embed .vimeo-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--poster-object-fit);display:block;cursor:pointer}vimeo-embed .button-overlay,vimeo-embed .vimeo-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}vimeo-embed .button-overlay{background:var(--overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}vimeo-embed.is-playing .button-overlay{opacity:0}vimeo-embed.has-background-controls .button-overlay .button:hover,vimeo-embed.has-background-controls.is-playing .button-overlay:hover,vimeo-embed.is-playing:hover .button-overlay{opacity:1}vimeo-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--control-button-size);width:var(--control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}vimeo-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}vimeo-embed.is-background iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto}@supports (aspect-ratio:16/9){vimeo-embed.is-background iframe{aspect-ratio:16/9}}vimeo-embed.is-background iframe{pointer-events:none}vimeo-embed.is-background .button-overlay{display:none}vimeo-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}vimeo-embed.has-background-controls .button-overlay .button{--control-button-size:40px;opacity:.7;transition:opacity .2s ease}vimeo-embed.has-background-controls.is-playing .button-overlay{opacity:0}vimeo-embed .vimeo-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}vimeo-embed .vimeo-error-message .error-content{text-align:center;padding:2rem;max-width:400px}vimeo-embed .vimeo-error-message .error-content svg{color:#00adef;margin-bottom:1rem}vimeo-embed .vimeo-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}vimeo-embed .vimeo-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:#00adef;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}vimeo-embed .vimeo-error-message .error-content .retry-button:hover{background:#0088bf}vimeo-embed .vimeo-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}
+video-embed,vimeo-embed,youtube-embed{--si-embed-video-aspect-ratio:56.25%;--si-embed-aspect-width:16;--si-embed-aspect-height:9;--si-embed-poster-object-fit:cover;--si-embed-video-object-fit:contain;--si-embed-control-button-size:70px;--si-embed-control-button-color:#ffffff;--si-embed-overlay-background-color:rgba(0, 0, 0, 0.5);display:block;position:relative;width:100%;padding-top:var(--si-embed-video-aspect-ratio);overflow:hidden;background-color:#000}youtube-embed .video-poster,youtube-embed .vimeo-poster,youtube-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--si-embed-poster-object-fit);display:block;cursor:pointer}youtube-embed .button-overlay,youtube-embed .youtube-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}youtube-embed .button-overlay{background:var(--si-embed-overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}youtube-embed.is-playing .button-overlay{opacity:0;pointer-events:none}youtube-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}youtube-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--si-embed-control-button-size);width:var(--si-embed-control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}youtube-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}video-embed.is-background,vimeo-embed.is-background,youtube-embed.is-background{padding-top:0;position:absolute;height:100%;width:100%;top:0;left:0;z-index:0;overflow:hidden;background:#000}vimeo-embed.is-background iframe,youtube-embed.is-background iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);aspect-ratio:var(--si-embed-aspect-width)/var(--si-embed-aspect-height);width:auto;height:auto;min-width:100%;min-height:100%;pointer-events:none}youtube-embed.is-background .button-overlay{display:none}youtube-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}youtube-embed.has-background-controls .button-overlay .button{--si-embed-control-button-size:40px;opacity:.7;transition:opacity .2s ease}youtube-embed.has-background-controls .button-overlay .button:hover,youtube-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}youtube-embed.has-background-controls.is-playing .button-overlay{opacity:0}youtube-embed .youtube-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}youtube-embed .youtube-error-message .error-content{text-align:center;padding:2rem;max-width:400px}youtube-embed .youtube-error-message .error-content svg{color:red;margin-bottom:1rem}youtube-embed .youtube-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}youtube-embed .youtube-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:red;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}youtube-embed .youtube-error-message .error-content .retry-button:hover{background:#c00}youtube-embed .youtube-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed video,vimeo-embed iframe,youtube-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;object-fit:var(--si-embed-video-object-fit)}vimeo-embed .video-poster,vimeo-embed .vimeo-poster,vimeo-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--si-embed-poster-object-fit);display:block;cursor:pointer}vimeo-embed .button-overlay,vimeo-embed .vimeo-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}vimeo-embed .button-overlay{background:var(--si-embed-overlay-background-color);cursor:pointer;right:0;bottom:0;transition:opacity .3s ease;z-index:10}vimeo-embed.is-playing .button-overlay{opacity:0;pointer-events:none}vimeo-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}vimeo-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center;height:var(--si-embed-control-button-size);width:var(--si-embed-control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}vimeo-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}vimeo-embed.is-background .button-overlay{display:none}vimeo-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}vimeo-embed.has-background-controls .button-overlay .button{--si-embed-control-button-size:40px;opacity:.7;transition:opacity .2s ease}vimeo-embed.has-background-controls .button-overlay .button:hover,vimeo-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}vimeo-embed.has-background-controls.is-playing .button-overlay{opacity:0}vimeo-embed .vimeo-error-message{background:rgba(0,0,0,.9);color:#fff;z-index:1000}vimeo-embed .vimeo-error-message .error-content{text-align:center;padding:2rem;max-width:400px}vimeo-embed .vimeo-error-message .error-content svg{color:#00adef;margin-bottom:1rem}vimeo-embed .vimeo-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}vimeo-embed .vimeo-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:#00adef;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}vimeo-embed .vimeo-error-message .error-content .retry-button:hover{background:#0088bf}vimeo-embed .vimeo-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed .video-poster,video-embed .vimeo-poster,video-embed .youtube-poster{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:var(--si-embed-poster-object-fit);display:block;cursor:pointer}video-embed .button-overlay{background:var(--si-embed-overlay-background-color);position:absolute;left:0;top:0;right:0;bottom:0;height:100%;width:100%;transition:opacity .3s ease;z-index:10}video-embed.is-playing .button-overlay{opacity:0;pointer-events:none}video-embed.is-playing:hover .button-overlay{opacity:1;pointer-events:auto}video-embed .button-overlay,video-embed .button-overlay .button{cursor:pointer;display:flex;align-items:center;justify-content:center}video-embed .button-overlay .button{height:var(--si-embed-control-button-size);width:var(--si-embed-control-button-size);background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M8%2C5.14V19.14L19%2C12.14L8%2C5.14Z%22%20%2F%3E%3C%2Fsvg%3E);background-size:cover;background-repeat:no-repeat;background-position:center}video-embed.is-playing .button-overlay .button{background-image:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M14%2C19H18V5H14M6%2C19H10V5H6V19Z%22%20%2F%3E%3C%2Fsvg%3E)}video-embed.is-background video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:calc(100%*var(--si-embed-aspect-height)/var(--si-embed-aspect-width));min-width:100%;min-height:100%;object-fit:cover;pointer-events:none}video-embed video::-webkit-media-controls,video-embed.is-background video::-webkit-media-controls{display:none!important}video-embed video::-webkit-media-controls-enclosure,video-embed.is-background video::-webkit-media-controls-enclosure{display:none!important}video-embed.is-background .button-overlay{display:none}video-embed.has-background-controls .button-overlay{display:flex;background:0 0;justify-content:flex-end;align-items:flex-end;padding:1rem}video-embed.has-background-controls .button-overlay .button{--si-embed-control-button-size:40px;opacity:.7;transition:opacity .2s ease}video-embed.has-background-controls .button-overlay .button:hover,video-embed.has-background-controls.is-playing .button-overlay:hover{opacity:1}video-embed.has-background-controls.is-playing .button-overlay{opacity:0}video-embed .video-error-message{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);color:#fff;z-index:1000}video-embed .video-error-message .error-content{text-align:center;padding:2rem;max-width:400px}video-embed .video-error-message .error-content svg{color:#f44;margin-bottom:1rem}video-embed .video-error-message .error-content .error-message{margin:1rem 0;font-size:1rem;line-height:1.5}video-embed .video-error-message .error-content .retry-button{margin-top:1rem;padding:.75rem 1.5rem;background:#f44;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:600;transition:background .2s ease}video-embed .video-error-message .error-content .retry-button:hover{background:#c00}video-embed .video-error-message .error-content .retry-button:focus{outline:2px solid #fff;outline-offset:2px}video-embed[controls] video::-webkit-media-controls{display:flex!important}video-embed[controls] video::-webkit-media-controls-enclosure{display:flex!important}video-embed .video-poster{background-size:cover;background-position:center;background-repeat:no-repeat}video-embed.is-fullscreen{padding-top:0;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}video-embed.is-fullscreen video{object-fit:contain}