@stream-io/video-react-sdk 0.3.30 → 0.3.31

package/dist/css/styles.css

@@ -293,6 +293,242 @@
   background-color: var(--str-video__background-color1);
 }
 
+.str-video__livestream-layout__wrapper {
+  flex-grow: 1;
+  overflow-y: hidden;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__screen-share {
+  max-width: 100%;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__screen-share .str-video__video {
+  object-fit: contain;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant {
+  position: absolute;
+  width: 240px;
+  height: 135px;
+  box-shadow: var(--str-video__background-color1) 0 0 3px 0;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--top-right {
+  top: 8px;
+  right: 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--top-left {
+  top: 8px;
+  left: 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--bottom-right {
+  bottom: 8px;
+  right: 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--bottom-left {
+  bottom: 8px;
+  left: 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay:hover .str-video__livestream-layout__overlay__bar {
+  background-color: var(--str-video__livestream-overlay-color-hovered);
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar {
+  height: 10%;
+  min-height: 40px;
+  max-height: 70px;
+  position: relative;
+  bottom: 0;
+  border-bottom-left-radius: var(--str-video__border-radius-sm);
+  border-bottom-right-radius: var(--str-video__border-radius-sm);
+  background-color: var(--str-video__livestream-overlay-color);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__live-badge {
+  padding: 4px 8px;
+  border-radius: var(--str-video__border-radius-xxs);
+  background-color: var(--str-video__primary-color);
+  color: var(--str-video__text-color1);
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__viewers-count {
+  padding: 4px 8px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__viewers-count::before {
+  content: var(--str-video__icon--livestream-viewers);
+  margin-right: 3px;
+  vertical-align: middle;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__speaker-name {
+  flex: 1;
+  font-size: 13px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__duration {
+  flex: 1;
+  text-align: center;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__go-fullscreen {
+  background: var(--str-video__icon--fullscreen) center no-repeat;
+  border-radius: var(--str-video__border-radius-xxs);
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+}
+.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__go-fullscreen:hover {
+  background-color: var(--str-video__overlay-color);
+}
+
+.str-video__paginated-grid-layout__wrapper {
+  flex-grow: 1;
+}
+
+.str-video__paginated-grid-layout {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  max-width: 110vh;
+  padding-inline: 1.25rem;
+  margin: auto;
+  width: 100%;
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group .str-video__participant-view {
+  flex: 0 1 calc(25% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--one .str-video__participant-view {
+  flex: 0 1 calc(100% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--two-four .str-video__participant-view {
+  flex: 0 1 calc(50% - 6px);
+}
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--five-nine .str-video__participant-view {
+  flex: 0 1 calc(33% - 6px);
+}
+
+.str-video__speaker-layout__wrapper {
+  flex-grow: 1;
+  overflow-y: hidden;
+}
+
+.str-video__speaker-layout {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  gap: 1rem;
+  padding-inline: 2px;
+}
+.str-video__speaker-layout .str-video__participant-view {
+  aspect-ratio: 16/9;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-view--speaking:has(.str-video__video--screen-share) {
+  outline: none;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video {
+  object-fit: contain;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-details,
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__call-controls__button {
+  opacity: 1;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper > .str-video__call-controls__button .str-video__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-left {
+  position: absolute;
+  left: 0.5rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-right {
+  position: absolute;
+  right: 0.5rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-top {
+  position: absolute;
+  top: 0.5rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-bottom {
+  position: absolute;
+  bottom: 0.5rem;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper {
+  scrollbar-width: none;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar {
+  display: flex;
+  align-items: center;
+}
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar .str-video__speaker-layout__participant-tile {
+  width: 280px;
+  min-width: 280px;
+  max-width: 25vh;
+  padding: 5px;
+}
+.str-video__speaker-layout--variant-top {
+  flex-direction: column-reverse;
+}
+.str-video__speaker-layout--variant-left {
+  flex-direction: row-reverse;
+}
+.str-video__speaker-layout--variant-right {
+  flex-direction: row;
+}
+.str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar-wrapper, .str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar-wrapper {
+  overflow-y: auto;
+  max-height: 100%;
+}
+.str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar, .str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar {
+  flex-direction: column;
+}
+.str-video__speaker-layout--variant-left .str-video__speaker-layout__spotlight, .str-video__speaker-layout--variant-right .str-video__speaker-layout__spotlight {
+  width: 100%;
+}
+.str-video__speaker-layout--variant-left .str-video__participant-view, .str-video__speaker-layout--variant-right .str-video__participant-view {
+  max-width: unset;
+}
+.str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar-wrapper, .str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar-wrapper {
+  overflow-x: auto;
+}
+.str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar, .str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar {
+  flex-direction: row;
+}
+.str-video__speaker-layout--variant-top .str-video__participant-view, .str-video__speaker-layout--variant-bottom .str-video__participant-view {
+  max-width: 110vh;
+}
+
 .str-video__participant-list {
   display: flex;
   flex-direction: column;
@@ -585,6 +821,13 @@
   background-color: var(--str-video__text-color1);
 }
 
+.str-video__call-preview {
+  width: 100%;
+  height: auto;
+  display: inline-block;
+  object-fit: contain;
+}
+
 .str-video__call-recording-list {
   padding: 0.625rem;
   min-width: 300px;
@@ -964,20 +1207,172 @@
   background-color: var(--str-video__background-color7);
 }
 
-.str-video__loading-indicator {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.str-video__icon {
+  background-color: var(--str-video__text-color1);
 }
-
-.str-video__loading-indicator__icon.spinner {
-  mask-image: var(--str-video__icon--loading);
-  -webkit-mask-image: var(--str-video__icon--loading);
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-  mask-size: 1rem;
+.str-video__icon--chat {
+  mask-image: var(--str-video__icon--chat);
+  -webkit-mask-image: var(--str-video__icon--chat);
+}
+.str-video__icon--reactions {
+  -webkit-mask-image: var(--str-video__icon--reactions);
+  mask-image: var(--str-video__icon--reactions);
+}
+.str-video__icon--recording-on {
+  mask-image: var(--str-video__icon--recording-on);
+  -webkit-mask-image: var(--str-video__icon--recording-on);
+  background-color: var(--str-video__danger-color);
+}
+.str-video__icon--recording-off {
+  mask-image: var(--str-video__icon--recording-off);
+  -webkit-mask-image: var(--str-video__icon--recording-off);
+}
+.str-video__icon--screen-share-on {
+  mask-image: var(--str-video__icon--screen-share-on);
+  -webkit-mask-image: var(--str-video__icon--screen-share-on);
+}
+.str-video__icon--screen-share-off {
+  mask-image: var(--str-video__icon--screen-share-off);
+  -webkit-mask-image: var(--str-video__icon--screen-share-off);
+}
+.str-video__icon--caret-down {
+  transform: rotate(180deg);
+  mask-image: var(--str-video__icon--caret);
+  -webkit-mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-up {
+  mask-image: var(--str-video__icon--caret);
+  -webkit-mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-right {
+  transform: rotate(90deg);
+  mask-image: var(--str-video__icon--caret);
+  -webkit-mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--caret-left {
+  transform: rotate(-90deg);
+  mask-image: var(--str-video__icon--caret);
+  -webkit-mask-image: var(--str-video__icon--caret);
+}
+.str-video__icon--close {
+  mask-image: var(--str-video__icon--close);
+  -webkit-mask-image: var(--str-video__icon--close);
+}
+.str-video__icon--mic {
+  mask-image: var(--str-video__icon--mic);
+  -webkit-mask-image: var(--str-video__icon--mic);
+}
+.str-video__icon--mic-off {
+  mask-image: var(--str-video__icon--mic-off);
+  -webkit-mask-image: var(--str-video__icon--mic-off);
+}
+.str-video__icon--camera {
+  mask-image: var(--str-video__icon--camera);
+  -webkit-mask-image: var(--str-video__icon--camera);
+}
+.str-video__icon--camera-off {
+  mask-image: var(--str-video__icon--camera-off);
+  -webkit-mask-image: var(--str-video__icon--camera-off);
+}
+.str-video__icon--camera-off-outline {
+  mask-image: var(--str-video__icon--camera-off-outline);
+  -webkit-mask-image: var(--str-video__icon--camera-off-outline);
+}
+.str-video__icon--call-end {
+  mask-image: var(--str-video__icon--call-end);
+  -webkit-mask-image: var(--str-video__icon--call-end);
+}
+.str-video__icon--call-accept {
+  mask-image: var(--str-video__icon--call-accept);
+  -webkit-mask-image: var(--str-video__icon--call-accept);
+}
+.str-video__icon--info {
+  -webkit-mask-image: var(--str-video__icon--info-icon);
+  mask-image: var(--str-video__icon--info-icon);
+}
+.str-video__icon--info-document {
+  -webkit-mask-image: var(--str-video__icon--info-document);
+  mask-image: var(--str-video__icon--info-document);
+}
+.str-video__icon--stats {
+  -webkit-mask-image: var(--str-video__icon--stats);
+  mask-image: var(--str-video__icon--stats);
+}
+.str-video__icon--participants {
+  mask-image: var(--str-video__icon--participants);
+  -webkit-mask-image: var(--str-video__icon--participants);
+}
+.str-video__icon--user-plus {
+  mask-image: var(--str-video__icon--user-plus);
+  -webkit-mask-image: var(--str-video__icon--user-plus);
+}
+.str-video__icon--speaker {
+  mask-image: var(--str-video__icon--speaker);
+  -webkit-mask-image: var(--str-video__icon--speaker);
+}
+.str-video__icon--ellipsis {
+  mask-image: var(--str-video__icon--ellipsis);
+  -webkit-mask-image: var(--str-video__icon--ellipsis);
+}
+.str-video__icon--grid {
+  mask-image: var(--str-video__icon--grid);
+  -webkit-mask-image: var(--str-video__icon--grid);
+}
+.str-video__icon--pin {
+  mask-image: var(--str-video__icon--pin);
+  -webkit-mask-image: var(--str-video__icon--pin);
+}
+.str-video__icon--no-audio {
+  mask-image: var(--str-video__icon--no-audio);
+  -webkit-mask-image: var(--str-video__icon--no-audio);
+}
+.str-video__icon--not-allowed {
+  mask-image: var(--str-video__icon--not-allowed);
+  -webkit-mask-image: var(--str-video__icon--not-allowed);
+}
+.str-video__icon--call-recordings {
+  mask-image: var(--str-video__icon--film-roll);
+  -webkit-mask-image: var(--str-video__icon--film-roll);
+}
+.str-video__icon--device-settings {
+  mask-image: var(--str-video__icon--settings);
+  -webkit-mask-image: var(--str-video__icon--settings);
+}
+.str-video__icon--filter {
+  mask-image: var(--str-video__icon--filter);
+  -webkit-mask-image: var(--str-video__icon--filter);
+}
+.str-video__icon--refresh {
+  mask-image: var(--str-video__icon--refresh);
+  -webkit-mask-image: var(--str-video__icon--refresh);
+}
+
+.str-video__icon {
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  display: block;
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+.str-video__loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.str-video__loading-indicator__icon.spinner {
+  mask-image: var(--str-video__icon--loading);
+  -webkit-mask-image: var(--str-video__icon--loading);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: 1rem;
   -webkit-mask-size: 1rem;
   background-color: var(--str-video__text-color2);
   animation: rotation 1s linear infinite;
@@ -1085,72 +1480,149 @@
   font-size: 0.75rem;
 }
 
-.str-video__call-panel {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  width: 400px;
-  height: 300px;
-  padding: 1rem 1rem 0.5rem;
-  gap: 1rem;
-}
-
-.str-video__call-panel--ringing .str-video__call-panel__members-list {
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box {
+.str-video__participant-view,
+.str-video__participant-view--angular-host {
   position: relative;
+  width: 100%;
+  max-width: 1280px;
+  max-height: 100%;
+  min-height: 0;
+  aspect-ratio: 4/3;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2rem;
-}
-.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__avatar {
-  width: 80px;
-  height: 80px;
+  border-radius: var(--str-video__border-radius-sm);
 }
-.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__member_details {
-  position: absolute;
-  bottom: 10%;
-  padding: 0.125rem 0.375rem;
+.str-video__participant-view--speaking,
+.str-video__participant-view--angular-host--speaking {
+  outline: 2px solid var(--str-video__primary-color);
 }
-.str-video__call-panel--ringing .str-video__pending-call-controls {
-  display: flex;
-  gap: 0.675rem;
+.str-video__participant-view .str-video__participant-details,
+.str-video__participant-view .str-video__call-controls__button,
+.str-video__participant-view--angular-host .str-video__participant-details,
+.str-video__participant-view--angular-host .str-video__call-controls__button {
+  transition: opacity 200ms ease-out;
+  opacity: 0.3;
+  color: var(--str-video__text-color1);
 }
-
-.str-video__call-panel {
-  background: var(--str-video__background-color3);
-  border: 2px solid rgba(200, 200, 200, 0.6);
-  border-radius: 10px;
+.str-video__participant-view:hover .str-video__participant-details,
+.str-video__participant-view:hover .str-video__call-controls__button,
+.str-video__participant-view--angular-host:hover .str-video__participant-details,
+.str-video__participant-view--angular-host:hover .str-video__call-controls__button {
+  opacity: 1;
 }
-
-.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box {
-  border-radius: var(--str-video__border-radius-circle);
-  background: var(--str-video__background-color6);
+.str-video__participant-view > .str-video__call-controls__button,
+.str-video__participant-view--angular-host > .str-video__call-controls__button {
+  position: absolute;
+  top: 0.875rem;
+  right: 0.875rem;
+  padding: 0.3rem;
 }
-.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box:before {
-  content: "";
+.str-video__participant-view .str-video__participant-details,
+.str-video__participant-view--angular-host .str-video__participant-details {
   position: absolute;
-  inset: 0;
-  border-radius: var(--str-video__border-radius-circle);
-  padding: 4px;
-  background: linear-gradient(180deg, var(--str-video__primary-color), var(--str-video__info-color));
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  mask-composite: exclude;
+  left: 0.875rem;
+  bottom: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3125rem;
 }
-.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__member_details {
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name {
+  border-radius: var(--str-video__border-radius-xs);
   background-color: var(--str-video__background-color4);
-  color: var(--str-video__text-color1);
-  border-radius: 4px;
-  font-size: 12px;
-  line-height: 16px;
-}
+  display: flex;
+  align-items: center;
+  gap: 0.3125rem;
+  padding: 4px 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--audio-muted,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--audio-muted {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  mask-image: var(--str-video__icon--mic-off);
+  -webkit-mask-image: var(--str-video__icon--mic-off);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--dominant_speaker,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--dominant_speaker {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  mask-image: var(--str-video__icon--dominant-speaker);
+  -webkit-mask-image: var(--str-video__icon--dominant-speaker);
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--video-muted,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--video-muted {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  mask-image: var(--str-video__icon--camera-off);
+  -webkit-mask-image: var(--str-video__icon--camera-off);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--pinned,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--pinned {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  width: 0.8rem;
+  -webkit-mask-size: 0.8rem;
+  height: 1rem;
+  mask-size: 0.8rem;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-image: var(--str-video__icon--pin);
+  -webkit-mask-image: var(--str-video__icon--pin);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--network-stats,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--network-stats {
+  width: 1rem;
+  height: 1rem;
+  mask-size: 1rem;
+  -webkit-mask-size: 1rem;
+  background-color: var(--str-video__text-color1);
+  background-image: var(--str-video__icon--network-quality);
+  cursor: pointer;
+  margin-right: 0.625rem;
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__connection-quality,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__connection-quality {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: block;
+  background-size: cover;
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__connection-quality--poor,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__connection-quality--poor {
+  background-image: var(--str-video__icon--connection-quality-poor);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__connection-quality--good,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__connection-quality--good {
+  background-image: var(--str-video__icon--connection-quality-good);
+}
+.str-video__participant-view .str-video__participant-details .str-video__participant-details__connection-quality--excellent,
+.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__connection-quality--excellent {
+  background-image: var(--str-video__icon--connection-quality-excellent);
+}
 
 .str-video__permission-requests {
   background-color: var(--str-video__background-color1);
@@ -1213,6 +1685,116 @@
   font-size: 2.5rem;
 }
 
+.str-video__call-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  width: 400px;
+  height: 300px;
+  padding: 1rem 1rem 0.5rem;
+  gap: 1rem;
+}
+
+.str-video__call-panel--ringing .str-video__call-panel__members-list {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__avatar {
+  width: 80px;
+  height: 80px;
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__member_details {
+  position: absolute;
+  bottom: 10%;
+  padding: 0.125rem 0.375rem;
+}
+.str-video__call-panel--ringing .str-video__pending-call-controls {
+  display: flex;
+  gap: 0.675rem;
+}
+
+.str-video__call-panel {
+  background: var(--str-video__background-color3);
+  border: 2px solid rgba(200, 200, 200, 0.6);
+  border-radius: 10px;
+}
+
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box {
+  border-radius: var(--str-video__border-radius-circle);
+  background: var(--str-video__background-color6);
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--str-video__border-radius-circle);
+  padding: 4px;
+  background: linear-gradient(180deg, var(--str-video__primary-color), var(--str-video__info-color));
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.str-video__call-panel--ringing .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__member_details {
+  background-color: var(--str-video__background-color4);
+  color: var(--str-video__text-color1);
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.str-video__screen-share-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  gap: 1.8rem;
+}
+.str-video__screen-share-overlay > .str-video__icon {
+  width: 4rem;
+  height: 4rem;
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__button {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  padding-inline: 1.6rem;
+  padding-block: 0.8rem;
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__button .str-video__icon {
+  width: 0.7rem;
+  height: 0.7rem;
+}
+
+.str-video__screen-share-overlay {
+  background: var(--str-video__overlay-color);
+  backdrop-filter: blur(3px);
+  border-radius: inherit;
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__title {
+  font-size: 1.3rem;
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__button {
+  color: white;
+  background: var(--str-video__danger-color);
+  border-radius: var(--str-video__border-radius-xs);
+}
+.str-video__screen-share-overlay .str-video__screen-share-overlay__button:hover {
+  background-color: var(--str-video__danger-color--accent);
+}
+
 .str-video__search-input__container {
   display: flex;
   gap: 0.5rem;
@@ -1498,581 +2080,6 @@
   overflow: hidden;
 }
 
-.str-video__participant-view,
-.str-video__participant-view--angular-host {
-  position: relative;
-  width: 100%;
-  max-width: 1280px;
-  max-height: 100%;
-  min-height: 0;
-  aspect-ratio: 4/3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--str-video__border-radius-sm);
-}
-.str-video__participant-view--speaking,
-.str-video__participant-view--angular-host--speaking {
-  outline: 2px solid var(--str-video__primary-color);
-}
-.str-video__participant-view .str-video__participant-details,
-.str-video__participant-view .str-video__call-controls__button,
-.str-video__participant-view--angular-host .str-video__participant-details,
-.str-video__participant-view--angular-host .str-video__call-controls__button {
-  transition: opacity 200ms ease-out;
-  opacity: 0.3;
-  color: var(--str-video__text-color1);
-}
-.str-video__participant-view:hover .str-video__participant-details,
-.str-video__participant-view:hover .str-video__call-controls__button,
-.str-video__participant-view--angular-host:hover .str-video__participant-details,
-.str-video__participant-view--angular-host:hover .str-video__call-controls__button {
-  opacity: 1;
-}
-.str-video__participant-view > .str-video__call-controls__button,
-.str-video__participant-view--angular-host > .str-video__call-controls__button {
-  position: absolute;
-  top: 0.875rem;
-  right: 0.875rem;
-  padding: 0.3rem;
-}
-.str-video__participant-view .str-video__participant-details,
-.str-video__participant-view--angular-host .str-video__participant-details {
-  position: absolute;
-  left: 0.875rem;
-  bottom: 0.875rem;
-  display: flex;
-  align-items: center;
-  gap: 0.3125rem;
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__name,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name {
-  border-radius: var(--str-video__border-radius-xs);
-  background-color: var(--str-video__background-color4);
-  display: flex;
-  align-items: center;
-  gap: 0.3125rem;
-  padding: 4px 6px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--audio-muted,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--audio-muted {
-  width: 1rem;
-  height: 1rem;
-  mask-size: 1rem;
-  -webkit-mask-size: 1rem;
-  background-color: var(--str-video__text-color1);
-  mask-image: var(--str-video__icon--mic-off);
-  -webkit-mask-image: var(--str-video__icon--mic-off);
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--dominant_speaker,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--dominant_speaker {
-  width: 1rem;
-  height: 1rem;
-  mask-size: 1rem;
-  -webkit-mask-size: 1rem;
-  background-color: var(--str-video__text-color1);
-  mask-image: var(--str-video__icon--dominant-speaker);
-  -webkit-mask-image: var(--str-video__icon--dominant-speaker);
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--video-muted,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--video-muted {
-  width: 1rem;
-  height: 1rem;
-  mask-size: 1rem;
-  -webkit-mask-size: 1rem;
-  background-color: var(--str-video__text-color1);
-  mask-image: var(--str-video__icon--camera-off);
-  -webkit-mask-image: var(--str-video__icon--camera-off);
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--pinned,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--pinned {
-  width: 1rem;
-  height: 1rem;
-  mask-size: 1rem;
-  -webkit-mask-size: 1rem;
-  background-color: var(--str-video__text-color1);
-  width: 0.8rem;
-  -webkit-mask-size: 0.8rem;
-  height: 1rem;
-  mask-size: 0.8rem;
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-  mask-image: var(--str-video__icon--pin);
-  -webkit-mask-image: var(--str-video__icon--pin);
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--network-stats,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__name .str-video__participant-details__name--network-stats {
-  width: 1rem;
-  height: 1rem;
-  mask-size: 1rem;
-  -webkit-mask-size: 1rem;
-  background-color: var(--str-video__text-color1);
-  background-image: var(--str-video__icon--network-quality);
-  cursor: pointer;
-  margin-right: 0.625rem;
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__connection-quality,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__connection-quality {
-  width: 1.5rem;
-  height: 1.5rem;
-  display: block;
-  background-size: cover;
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__connection-quality--poor,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__connection-quality--poor {
-  background-image: var(--str-video__icon--connection-quality-poor);
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__connection-quality--good,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__connection-quality--good {
-  background-image: var(--str-video__icon--connection-quality-good);
-}
-.str-video__participant-view .str-video__participant-details .str-video__participant-details__connection-quality--excellent,
-.str-video__participant-view--angular-host .str-video__participant-details .str-video__participant-details__connection-quality--excellent {
-  background-image: var(--str-video__icon--connection-quality-excellent);
-}
-
-.str-video__screen-share-overlay {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  gap: 1.8rem;
-}
-.str-video__screen-share-overlay > .str-video__icon {
-  width: 4rem;
-  height: 4rem;
-}
-.str-video__screen-share-overlay .str-video__screen-share-overlay__button {
-  display: flex;
-  gap: 0.4rem;
-  align-items: center;
-  padding-inline: 1.6rem;
-  padding-block: 0.8rem;
-}
-.str-video__screen-share-overlay .str-video__screen-share-overlay__button .str-video__icon {
-  width: 0.7rem;
-  height: 0.7rem;
-}
-
-.str-video__screen-share-overlay {
-  background: var(--str-video__overlay-color);
-  backdrop-filter: blur(3px);
-  border-radius: inherit;
-}
-.str-video__screen-share-overlay .str-video__screen-share-overlay__title {
-  font-size: 1.3rem;
-}
-.str-video__screen-share-overlay .str-video__screen-share-overlay__button {
-  color: white;
-  background: var(--str-video__danger-color);
-  border-radius: var(--str-video__border-radius-xs);
-}
-.str-video__screen-share-overlay .str-video__screen-share-overlay__button:hover {
-  background-color: var(--str-video__danger-color--accent);
-}
-
-.str-video__livestream-layout__wrapper {
-  flex-grow: 1;
-  overflow-y: hidden;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__screen-share {
-  max-width: 100%;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__screen-share .str-video__video {
-  object-fit: contain;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant {
-  position: absolute;
-  width: 240px;
-  height: 135px;
-  box-shadow: var(--str-video__background-color1) 0 0 3px 0;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--top-right {
-  top: 8px;
-  right: 8px;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--top-left {
-  top: 8px;
-  left: 8px;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--bottom-right {
-  bottom: 8px;
-  right: 8px;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__floating-participant--bottom-left {
-  bottom: 8px;
-  left: 8px;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column-reverse;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay:hover .str-video__livestream-layout__overlay__bar {
-  background-color: var(--str-video__livestream-overlay-color-hovered);
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__overlay__bar {
-  height: 10%;
-  min-height: 40px;
-  max-height: 70px;
-  position: relative;
-  bottom: 0;
-  border-bottom-left-radius: var(--str-video__border-radius-sm);
-  border-bottom-right-radius: var(--str-video__border-radius-sm);
-  background-color: var(--str-video__livestream-overlay-color);
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__live-badge {
-  padding: 4px 8px;
-  border-radius: var(--str-video__border-radius-xxs);
-  background-color: var(--str-video__primary-color);
-  color: var(--str-video__text-color1);
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__viewers-count {
-  padding: 4px 8px;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__viewers-count::before {
-  content: var(--str-video__icon--livestream-viewers);
-  margin-right: 3px;
-  vertical-align: middle;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__speaker-name {
-  flex: 1;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__duration {
-  flex: 1;
-  text-align: center;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__go-fullscreen {
-  background: var(--str-video__icon--fullscreen) center no-repeat;
-  border-radius: var(--str-video__border-radius-xxs);
-  cursor: pointer;
-  width: 32px;
-  height: 32px;
-}
-.str-video__livestream-layout__wrapper .str-video__livestream-layout__overlay .str-video__livestream-layout__go-fullscreen:hover {
-  background-color: var(--str-video__overlay-color);
-}
-
-.str-video__paginated-grid-layout__wrapper {
-  flex-grow: 1;
-}
-
-.str-video__paginated-grid-layout {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: space-between;
-}
-.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-  max-width: 110vh;
-  padding-inline: 1.25rem;
-  margin: auto;
-  width: 100%;
-}
-.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group .str-video__participant-view {
-  flex: 0 1 calc(25% - 6px);
-}
-.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--one .str-video__participant-view {
-  flex: 0 1 calc(100% - 6px);
-}
-.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--two-four .str-video__participant-view {
-  flex: 0 1 calc(50% - 6px);
-}
-.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group.str-video__paginated-grid-layout--five-nine .str-video__participant-view {
-  flex: 0 1 calc(33% - 6px);
-}
-
-.str-video__speaker-layout__wrapper {
-  flex-grow: 1;
-  overflow-y: hidden;
-}
-
-.str-video__speaker-layout {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-  gap: 1rem;
-  padding-inline: 2px;
-}
-.str-video__speaker-layout .str-video__participant-view {
-  aspect-ratio: 16/9;
-}
-.str-video__speaker-layout .str-video__speaker-layout__spotlight {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 0;
-}
-.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-view--speaking:has(.str-video__video--screen-share) {
-  outline: none;
-}
-.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video {
-  object-fit: contain;
-}
-.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-details,
-.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__call-controls__button {
-  opacity: 1;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper > .str-video__call-controls__button .str-video__icon {
-  width: 1rem;
-  height: 1rem;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-left {
-  position: absolute;
-  left: 0.5rem;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-right {
-  position: absolute;
-  right: 0.5rem;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-top {
-  position: absolute;
-  top: 0.5rem;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-bottom {
-  position: absolute;
-  bottom: 0.5rem;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper {
-  scrollbar-width: none;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper::-webkit-scrollbar {
-  display: none;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar {
-  display: flex;
-  align-items: center;
-}
-.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar .str-video__speaker-layout__participant-tile {
-  width: 280px;
-  min-width: 280px;
-  max-width: 25vh;
-  padding: 5px;
-}
-.str-video__speaker-layout--variant-top {
-  flex-direction: column-reverse;
-}
-.str-video__speaker-layout--variant-left {
-  flex-direction: row-reverse;
-}
-.str-video__speaker-layout--variant-right {
-  flex-direction: row;
-}
-.str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar-wrapper, .str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar-wrapper {
-  overflow-y: auto;
-  max-height: 100%;
-}
-.str-video__speaker-layout--variant-left .str-video__speaker-layout__participants-bar, .str-video__speaker-layout--variant-right .str-video__speaker-layout__participants-bar {
-  flex-direction: column;
-}
-.str-video__speaker-layout--variant-left .str-video__speaker-layout__spotlight, .str-video__speaker-layout--variant-right .str-video__speaker-layout__spotlight {
-  width: 100%;
-}
-.str-video__speaker-layout--variant-left .str-video__participant-view, .str-video__speaker-layout--variant-right .str-video__participant-view {
-  max-width: unset;
-}
-.str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar-wrapper, .str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar-wrapper {
-  overflow-x: auto;
-}
-.str-video__speaker-layout--variant-top .str-video__speaker-layout__participants-bar, .str-video__speaker-layout--variant-bottom .str-video__speaker-layout__participants-bar {
-  flex-direction: row;
-}
-.str-video__speaker-layout--variant-top .str-video__participant-view, .str-video__speaker-layout--variant-bottom .str-video__participant-view {
-  max-width: 110vh;
-}
-
-.str-video__icon {
-  background-color: var(--str-video__text-color1);
-}
-.str-video__icon--chat {
-  mask-image: var(--str-video__icon--chat);
-  -webkit-mask-image: var(--str-video__icon--chat);
-}
-.str-video__icon--reactions {
-  -webkit-mask-image: var(--str-video__icon--reactions);
-  mask-image: var(--str-video__icon--reactions);
-}
-.str-video__icon--recording-on {
-  mask-image: var(--str-video__icon--recording-on);
-  -webkit-mask-image: var(--str-video__icon--recording-on);
-  background-color: var(--str-video__danger-color);
-}
-.str-video__icon--recording-off {
-  mask-image: var(--str-video__icon--recording-off);
-  -webkit-mask-image: var(--str-video__icon--recording-off);
-}
-.str-video__icon--screen-share-on {
-  mask-image: var(--str-video__icon--screen-share-on);
-  -webkit-mask-image: var(--str-video__icon--screen-share-on);
-}
-.str-video__icon--screen-share-off {
-  mask-image: var(--str-video__icon--screen-share-off);
-  -webkit-mask-image: var(--str-video__icon--screen-share-off);
-}
-.str-video__icon--caret-down {
-  transform: rotate(180deg);
-  mask-image: var(--str-video__icon--caret);
-  -webkit-mask-image: var(--str-video__icon--caret);
-}
-.str-video__icon--caret-up {
-  mask-image: var(--str-video__icon--caret);
-  -webkit-mask-image: var(--str-video__icon--caret);
-}
-.str-video__icon--caret-right {
-  transform: rotate(90deg);
-  mask-image: var(--str-video__icon--caret);
-  -webkit-mask-image: var(--str-video__icon--caret);
-}
-.str-video__icon--caret-left {
-  transform: rotate(-90deg);
-  mask-image: var(--str-video__icon--caret);
-  -webkit-mask-image: var(--str-video__icon--caret);
-}
-.str-video__icon--close {
-  mask-image: var(--str-video__icon--close);
-  -webkit-mask-image: var(--str-video__icon--close);
-}
-.str-video__icon--mic {
-  mask-image: var(--str-video__icon--mic);
-  -webkit-mask-image: var(--str-video__icon--mic);
-}
-.str-video__icon--mic-off {
-  mask-image: var(--str-video__icon--mic-off);
-  -webkit-mask-image: var(--str-video__icon--mic-off);
-}
-.str-video__icon--camera {
-  mask-image: var(--str-video__icon--camera);
-  -webkit-mask-image: var(--str-video__icon--camera);
-}
-.str-video__icon--camera-off {
-  mask-image: var(--str-video__icon--camera-off);
-  -webkit-mask-image: var(--str-video__icon--camera-off);
-}
-.str-video__icon--camera-off-outline {
-  mask-image: var(--str-video__icon--camera-off-outline);
-  -webkit-mask-image: var(--str-video__icon--camera-off-outline);
-}
-.str-video__icon--call-end {
-  mask-image: var(--str-video__icon--call-end);
-  -webkit-mask-image: var(--str-video__icon--call-end);
-}
-.str-video__icon--call-accept {
-  mask-image: var(--str-video__icon--call-accept);
-  -webkit-mask-image: var(--str-video__icon--call-accept);
-}
-.str-video__icon--info {
-  -webkit-mask-image: var(--str-video__icon--info-icon);
-  mask-image: var(--str-video__icon--info-icon);
-}
-.str-video__icon--info-document {
-  -webkit-mask-image: var(--str-video__icon--info-document);
-  mask-image: var(--str-video__icon--info-document);
-}
-.str-video__icon--stats {
-  -webkit-mask-image: var(--str-video__icon--stats);
-  mask-image: var(--str-video__icon--stats);
-}
-.str-video__icon--participants {
-  mask-image: var(--str-video__icon--participants);
-  -webkit-mask-image: var(--str-video__icon--participants);
-}
-.str-video__icon--user-plus {
-  mask-image: var(--str-video__icon--user-plus);
-  -webkit-mask-image: var(--str-video__icon--user-plus);
-}
-.str-video__icon--speaker {
-  mask-image: var(--str-video__icon--speaker);
-  -webkit-mask-image: var(--str-video__icon--speaker);
-}
-.str-video__icon--ellipsis {
-  mask-image: var(--str-video__icon--ellipsis);
-  -webkit-mask-image: var(--str-video__icon--ellipsis);
-}
-.str-video__icon--grid {
-  mask-image: var(--str-video__icon--grid);
-  -webkit-mask-image: var(--str-video__icon--grid);
-}
-.str-video__icon--pin {
-  mask-image: var(--str-video__icon--pin);
-  -webkit-mask-image: var(--str-video__icon--pin);
-}
-.str-video__icon--no-audio {
-  mask-image: var(--str-video__icon--no-audio);
-  -webkit-mask-image: var(--str-video__icon--no-audio);
-}
-.str-video__icon--not-allowed {
-  mask-image: var(--str-video__icon--not-allowed);
-  -webkit-mask-image: var(--str-video__icon--not-allowed);
-}
-.str-video__icon--call-recordings {
-  mask-image: var(--str-video__icon--film-roll);
-  -webkit-mask-image: var(--str-video__icon--film-roll);
-}
-.str-video__icon--device-settings {
-  mask-image: var(--str-video__icon--settings);
-  -webkit-mask-image: var(--str-video__icon--settings);
-}
-.str-video__icon--filter {
-  mask-image: var(--str-video__icon--filter);
-  -webkit-mask-image: var(--str-video__icon--filter);
-}
-.str-video__icon--refresh {
-  mask-image: var(--str-video__icon--refresh);
-  -webkit-mask-image: var(--str-video__icon--refresh);
-}
-
-.str-video__icon {
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-position: center;
-  -webkit-mask-position: center;
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  display: block;
-  width: 1.375rem;
-  height: 1.375rem;
-}
-
 .str-video__debug__track-stats {
   font-size: 0.6rem;
   overflow: scroll;