@retoo/scena 0.0.1

package/dist/scena.css

@@ -0,0 +1,761 @@
+.rs {
+  --rs-container-offset-x: 24px;
+  --rs-container-offset-y: 24px;
+  --rs-container-z-index: 10;
+  --rs-video-container-size-xs: 156px;
+  --rs-video-container-size-sm: 192px;
+  --rs-video-container-size-md: 352px;
+  --rs-video-container-size-lg: 448px;
+  --rs-video-container-size-xl: 544px;
+  --rs-video-container-size-xxl: 640px;
+  --rs-video-container-background: white;
+  --rs-video-container-border: none;
+  --rs-video-container-border-radius: 8px;
+  --rs-video-container-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  --rs-video-container-transition: all 0.3s ease-in-out;
+  --rs-video-container-overflow: hidden;
+  --rs-video-border-radius: 8px;
+  --rs-video-loader-size-xs: 24px;
+  --rs-video-loader-size-sm: 32px;
+  --rs-video-loader-size-md: 48px;
+  --rs-video-loader-size-lg: 64px;
+  --rs-video-loader-size-xl: 80px;
+  --rs-video-loader-size-xxl: 96px;
+  --rs-video-loader-fill: white;
+  --rs-video-loader-animation: 0.75s infinite linear;
+  --rs-video-progress-track-color: rgba(255, 255, 255, 0.2);
+  --rs-video-progress-buffer-color: rgba(255, 255, 255, 0.4);
+  --rs-video-progress-progress-color: rgb(255, 255, 255);
+  --rs-video-progress-border-radius: 0;
+  --rs-video-controls-drop-shadow: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
+  --rs-video-controls-transition: all 0.3s ease;
+  --rs-video-controls-scale: 1.1;
+  --rs-video-controls-z-index: 20;
+  --rs-video-volume-drop-shadow: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
+  --rs-video-volume-transition: all 0.3s ease;
+  --rs-video-volume-scale: 1.1;
+  --rs-video-volume-z-index: 20;
+  --rs-button-size-xs: 32px;
+  --rs-button-size-sm: 36px;
+  --rs-button-size-md: 44px;
+  --rs-button-size-lg: 50px;
+  --rs-button-size-xl: 56px;
+  --rs-button-size-xxl: 58px;
+  --rs-button-font-size-xs: 10px;
+  --rs-button-font-size-sm: 12px;
+  --rs-button-font-size-md: 13px;
+  --rs-button-font-size-lg: 14px;
+  --rs-button-font-size-xl: 16px;
+  --rs-button-font-size-xxl: 18px;
+  --rs-button-padding-xs: 0px 8px;
+  --rs-button-padding-sm: 0px 12px;
+  --rs-button-padding-md: 0px 18px;
+  --rs-button-padding-lg: 0px 24px;
+  --rs-button-padding-xl: 0px 32px;
+  --rs-button-padding-xxl: 0px 36px;
+  --rs-button-gap-xs: 4px;
+  --rs-button-gap-sm: 6px;
+  --rs-button-gap-md: 8px;
+  --rs-button-gap-lg: 10px;
+  --rs-button-gap-xl: 12px;
+  --rs-button-gap-xxl: 14px;
+  --rs-button-color: rgb(255, 255, 255);
+  --rs-button-background: rgb(0, 0, 0);
+  --rs-button-background-hover: rgb(25, 25, 25);
+  --rs-button-border: none;
+  --rs-button-border-radius: 4px;
+  --rs-button-transition: all 0.3s ease;
+  --rs-close-button-size-xs: 18px;
+  --rs-close-button-size-sm: 22px;
+  --rs-close-button-size-md: 24px;
+  --rs-close-button-size-lg: 28px;
+  --rs-close-button-size-xl: 32px;
+  --rs-close-button-size-xxl: 34px;
+  --rs-close-button-icon-size-xs: 14px;
+  --rs-close-button-icon-size-sm: 16px;
+  --rs-close-button-icon-size-md: 18px;
+  --rs-close-button-icon-size-lg: 20px;
+  --rs-close-button-icon-size-xl: 22px;
+  --rs-close-button-icon-size-xxl: 24px;
+  --rs-close-button-color: rgb(255, 255, 255);
+  --rs-close-button-background: rgb(0, 0, 0);
+  --rs-close-button-background-hover: color-mix(in srgb, rgb(0, 0, 0) 80%, transparent);
+  --rs-close-button-background-pressed: color-mix(in srgb, rgb(0, 0, 0) 60%, transparent);
+  --rs-close-button-border-radius: 100%;
+  --rs-close-button-transition: all 0.3s ease;
+  --rs-close-button-z-index: 20;
+  --rs-cta-button-color: rgb(255, 255, 255);
+  --rs-cta-button-background: rgb(0, 0, 0);
+  --rs-cta-button-background-hover: color-mix(in srgb, rgb(0, 0, 0) 80%, transparent);
+  --rs-cta-button-background-pressed: color-mix(in srgb, rgb(0, 0, 0) 60%, transparent);
+  --rs-cta-button-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+  --rs-cta-button-transition: all 0.3s ease;
+  --rs-cta-button-z-index: 20;
+  --rs-icon-size-xs: 22px;
+  --rs-icon-size-sm: 24px;
+  --rs-icon-size-md: 28px;
+  --rs-icon-size-lg: 32px;
+  --rs-icon-size-xl: 36px;
+  --rs-icon-size-xxl: 40px;
+  --rs-icon-color: rgb(255, 255, 255);
+}
+
+.rs-pop-in {
+  animation: pop-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+  transform-origin: center center;
+}
+
+@keyframes pop-in {
+  0% {
+    opacity: 0;
+    scale: 0.5;
+  }
+  40% {
+    opacity: 1;
+    scale: 1.1;
+  }
+  100% {
+    opacity: 1;
+    scale: 1;
+  }
+}
+.rs-pop-out {
+  animation: pop-out 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+  transform-origin: center center;
+}
+
+@keyframes pop-out {
+  0% {
+    opacity: 1;
+    scale: 1;
+  }
+  20% {
+    opacity: 1;
+    scale: 1.1;
+  }
+  100% {
+    opacity: 0;
+    scale: 0.9;
+  }
+}
+.rs-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--rs-button-color);
+  border: var(--rs-button-border);
+  border-radius: var(--rs-button-border-radius);
+  transition: var(--rs-button-transition);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.rs-button--filled {
+  background: var(--rs-button-background);
+}
+.rs-button--filled:hover {
+  background: var(--rs-button-background-hover);
+}
+.rs-button--text {
+  background: transparent;
+}
+.rs-button--rectangle {
+  max-width: 100%;
+  width: -moz-max-content;
+  width: max-content;
+}
+.rs-button--circle {
+  border-radius: 100%;
+}
+.rs-button.rs-button--xs.rs-button--rectangle {
+  height: var(--rs-button-size-xs);
+}
+.rs-button.rs-button--xs.rs-button--circle, .rs-button.rs-button--xs.rs-button--square {
+  width: var(--rs-button-size-xs);
+  height: var(--rs-button-size-xs);
+}
+.rs-button.rs-button--sm.rs-button--rectangle {
+  height: var(--rs-button-size-sm);
+}
+.rs-button.rs-button--sm.rs-button--circle, .rs-button.rs-button--sm.rs-button--square {
+  width: var(--rs-button-size-sm);
+  height: var(--rs-button-size-sm);
+}
+.rs-button.rs-button--md.rs-button--rectangle {
+  height: var(--rs-button-size-md);
+}
+.rs-button.rs-button--md.rs-button--circle, .rs-button.rs-button--md.rs-button--square {
+  width: var(--rs-button-size-md);
+  height: var(--rs-button-size-md);
+}
+.rs-button.rs-button--lg.rs-button--rectangle {
+  height: var(--rs-button-size-lg);
+}
+.rs-button.rs-button--lg.rs-button--circle, .rs-button.rs-button--lg.rs-button--square {
+  width: var(--rs-button-size-lg);
+  height: var(--rs-button-size-lg);
+}
+.rs-button.rs-button--xl.rs-button--rectangle {
+  height: var(--rs-button-size-xl);
+}
+.rs-button.rs-button--xl.rs-button--circle, .rs-button.rs-button--xl.rs-button--square {
+  width: var(--rs-button-size-xl);
+  height: var(--rs-button-size-xl);
+}
+.rs-button.rs-button--xxl.rs-button--rectangle {
+  height: var(--rs-button-size-xxl);
+}
+.rs-button.rs-button--xxl.rs-button--circle, .rs-button.rs-button--xxl.rs-button--square {
+  width: var(--rs-button-size-xxl);
+  height: var(--rs-button-size-xxl);
+}
+.rs-button.rs-button--xs.rs-button--rectangle {
+  font-size: var(--rs-button-font-size-xs);
+}
+.rs-button.rs-button--sm.rs-button--rectangle {
+  font-size: var(--rs-button-font-size-sm);
+}
+.rs-button.rs-button--md.rs-button--rectangle {
+  font-size: var(--rs-button-font-size-md);
+}
+.rs-button.rs-button--lg.rs-button--rectangle {
+  font-size: var(--rs-button-font-size-lg);
+}
+.rs-button.rs-button--xl.rs-button--rectangle {
+  font-size: var(--rs-button-font-size-xl);
+}
+.rs-button.rs-button--xxl.rs-button--rectangle {
+  font-size: var(--rs-button-font-size-xxl);
+}
+.rs-button.rs-button--xs.rs-button--rectangle {
+  padding: var(--rs-button-padding-xs);
+}
+.rs-button.rs-button--sm.rs-button--rectangle {
+  padding: var(--rs-button-padding-sm);
+}
+.rs-button.rs-button--md.rs-button--rectangle {
+  padding: var(--rs-button-padding-md);
+}
+.rs-button.rs-button--lg.rs-button--rectangle {
+  padding: var(--rs-button-padding-lg);
+}
+.rs-button.rs-button--xl.rs-button--rectangle {
+  padding: var(--rs-button-padding-xl);
+}
+.rs-button.rs-button--xxl.rs-button--rectangle {
+  padding: var(--rs-button-padding-xxl);
+}
+.rs-button.rs-button--xs {
+  gap: var(--rs-button-gap-xs);
+}
+.rs-button.rs-button--sm {
+  gap: var(--rs-button-gap-sm);
+}
+.rs-button.rs-button--md {
+  gap: var(--rs-button-gap-md);
+}
+.rs-button.rs-button--lg {
+  gap: var(--rs-button-gap-lg);
+}
+.rs-button.rs-button--xl {
+  gap: var(--rs-button-gap-xl);
+}
+.rs-button.rs-button--xxl {
+  gap: var(--rs-button-gap-xxl);
+}
+
+.rs-icon {
+  color: var(--rs-icon-color);
+}
+.rs-icon.rs-icon--xs {
+  width: var(--rs-icon-size-xs);
+  height: var(--rs-icon-size-xs);
+}
+.rs-icon.rs-icon--sm {
+  width: var(--rs-icon-size-sm);
+  height: var(--rs-icon-size-sm);
+}
+.rs-icon.rs-icon--md {
+  width: var(--rs-icon-size-md);
+  height: var(--rs-icon-size-md);
+}
+.rs-icon.rs-icon--lg {
+  width: var(--rs-icon-size-lg);
+  height: var(--rs-icon-size-lg);
+}
+.rs-icon.rs-icon--xl {
+  width: var(--rs-icon-size-xl);
+  height: var(--rs-icon-size-xl);
+}
+.rs-icon.rs-icon--xxl {
+  width: var(--rs-icon-size-xxl);
+  height: var(--rs-icon-size-xxl);
+}
+
+.rs-loader {
+  fill: var(--rs-video-loader-fill);
+  animation: spinner var(--rs-video-loader-animation);
+  transform-origin: center;
+}
+.rs-loader.rs-loader--xs {
+  width: var(--rs-video-loader-size-xs);
+  height: var(--rs-video-loader-size-xs);
+}
+.rs-loader.rs-loader--sm {
+  width: var(--rs-video-loader-size-sm);
+  height: var(--rs-video-loader-size-sm);
+}
+.rs-loader.rs-loader--md {
+  width: var(--rs-video-loader-size-md);
+  height: var(--rs-video-loader-size-md);
+}
+.rs-loader.rs-loader--lg {
+  width: var(--rs-video-loader-size-lg);
+  height: var(--rs-video-loader-size-lg);
+}
+.rs-loader.rs-loader--xl {
+  width: var(--rs-video-loader-size-xl);
+  height: var(--rs-video-loader-size-xl);
+}
+.rs-loader.rs-loader--xxl {
+  width: var(--rs-video-loader-size-xxl);
+  height: var(--rs-video-loader-size-xxl);
+}
+
+@keyframes spinner {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.rs-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+  z-index: 10;
+}
+.rs-progress:focus {
+  outline: none;
+}
+.rs-progress .rs-progress__track {
+  position: relative;
+  width: 100%;
+  background: var(--rs-video-progress-track-color);
+  overflow: hidden;
+  cursor: pointer;
+}
+.rs-progress .rs-progress__buffer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--rs-video-progress-buffer-color);
+  border-radius: var(--rs-video-progress-border-radius);
+  cursor: pointer;
+  z-index: 11;
+}
+.rs-progress .rs-progress__progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--rs-video-progress-progress-color);
+  border-radius: var(--rs-video-progress-border-radius);
+  cursor: pointer;
+  z-index: 12;
+}
+
+.rs-progress--line {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  touch-action: none;
+}
+.rs-progress--line .rs-progress__track {
+  transition: height 0.3s linear;
+}
+.rs-progress--line .rs-progress__buffer {
+  transition: width 0.1s linear;
+  overflow: hidden;
+}
+.rs-progress--line .rs-progress__progress {
+  transition: width 0.1s linear;
+  overflow: hidden;
+}
+
+.rs-progress--circle {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  touch-action: none;
+}
+.rs-progress--circle .rs-progress__progress {
+  pointer-events: none;
+}
+.rs-progress--circle .rs-progress__buffer {
+  pointer-events: none;
+}
+.rs-progress--circle .rs-progress__hit-area {
+  cursor: pointer;
+}
+.rs-progress--circle circle {
+  transition: cx 0.3s ease-in-out, cy 0.3s ease-in-out, r 0.3s ease-in-out, stroke-dasharray 0.3s ease-in-out, stroke-linecap 0.3s ease-in-out, stroke-width 0.3s ease-in-out, stroke 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.rs {
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+.rs .rs-video-controls,
+.rs .rs-video-volume {
+  opacity: 0;
+}
+.rs:hover .rs-video-controls,
+.rs:hover .rs-video-volume {
+  opacity: 1;
+}
+
+.rs-close-button {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rs-close-button-border-radius);
+  transition: var(--rs-close-button-transition);
+  z-index: var(--rs-close-button-z-index);
+}
+.rs-close-button--square, .rs-close-button--landscape, .rs-close-button--portrait {
+  top: 0;
+  right: 0;
+  translate: 50% -50%;
+}
+.rs-close-button--circle {
+  top: 0;
+  right: 0;
+}
+.rs-close-button.rs-close-button--xs {
+  width: var(--rs-close-button-size-xs);
+  height: var(--rs-close-button-size-xs);
+}
+.rs-close-button.rs-close-button--sm {
+  width: var(--rs-close-button-size-sm);
+  height: var(--rs-close-button-size-sm);
+}
+.rs-close-button.rs-close-button--md {
+  width: var(--rs-close-button-size-md);
+  height: var(--rs-close-button-size-md);
+}
+.rs-close-button.rs-close-button--lg {
+  width: var(--rs-close-button-size-lg);
+  height: var(--rs-close-button-size-lg);
+}
+.rs-close-button.rs-close-button--xl {
+  width: var(--rs-close-button-size-xl);
+  height: var(--rs-close-button-size-xl);
+}
+.rs-close-button.rs-close-button--xxl {
+  width: var(--rs-close-button-size-xxl);
+  height: var(--rs-close-button-size-xxl);
+}
+.rs-close-button .rs-button {
+  padding: 2px;
+  background: var(--rs-close-button-background);
+}
+.rs-close-button .rs-button:hover {
+  background: var(--rs-close-button-background-hover);
+}
+.rs-close-button .rs-button:active {
+  background: var(--rs-close-button-background-pressed);
+}
+.rs-close-button .rs-button .rs-icon {
+  color: var(--rs-close-button-color);
+  --rs-icon-size-xs: var(--rs-close-button-icon-size-xs);
+  --rs-icon-size-sm: var(--rs-close-button-icon-size-sm);
+  --rs-icon-size-md: var(--rs-close-button-icon-size-md);
+  --rs-icon-size-lg: var(--rs-close-button-icon-size-lg);
+  --rs-icon-size-xl: var(--rs-close-button-icon-size-xl);
+  --rs-icon-size-xxl: var(--rs-close-button-icon-size-xxl);
+}
+
+.rs-container {
+  display: flex;
+  flex-direction: column;
+}
+.rs-container--static {
+  position: static;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.rs-container--relative {
+  position: relative;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.rs-container--absolute {
+  position: absolute;
+  z-index: var(--rs-container-z-index);
+}
+.rs-container--fixed {
+  position: fixed;
+  z-index: var(--rs-container-z-index);
+}
+.rs-container--top-start {
+  top: var(--rs-container-offset-y);
+  left: var(--rs-container-offset-x);
+}
+.rs-container--top-center {
+  top: var(--rs-container-offset-y);
+  left: 50%;
+  translate: -50% 0;
+}
+.rs-container--top-end {
+  top: var(--rs-container-offset-y);
+  right: var(--rs-container-offset-x);
+}
+.rs-container--middle-start {
+  top: 50%;
+  left: var(--rs-container-offset-x);
+  translate: 0 -50%;
+}
+.rs-container--middle-center {
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+.rs-container--middle-end {
+  top: 50%;
+  right: var(--rs-container-offset-x);
+  translate: 0 -50%;
+}
+.rs-container--bottom-start {
+  bottom: var(--rs-container-offset-y);
+  left: var(--rs-container-offset-x);
+}
+.rs-container--bottom-center {
+  bottom: var(--rs-container-offset-y);
+  left: 50%;
+  translate: -50% 0;
+}
+.rs-container--bottom-end {
+  bottom: var(--rs-container-offset-y);
+  right: var(--rs-container-offset-x);
+}
+.rs-container--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.rs-cta-button {
+  box-shadow: var(--rs-cta-button-shadow);
+  transition: var(--rs-cta-button-transition);
+  z-index: var(--rs-cta-button-z-index);
+}
+.rs-cta-button--inside {
+  position: absolute;
+  bottom: 8%;
+  right: 50%;
+  translate: 50% 0;
+}
+.rs-cta-button--outside {
+  width: 100%;
+  margin: 8px auto auto auto;
+}
+.rs-cta-button--outside .rs-button {
+  width: 100%;
+}
+.rs-cta-button .rs-button {
+  color: var(--rs-cta-button-color);
+  background: var(--rs-cta-button-background);
+}
+.rs-cta-button .rs-button:hover {
+  background: var(--rs-cta-button-background-hover);
+}
+.rs-cta-button .rs-button:active {
+  background: var(--rs-cta-button-background-pressed);
+}
+
+.rs-video {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--rs-video-border-radius);
+}
+.rs-video__media {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  overflow: hidden;
+}
+
+.rs-video-container {
+  background: var(--rs-video-container-background);
+  border: var(--rs-video-container-border);
+  border-radius: var(--rs-video-container-border-radius);
+  box-shadow: var(--rs-video-container-shadow);
+  overflow: var(--rs-video-container-overflow);
+  transition: var(--rs-video-container-transition);
+}
+.rs-video-container.rs-video-container--xs.rs-video-container--circle {
+  height: var(--rs-video-container-size-xs);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--xs.rs-video-container--square {
+  height: var(--rs-video-container-size-xs);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--xs.rs-video-container--landscape {
+  height: var(--rs-video-container-size-xs);
+  aspect-ratio: 1.7777777778;
+}
+.rs-video-container.rs-video-container--xs.rs-video-container--portrait {
+  height: var(--rs-video-container-size-xs);
+  aspect-ratio: 0.5625;
+}
+.rs-video-container.rs-video-container--sm.rs-video-container--circle {
+  height: var(--rs-video-container-size-sm);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--sm.rs-video-container--square {
+  height: var(--rs-video-container-size-sm);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--sm.rs-video-container--landscape {
+  height: var(--rs-video-container-size-sm);
+  aspect-ratio: 1.7777777778;
+}
+.rs-video-container.rs-video-container--sm.rs-video-container--portrait {
+  height: var(--rs-video-container-size-sm);
+  aspect-ratio: 0.5625;
+}
+.rs-video-container.rs-video-container--md.rs-video-container--circle {
+  height: var(--rs-video-container-size-md);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--md.rs-video-container--square {
+  height: var(--rs-video-container-size-md);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--md.rs-video-container--landscape {
+  height: var(--rs-video-container-size-md);
+  aspect-ratio: 1.7777777778;
+}
+.rs-video-container.rs-video-container--md.rs-video-container--portrait {
+  height: var(--rs-video-container-size-md);
+  aspect-ratio: 0.5625;
+}
+.rs-video-container.rs-video-container--lg.rs-video-container--circle {
+  height: var(--rs-video-container-size-lg);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--lg.rs-video-container--square {
+  height: var(--rs-video-container-size-lg);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--lg.rs-video-container--landscape {
+  height: var(--rs-video-container-size-lg);
+  aspect-ratio: 1.7777777778;
+}
+.rs-video-container.rs-video-container--lg.rs-video-container--portrait {
+  height: var(--rs-video-container-size-lg);
+  aspect-ratio: 0.5625;
+}
+.rs-video-container.rs-video-container--xl.rs-video-container--circle {
+  height: var(--rs-video-container-size-xl);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--xl.rs-video-container--square {
+  height: var(--rs-video-container-size-xl);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--xl.rs-video-container--landscape {
+  height: var(--rs-video-container-size-xl);
+  aspect-ratio: 1.7777777778;
+}
+.rs-video-container.rs-video-container--xl.rs-video-container--portrait {
+  height: var(--rs-video-container-size-xl);
+  aspect-ratio: 0.5625;
+}
+.rs-video-container.rs-video-container--xxl.rs-video-container--circle {
+  height: var(--rs-video-container-size-xxl);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--xxl.rs-video-container--square {
+  height: var(--rs-video-container-size-xxl);
+  aspect-ratio: 1;
+}
+.rs-video-container.rs-video-container--xxl.rs-video-container--landscape {
+  height: var(--rs-video-container-size-xxl);
+  aspect-ratio: 1.7777777778;
+}
+.rs-video-container.rs-video-container--xxl.rs-video-container--portrait {
+  height: var(--rs-video-container-size-xxl);
+  aspect-ratio: 0.5625;
+}
+.rs-video-container--preview {
+  cursor: pointer;
+}
+.rs-video-container--circle {
+  border-radius: 100%;
+}
+
+.rs-video-controls {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  filter: var(--rs-video-controls-drop-shadow);
+  transition: var(--rs-video-controls-transition);
+  z-index: var(--rs-video-controls-z-index);
+}
+.rs-video-controls__play:hover, .rs-video-controls__pause:hover {
+  transform: var(--rs-video-controls-transform);
+}
+
+.rs-video-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.rs-video-volume {
+  position: absolute;
+  filter: var(--rs-video-volume-drop-shadow);
+  transition: var(--rs-video-volume-transition);
+  z-index: var(--rs-video-volume-z-index);
+}
+.rs-video-volume--square, .rs-video-volume--landscape, .rs-video-volume--portrait {
+  top: 5%;
+  right: 5%;
+}
+.rs-video-volume--circle {
+  top: 10%;
+  right: 50%;
+  translate: 50% 0;
+}
+.rs-video-volume__mute:hover, .rs-video-volume__unmute:hover {
+  transform: var(--rs-video-volume-transform);
+}
+
+.rs-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+/*# sourceMappingURL=scena.css.map */