@stream-io/video-react-sdk 0.0.1-alpha.9 → 0.0.1-alpha.90

package/dist/css/styles.css

@@ -23,253 +23,33 @@
 }
 
 .str-video {
-  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
-  --str-video__spacing-px: 1px;
-  /* Used for margins and paddings */
-  --str-video__spacing-0_5: 0.125rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-1: 0.25rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-1_5: 0.375rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-2: 0.5rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-2_5: 0.625rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-3: 0.75rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-3_5: 0.875rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-4: 1rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-5: 1.25rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-6: 1.5rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-7: 1.75rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-8: 2rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-9: 2.25rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-10: 2.5rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-11: 2.75rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-12: 3rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-14: 3.5rem;
-  /* Used for margins and paddings */
-  --str-video__spacing-16: 4rem;
-}
-
-.str-video {
-  /* Border radius used for slightly rounded elements */
-  --str-video__border-radius-xxxs: 2px;
-  /* Border radius used for slightly rounded elements */
   --str-video__border-radius-xxs: 4px;
-  /* Border radius used for slightly rounded elements */
   --str-video__border-radius-xs: 8px;
-  /* Border radius used for slightly rounded elements */
   --str-video__border-radius-sm: 12px;
-  /* Border radius used for rounded elements */
   --str-video__border-radius-md: 18px;
-  /* Border radius used for rounded elements */
   --str-video__border-radius-lg: 20px;
-  /* Border radius used for rounded elements */
   --str-video__border-radius-xl: 30px;
-  /* Border radius used for circular elements */
   --str-video__border-radius-circle: 999px;
-  /* The font used in the video, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
-  --str-video__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, Helvetica Neue, sans-serif;
-  /* The font used for caption texts */
-  --str-video__caption-text: 0.75rem/1rem var(--str-video__font-family);
-  /* The font used for caption texts with emphasize */
-  --str-video__caption-medium-text: 500 0.75rem/1rem var(--str-video__font-family);
-  /* The font used for body texts */
-  --str-video__body-text: 0.875rem/1rem var(--str-video__font-family);
-  /* The font used for body texts with emphasize */
-  --str-video__body-medium-text: 500 0.875rem/1rem var(--str-video__font-family);
-  /* The font used for body texts */
-  --str-video__body2-text: 0.9375rem/1rem var(--str-video__font-family);
-  /* The font used for body texts with emphasize */
-  --str-video__body2-medium-text: 500 0.9375rem/1rem var(--str-video__font-family);
-  /* The font used for subtitle texts */
-  --str-video__subtitle-text: 1rem/1.25rem var(--str-video__font-family);
-  /* The font used for subtitle texts with emphasize */
-  --str-video__subtitle-medium-text: 500 1rem/1.25rem var(--str-video__font-family);
-  /* The font used for subtitle texts */
-  --str-video__subtitle2-text: 1.25rem/1.5rem var(--str-video__font-family);
-  /* The font used for subtitle texts with emphasize */
-  --str-video__subtitle2-medium-text: 500 1.25rem/1.5rem var(--str-video__font-family);
-  /* The font used for headline texts */
-  --str-video__headline-text: 1.5rem/1.5rem var(--str-video__font-family);
-  /* The font used for headline texts */
-  --str-video__headline2-text: 1.8rem/1.8rem var(--str-video__font-family);
-}
-
-.str-video,
-.str-video__theme-light {
-  /* Used for emphasis, brands can inject their main color using this variable */
-  --str-video__primary-color: var(--str-video__blue500);
-  /* Used for emphasised overlays - color of --str-video__primary-color with alpha channel */
-  --str-video__primary-overlay-color: rgba(0, 95, 255, 0.6);
-  /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
-  --str-video__primary-color-low-emphasis: var(--str-video__blue300);
-  /* Used to indicate that a UI element with primary color is in an active state */
-  --str-video__active-primary-color: var(--str-video__blue600);
-  /* If the primary color is used as a background, text/icons are displayed in this color */
-  --str-video__on-primary-color: var(--str-video__grey50);
-  /* Used as a background color for the main video UI components */
-  --str-video__background-color: var(--str-video__grey50);
-  /* Used as a background color for the main video UI components */
-  --str-video__secondary-background-color: var(--str-video__grey50);
-  /* Used as a background color to give emphasis, but less vibrant than the primary color */
-  --str-video__primary-surface-color: var(--str-video__blue100);
-  /* Used as a background color to give emphasis, but less vibrant than the primary surface color */
-  --str-video__primary-surface-color-low-emphasis: var(--str-video__blue50);
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-video__surface-color: var(--str-video__grey300);
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-video__secondary-surface-color: var(--str-video__grey200);
-  /* A neutral color used to give emphasis to different surfaces */
-  --str-video__tertiary-surface-color: var(--str-video__grey100);
-  /* The main color used for texts/icons */
-  --str-video__text-color: var(--str-video__grey950);
-  /* Used for texts/icons that need less emphasis */
-  --str-video__text-low-emphasis-color: var(--str-video__grey500);
-  /* Used for displaying disabled UI elements (typically buttons) */
-  --str-video__disabled-color: var(--str-video__grey400);
-  /* Used for text/icon colors if disabled color is used as a background color */
-  --str-video__on-disabled-color: var(--str-video__grey50);
-  /* Used for error messages, and destructive actions */
-  --str-video__danger-color: var(--str-video__red400);
-  /* The background color used to highlight a message when jumping to a message. Only available in React SDK. */
-  --str-video__message-highlight-color: var(--str-video__yellow100);
-  /* Used for displaying the unread badge */
-  --str-video__unread-badge-color: var(--str-video__red400);
-  /* Used for text/icon colors if unread badge color is used as a background color */
-  --str-video__on-unread-badge-color: var(--str-video__grey50);
-  /* The background color used for overlays */
-  --str-video__overlay-color: rgba(252, 252, 252, 0.9);
-  /* The background color used for subtle overlays */
-  --str-video__secondary-overlay-color: rgba(0, 0, 0, 0.2);
-  /* The text/icon color used on subtle overlays */
-  --str-video__secondary-overlay-text-color: var(--str-video__grey50);
-  /* The background color used for opaque surfaces */
-  --str-video__opaque-surface-background-color: rgba(0, 0, 0, 0.8);
-  /* The text color used on opaque surfaces */
-  --str-video__opaque-surface-text-color: var(--str-video__grey50);
-  /* If a component has a box shadow applied to it, this will be the color used for the shadow */
-  --str-video__box-shadow-color: rgba(0, 0, 0, 0.18);
-  /* Used for online indicator and success messages */
-  --str-video__info-color: var(--str-video__green500);
-}
-
-.str-video__theme-dark {
-  --str-video__primary-color: var(--str-video__blue400);
-  --str-video__primary-overlay-color: rgba(51, 126, 255, 0.6);
-  --str-video__primary-color-low-emphasis: var(--str-video__blue700);
-  --str-video__active-primary-color: var(--str-video__blue600);
-  --str-video__on-primary-color: var(--str-video__grey50);
-  --str-video__background-color: var(--str-video__grey950);
-  --str-video__secondary-background-color: var(--str-video__grey900);
-  --str-video__primary-surface-color: var(--str-video__blue900);
-  --str-video__primary-surface-color-low-emphasis: var(--str-video__blue950);
-  --str-video__surface-color: var(--str-video__grey700);
-  --str-video__secondary-surface-color: var(--str-video__grey800);
-  --str-video__tertiary-surface-color: var(--str-video__grey900);
-  --str-video__text-color: var(--str-video__grey50);
-  --str-video__text-low-emphasis-color: var(--str-video__grey500);
-  --str-video__disabled-color: var(--str-video__grey600);
-  --str-video__on-disabled-color: var(--str-video__grey50);
-  --str-video__danger-color: var(--str-video__red600);
-  --str-video__message-highlight-color: var(--str-video__yellow900);
-  --str-video__unread-badge-color: var(--str-video__red400);
-  --str-video__on-unread-badge-color: var(--str-video__grey50);
-  --str-video__overlay-color: rgba(0, 0, 0, 0.7);
-  --str-video__secondary-overlay-color: rgba(0, 0, 0, 0.4);
-  --str-video__secondary-overlay-text-color: var(--str-video__grey50);
-  --str-video__opaque-surface-background-color: rgba(250, 250, 250, 0.85);
-  --str-video__opaque-surface-text-color: var(--str-video__grey900);
-  --str-video__box-shadow-color: rgba(0, 0, 0, 0.8);
-  --str-video__info-color: var(--str-video__green500);
-}
-
-.str-video {
-  --str-video__blue950: #001333;
-  --str-video__blue900: #00163d;
-  --str-video__blue800: #002666;
-  --str-video__blue700: #003999;
-  --str-video__blue600: #004ccc;
-  --str-video__blue500: #005fff;
-  --str-video__blue400: #337eff;
-  --str-video__blue300: #669fff;
-  --str-video__blue200: #ccdfff;
-  --str-video__blue100: #e0f0ff;
-  --str-video__blue50: #ebf5ff;
-  --str-video__grey950: #080707;
-  --str-video__grey900: #17191c;
-  --str-video__grey800: #1c1e22;
-  --str-video__grey700: #272a30;
-  --str-video__grey600: #4c525c;
-  --str-video__grey500: #72767e;
-  --str-video__grey400: #b4b7bb;
-  --str-video__grey300: #dbdde1;
-  --str-video__grey200: #e9eaed;
-  --str-video__grey100: #f4f4f5;
-  --str-video__grey50: #ffffff;
-  --str-video__red900: #330003;
-  --str-video__red800: #660006;
-  --str-video__red700: #990008;
-  --str-video__red600: #cc000b;
-  --str-video__red500: #ff000e;
-  --str-video__red400: #ff3742;
-  --str-video__red300: #ff666e;
-  --str-video__red200: #ff999f;
-  --str-video__red100: #ffe5e7;
-  --str-video__green900: #062d16;
-  --str-video__green800: #0d592c;
-  --str-video__green700: #138643;
-  --str-video__green600: #19b359;
-  --str-video__green500: #20e070;
-  --str-video__green400: #4ce68c;
-  --str-video__green300: #79eca9;
-  --str-video__green200: #a6f2c6;
-  --str-video__green100: #e9f1ff;
-  --str-video__yellow900: #332500;
-  --str-video__yellow800: #664900;
-  --str-video__yellow700: #996e00;
-  --str-video__yellow600: #cc9200;
-  --str-video__yellow500: #ffb700;
-  --str-video__yellow400: #ffd466;
-  --str-video__yellow300: #ffe299;
-  --str-video__yellow200: #fff1cc;
-  --str-video__yellow100: #fff8e5;
-}
-
-.str-video,
-.str-video__call,
-.str-video__theme-variables {
+  --str-video__primary-color: #005fff;
+  --str-video__secondary-color: #669fff;
+  --str-video__text-color1: #ffffff;
+  --str-video__text-color2: #b4b7bb;
+  --str-video__text-color3: #72767e;
+  --str-video__text-color4: #f7f7f8;
+  --str-video__info-color: #4ce68c;
+  --str-video__info-color--accent: #20e070;
+  --str-video__danger-color: #ff3742;
+  --str-video__danger-color--accent: #ff000e;
   --str-video__background-color0: #000000;
   --str-video__background-color1: #1c1e22;
   --str-video__background-color2: #272a30;
-  --str-video__background-color3: #9e9e9e;
+  --str-video__background-color3: #f4f4f5;
   --str-video__background-color4: #121416;
   --str-video__background-color5: #4a5059;
-  --str-video__danger-color1: #ff3742;
-  --str-video__danger-color2: #ff000e;
+  --str-video__background-color6: #b4b7bb;
+  --str-video__background-color7: #72767e;
   --str-video__overlay-color: rgba(39, 42, 48, 0.75);
-  --str-video__text-color1: #ffffff;
-  --str-video__text-color2: #b4b7bb;
-  --str-video__text-color3: #72767e;
-  --str-video__text-color4: #f7f7f8;
-  --str-video__border-radius1: 8px;
-  --str-video__border-radius2: 12px;
-  --str-video__border-radius-circle: 9999px;
-  --str-video__primary-color: #005fff;
-  --str-video__secondary-color: #337eff;
+  --str-video__icon--call-accept: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNy41MSAxMi4zODJDMTYuMjggMTIuMzgyIDE1LjA5IDEyLjE4MiAxMy45OCAxMS44MjJDMTMuNjMgMTEuNzAyIDEzLjI0IDExLjc5MiAxMi45NyAxMi4wNjJMMTEuNCAxNC4wMzJDOC41NyAxMi42ODIgNS45MiAxMC4xMzIgNC41MSA3LjIwMTk1TDYuNDYgNS41NDE5NUM2LjczIDUuMjYxOTUgNi44MSA0Ljg3MTk1IDYuNyA0LjUyMTk1QzYuMzMgMy40MTE5NSA2LjE0IDIuMjIxOTUgNi4xNCAwLjk5MTk1M0M2LjE0IDAuNDUxOTUzIDUuNjkgMC4wMDE5NTMxMyA1LjE1IDAuMDAxOTUzMTNIMS42OUMxLjE1IDAuMDAxOTUzMTIgMC41IDAuMjQxOTUzIDAuNSAwLjk5MTk1M0MwLjUgMTAuMjgyIDguMjMgMTguMDAyIDE3LjUxIDE4LjAwMkMxOC4yMiAxOC4wMDIgMTguNSAxNy4zNzIgMTguNSAxNi44MjJWMTMuMzcyQzE4LjUgMTIuODMyIDE4LjA1IDEyLjM4MiAxNy41MSAxMi4zODJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
   --str-video__icon--call-end: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAyNiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDIuNDY4NzRDMTEuMzMzMyAyLjQ2ODc0IDkuNzE4NzUgMi43MjkxNiA4LjIwODMzIDMuMjE4NzRWNi40NDc5MUM4LjIwODMzIDYuODU0MTYgNy45Njg3NSA3LjIxODc0IDcuNjI1IDcuMzg1NDFDNi42MDQxNyA3Ljg5NTgzIDUuNjc3MDggOC41NTIwOCA0Ljg1NDE3IDkuMzEyNDlDNC42NjY2NyA5LjQ5OTk5IDQuNDA2MjUgOS42MDQxNiA0LjEyNSA5LjYwNDE2QzMuODMzMzMgOS42MDQxNiAzLjU3MjkyIDkuNDg5NTggMy4zODU0MiA5LjMwMjA4TDAuODAyMDgzIDYuNzE4NzRDMC42MTQ1ODMgNi41NDE2NiAwLjUgNi4yODEyNCAwLjUgNS45ODk1N0MwLjUgNS42OTc5MSAwLjYxNDU4MyA1LjQzNzQ5IDAuODAyMDgzIDUuMjQ5OTlDMy45NzkxNyAyLjIzOTU3IDguMjcwODMgMC4zODU0MDYgMTMgMC4zODU0MDZDMTcuNzI5MiAwLjM4NTQwNiAyMi4wMjA4IDIuMjM5NTcgMjUuMTk3OSA1LjI0OTk5QzI1LjM4NTQgNS40Mzc0OSAyNS41IDUuNjk3OTEgMjUuNSA1Ljk4OTU3QzI1LjUgNi4yODEyNCAyNS4zODU0IDYuNTQxNjYgMjUuMTk3OSA2LjcyOTE2TDIyLjYxNDYgOS4zMTI0OUMyMi40MjcxIDkuNDk5OTkgMjIuMTY2NyA5LjYxNDU4IDIxLjg3NSA5LjYxNDU4QzIxLjU5MzggOS42MTQ1OCAyMS4zMzMzIDkuNDk5OTkgMjEuMTQ1OCA5LjMyMjkxQzIwLjMyMjkgOC41NTIwOCAxOS4zODU0IDcuOTA2MjQgMTguMzY0NiA3LjM5NTgyQzE4LjAyMDggNy4yMjkxNiAxNy43ODEyIDYuODc0OTkgMTcuNzgxMiA2LjQ1ODMyVjMuMjI5MTZDMTYuMjgxMiAyLjcyOTE2IDE0LjY2NjcgMi40Njg3NCAxMyAyLjQ2ODc0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
   --str-video__icon--camera: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjExMTEgMTBWNS4zMzMzM0MxOC4xMTExIDQuNiAxNy41NjExIDQgMTYuODg4OSA0SDIuMjIyMjJDMS41NSA0IDEgNC42IDEgNS4zMzMzM1YxOC42NjY3QzEgMTkuNCAxLjU1IDIwIDIuMjIyMjIgMjBIMTYuODg4OUMxNy41NjExIDIwIDE4LjExMTEgMTkuNCAxOC4xMTExIDE4LjY2NjdWMTRMMjEuMjYyOCAxNy40MzgzQzIxLjg3OTEgMTguMTEwNSAyMyAxNy42NzQ1IDIzIDE2Ljc2MjVWNy4yMzc0N0MyMyA2LjMyNTQ2IDIxLjg3OTEgNS44ODk0NSAyMS4yNjI4IDYuNTYxNzRMMTguMTExMSAxMFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
   --str-video__icon--camera-off: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDYuMjEwNTNMMTguMzY4NCAxMC44NDIxVjYuNzg5NDdDMTguMzY4NCA2LjE1MjYzIDE3Ljg0NzQgNS42MzE1OCAxNy4yMTA1IDUuNjMxNThIMTAuMDU0N0wyMyAxOC41NzY4VjYuMjEwNTNaTTIuNDcwNTMgMUwxIDIuNDcwNTNMNC4xNjEwNSA1LjYzMTU4SDMuMzE1NzlDMi42Nzg5NSA1LjYzMTU4IDIuMTU3ODkgNi4xNTI2MyAyLjE1Nzg5IDYuNzg5NDdWMTguMzY4NEMyLjE1Nzg5IDE5LjAwNTMgMi42Nzg5NSAxOS41MjYzIDMuMzE1NzkgMTkuNTI2M0gxNy4yMTA1QzE3LjQ1MzcgMTkuNTI2MyAxNy42NjIxIDE5LjQzMzcgMTcuODM1OCAxOS4zMTc5TDIxLjUyOTUgMjNMMjMgMjEuNTI5NUwyLjQ3MDUzIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
@@ -382,7 +162,7 @@
 .str-video__call-controls__button {
   padding: 0.5rem;
 }
-.str-video__call-controls__button--variant-danger {
+.str-video__call-controls__button--variant-danger, .str-video__call-controls__button--variant-success {
   padding: 0.5rem 1rem;
 }
 .str-video__call-controls__button[disabled] {
@@ -401,6 +181,10 @@
   width: 1.5rem;
   height: 1.5rem;
 }
+.str-video__call-controls__button .str-video__icon--call-accept {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 
 .str-video__text-button {
   all: unset;
@@ -425,7 +209,7 @@
   );
   /* The background color of the component */
   --str-video__composite-button__button-group-active--background-color: var(
-    --str-video__text-color3
+    --str-video__background-color7
   );
 }
 
@@ -471,13 +255,19 @@
   background-color: var(--str-video__composite-button__button-group-active--background-color);
 }
 .str-video__call-controls__button--variant-danger {
-  background-color: var(--str-video__danger-color1);
+  background-color: var(--str-video__danger-color);
 }
 .str-video__call-controls__button--variant-danger:hover {
-  background-color: var(--str-video__danger-color2);
+  background-color: var(--str-video__danger-color--accent);
+}
+.str-video__call-controls__button--variant-success {
+  background-color: var(--str-video__info-color);
+}
+.str-video__call-controls__button--variant-success:hover {
+  background-color: var(--str-video__info-color--accent);
 }
 .str-video__call-controls__button--enabled {
-  background: var(--str-video__text-color3);
+  background: var(--str-video__background-color7);
 }
 
 .str-video__call-controls {
@@ -491,7 +281,7 @@
   display: flex;
   flex-direction: column;
   padding: 10px;
-  border-radius: var(--str-video__border-radius1);
+  border-radius: var(--str-video__border-radius-xs);
 }
 .str-video__call-controls .str-video__reactions-menu .str-video__reactions-menu__button {
   font-size: 1.5rem;
@@ -536,7 +326,7 @@
 .str-video__call-participants-screen-view .str-video__call-participants-screen-view__screen__presenter {
   padding: 0.625rem 0 0.625rem 0.625rem;
   background-color: var(--str-video__background-color1);
-  border-radius: var(--str-video__border-radius1);
+  border-radius: var(--str-video__border-radius-xs);
 }
 .str-video__call-participants-screen-view .str-video__call-participants-screen-view__participants-wrapper {
   flex: 1 1;
@@ -578,17 +368,7 @@
   width: 0.8rem;
   height: 0.8rem;
 }
-.str-video__call-participants-screen-view .str-video__screen-share {
-  min-height: 0;
-  object-fit: contain;
-}
-.str-video__call-participants-screen-view .str-video__video--wide {
-  width: 100%;
-  height: 100%;
-}
-.str-video__call-participants-screen-view .str-video__video--tall {
-  height: 100%;
-  width: 100%;
+.str-video__call-participants-screen-view .str-video__video--screen-share {
   object-fit: contain;
 }
 
@@ -600,6 +380,7 @@
   align-items: center;
   justify-items: center;
   height: 100%;
+  min-height: 0;
 }
 .str-video__call-participants-view.str-video__grid-1 {
   grid-template-columns: repeat(1, 1fr);
@@ -904,7 +685,7 @@
     --str-video__background-color1
   );
   --str-video__participant-list--border-radius: var(
-    --str-video__border-radius1
+    --str-video__border-radius-xs
   );
   --str-video__participant-list-header--color: var(--str-video__text-color1);
   --str-video__participant-list-header--title-count__color: var(
@@ -912,7 +693,7 @@
   );
   --str-video__participant-list-header__close-button--background-color: #121416;
   --str-video__participant-list-header__close-button--border-radius: var(
-    --str-video__border-radius1
+    --str-video__border-radius-xs
   );
   --str-video__participant-list-header__close-button-icon--background-color: #72767e;
 }
@@ -1048,7 +829,7 @@
   -webkit-mask-position: center;
   mask-size: contain;
   -webkit-mask-size: contain;
-  background-color: var(--str-video__danger-color1);
+  background-color: var(--str-video__danger-color);
 }
 .str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-camera {
   mask-image: var(--str-video__icon--camera);
@@ -1070,7 +851,7 @@
   -webkit-mask-position: center;
   mask-size: contain;
   -webkit-mask-size: contain;
-  background-color: var(--str-video__danger-color1);
+  background-color: var(--str-video__danger-color);
 }
 .str-video__participant-listing-item .str-video__participant-listing-item__media-indicator-group .str-video__participant-listing-item__icon-pinned {
   mask-image: var(--str-video__icon--pin);
@@ -1177,7 +958,9 @@
 }
 
 .str-video__call-recording-list__title {
-  font: var(--str-video__subtitle-medium-text);
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 
 .str-video__call-controls__button--icon-call-recordings {
@@ -1193,7 +976,7 @@
 }
 
 .str-video__call-recordings__toggle-button--active {
-  background-color: var(--str-video__text-color3);
+  background-color: var(--str-video__background-color7);
 }
 
 .str-video__refresh-button {
@@ -1202,7 +985,7 @@
   border-radius: 4px;
 }
 .str-video__refresh-button:hover {
-  background-color: var(--str-video__text-color3);
+  background-color: var(--str-video__background-color7);
 }
 .str-video__refresh-button:active {
   background-color: var(--str-video__background-color5);
@@ -1237,7 +1020,7 @@
   background-color: transparent;
 }
 .str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button:hover {
-  background-color: var(--str-video__text-color3);
+  background-color: var(--str-video__background-color7);
 }
 .str-video__call-recording-list-item__actions .str-video__call-recording-list-item__action-button:active {
   background-color: var(--str-video__background-color5);
@@ -1267,12 +1050,14 @@
 }
 
 .str-video__call-recording-list__listing .str-video__loading-indicator .str-video__loading-indicator-text {
-  font: var(--str-video__caption-text);
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 .str-video__call-stats {
   background-color: var(--str-video__background-color1);
-  border-radius: var(--str-video__border-radius1);
+  border-radius: var(--str-video__border-radius-xs);
   padding: 0.75rem;
   max-width: 400px;
   display: flex;
@@ -1298,7 +1083,7 @@
 }
 .str-video__call-stats .str-video__call-stats__card {
   background-color: var(--str-video__background-color2);
-  border-radius: var(--str-video__border-radius1);
+  border-radius: var(--str-video__border-radius-xs);
   width: calc(50% - var(--gap) / 2);
   padding: 0.5rem 0.5rem;
 }
@@ -1397,11 +1182,14 @@
   font-size: 1rem;
 }
 .str-video__device-settings__device-kind .str-video__device-settings__device-selector-title {
-  font: var(--str-video__subtitle-medium-text);
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25rem;
 }
 .str-video__device-settings__device-kind .str-video__device-settings__option {
   color: var(--str-video__text-color3);
-  font: var(--str-video__subtitle-text);
+  font-size: 1rem;
+  line-height: 1.25rem;
   border-radius: var(--str-video__border-radius-xxs);
   cursor: pointer;
   transition: all 0.3s ease-out;
@@ -1448,12 +1236,12 @@
   background-color: var(--str-video__text-color1);
 }
 .str-video__device-settings__button:hover, .str-video__device-settings__button:active {
-  background-color: var(--str-video__text-color3);
-  border-radius: var(--str-video__border-radius1);
+  background-color: var(--str-video__background-color7);
+  border-radius: var(--str-video__border-radius-xs);
 }
 
 .str-video__device-settings__button--active {
-  background-color: var(--str-video__text-color3);
+  background-color: var(--str-video__background-color7);
 }
 
 .str-video__loading-indicator {
@@ -1473,6 +1261,8 @@
   -webkit-mask-size: 1rem;
   background-color: var(--str-video__text-color2);
   animation: rotation 1s linear infinite;
+  width: 1rem;
+  height: 1rem;
 }
 
 @keyframes rotation {
@@ -1557,7 +1347,7 @@
 
 .str-video__notification {
   background-color: var(--str-video__background-color1);
-  border-radius: var(--str-video__border-radius1);
+  border-radius: var(--str-video__border-radius-xs);
   z-index: 100;
 }
 .str-video__notification .str-video__notification__icon {
@@ -1575,6 +1365,73 @@
   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--pending .str-video__call-panel__members-list {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.str-video__call-panel--pending .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--pending .str-video__call-panel__members-list .str-video__call-panel__member-box .str-video__avatar {
+  width: 80px;
+  height: 80px;
+}
+.str-video__call-panel--pending .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--pending .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--pending .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--pending .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--pending .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__permission-requests {
   background-color: var(--str-video__background-color1);
   border-radius: 8px;
@@ -1636,6 +1493,8 @@
   opacity: 1;
 }
 .str-video__reaction .str-video__reaction__emoji {
+  display: flex;
+  line-height: 1;
   font-size: 2.5rem;
 }
 
@@ -1763,6 +1622,10 @@
   display: flex;
   flex-direction: column;
 }
+.str-video__call .str-video {
+  background-color: var(--str-video__background-color2);
+  color: var(--str-video__text-color1);
+}
 
 .str-video__tooltip {
   display: flex;
@@ -1803,7 +1666,8 @@
   border-block-end: var(--str-video__tooltip--border-block-end);
   border-inline-start: var(--str-video__tooltip--border-inline-start);
   border-inline-end: var(--str-video__tooltip--border-inline-end);
-  font: var(--str-video__caption-text);
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 .str-video__tooltip::after {
   background-color: var(--str-video__tooltip-background-color);
@@ -1816,15 +1680,53 @@
   box-shadow: none;
 }
 
-.str-video__video--wide {
+.str-video__video {
+  object-fit: cover;
   width: 100%;
-  height: auto;
+  height: 100%;
+  border-radius: inherit;
 }
-
 .str-video__video--tall {
+  object-fit: contain;
+}
+.str-video__video--mirror {
+  transform: scaleX(-1);
+}
+
+.str-video__video-placeholder {
+  aspect-ratio: 4/3;
   height: 100%;
-  width: auto;
-  object-fit: contain !important;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.str-video__video-placeholder .str-video__video-placeholder__avatar {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+}
+.str-video__video-placeholder .str-video__video-placeholder__initials-fallback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+}
+
+.str-video__video-placeholder {
+  background: var(--str-video__background-color5);
+  border-radius: inherit;
+}
+.str-video__video-placeholder .str-video__video-placeholder__avatar {
+  border-radius: var(--str-video__border-radius-circle);
+}
+.str-video__video-placeholder .str-video__video-placeholder__initials-fallback {
+  background-color: var(--str-video__primary-color);
+  border-radius: var(--str-video__border-radius-circle);
+  font-size: 32px;
+  font-weight: 600;
+  text-transform: uppercase;
 }
 
 .str-video__video-preview-container {
@@ -1834,21 +1736,20 @@
   width: 500px;
   height: 375px;
 }
+.str-video__video-preview-container .str-video__video-preview {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
 .str-video__video-preview-container .str-video__loading-indicator__icon {
   height: 3rem;
   width: 3rem;
   mask-size: 3rem;
 }
-
-.str-video__base-video {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-.str-video__base-video.str-video__remote-video--mirror, .str-video__base-video.str-video__video-preview--mirror {
+.str-video__video-preview-container .str-video__video-preview--mirror {
   transform: scaleX(-1);
 }
-.str-video__base-video.str-video__video-preview--loading {
+.str-video__video-preview-container .str-video__video-preview--loading {
   display: none;
 }
 
@@ -1856,17 +1757,25 @@
   /* The font color applied inside the component */
   --str-video__video-preview-container--color: var(--str-video__text-color1);
   /* The background color of the component */
-  --str-video__video-preview-container--background-color: var(--str-video__background-color5);
+  --str-video__video-preview-container--background-color: var(
+    --str-video__background-color5
+  );
   /* The border radius used for the borders of the component */
-  --str-video__video-preview-container--border-radius: var(--str-video__border-radius-xs);
+  --str-video__video-preview-container--border-radius: var(
+    --str-video__border-radius-xs
+  );
   /* The border used for the borders of the component */
-  --str-video__video-preview-container--border-block-start: 4px solid var(--str-video__primary-color);
+  --str-video__video-preview-container--border-block-start: 4px solid
+    var(--str-video__primary-color);
   /* The border used for the borders of the component */
-  --str-video__video-preview-container--border-block-end: 4px solid var(--str-video__primary-color);
+  --str-video__video-preview-container--border-block-end: 4px solid
+    var(--str-video__primary-color);
   /* The border used for the borders of the component */
-  --str-video__video-preview-container--border-inline-start: 4px solid var(--str-video__primary-color);
+  --str-video__video-preview-container--border-inline-start: 4px solid
+    var(--str-video__primary-color);
   /* The border used for the borders of the component */
-  --str-video__video-preview-container--border-inline-end: 4px solid var(--str-video__primary-color);
+  --str-video__video-preview-container--border-inline-end: 4px solid
+    var(--str-video__primary-color);
 }
 
 .str-video__video-preview-container {
@@ -1881,96 +1790,45 @@
   overflow: hidden;
 }
 
-.str-video__participant-placeholder {
-  aspect-ratio: 4/3;
-  height: 100%;
+.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;
-}
-.str-video__participant-placeholder .str-video__participant-placeholder--avatar {
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-}
-.str-video__participant-placeholder .str-video__participant-placeholder--initials-fallback {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100px;
-  height: 100px;
-}
-
-.str-video__participant-placeholder {
-  background: var(--str-video__background-color5);
   border-radius: var(--str-video__border-radius-sm);
 }
-.str-video__participant-placeholder .str-video__participant-placeholder--avatar {
-  border-radius: var(--str-video__border-radius-circle);
-}
-.str-video__participant-placeholder .str-video__participant-placeholder--initials-fallback {
-  background-color: var(--str-video__primary-color);
-  border-radius: var(--str-video__border-radius-circle);
-  font-size: 32px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.str-video__participant,
-.str-video__participant-angular-host {
-  position: relative;
-  width: 100%;
-  max-width: 1280px;
-  min-height: 0;
-  max-height: 100%;
-  aspect-ratio: 4/3;
+.str-video__participant-view--speaking,
+.str-video__participant-view--angular-host--speaking {
+  outline: 2px solid var(--str-video__primary-color);
 }
-.str-video__participant .str-video__participant_details,
-.str-video__participant .str-video__call-controls__button,
-.str-video__participant-angular-host .str-video__participant_details,
-.str-video__participant-angular-host .str-video__call-controls__button {
+.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;
 }
-.str-video__participant:hover .str-video__participant_details,
-.str-video__participant:hover .str-video__call-controls__button,
-.str-video__participant-angular-host:hover .str-video__participant_details,
-.str-video__participant-angular-host:hover .str-video__call-controls__button {
+.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 > .str-video__call-controls__button,
-.str-video__participant-angular-host > .str-video__call-controls__button {
+.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;
-  z-index: 1;
   padding: 0.3rem;
 }
-.str-video__participant--speaking video,
-.str-video__participant--speaking .str-video__participant-placeholder,
-.str-video__participant-angular-host--speaking video,
-.str-video__participant-angular-host--speaking .str-video__participant-placeholder {
-  outline: 2px solid var(--str-video__primary-color);
-}
-.str-video__participant .str-video__video-container,
-.str-video__participant-angular-host .str-video__video-container {
-  position: relative;
-  height: 100%;
-  min-height: 0;
-  max-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.str-video__participant .str-video__video-container .str-video__remote-video,
-.str-video__participant-angular-host .str-video__video-container .str-video__remote-video {
-  border-radius: var(--str-video__border-radius2);
-  width: 100%;
-  object-fit: cover;
-  background: var(--str-video__text-color3);
-}
-.str-video__participant .str-video__participant_details,
-.str-video__participant-angular-host .str-video__participant_details {
+.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;
@@ -1978,9 +1836,9 @@
   align-items: center;
   gap: 0.3125rem;
 }
-.str-video__participant .str-video__participant_details .str-video__participant_name,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name {
-  border-radius: var(--str-video__border-radius1);
+.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;
@@ -1990,8 +1848,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--audio-muted,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--audio-muted {
+.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;
@@ -2000,8 +1858,8 @@
   mask-image: var(--str-video__icon--mic-off);
   -webkit-mask-image: var(--str-video__icon--mic-off);
 }
-.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--dominant_speaker,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--dominant_speaker {
+.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;
@@ -2016,8 +1874,8 @@
   mask-position: center;
   -webkit-mask-position: center;
 }
-.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--video-muted,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--video-muted {
+.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;
@@ -2026,8 +1884,8 @@
   mask-image: var(--str-video__icon--camera-off);
   -webkit-mask-image: var(--str-video__icon--camera-off);
 }
-.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--pinned,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--pinned {
+.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;
@@ -2044,8 +1902,8 @@
   mask-image: var(--str-video__icon--pin);
   -webkit-mask-image: var(--str-video__icon--pin);
 }
-.str-video__participant .str-video__participant_details .str-video__participant_name .str-video__participant_name--network-stats,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant_name .str-video__participant_name--network-stats {
+.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;
@@ -2055,27 +1913,27 @@
   cursor: pointer;
   margin-right: 0.625rem;
 }
-.str-video__participant .str-video__participant_details .str-video__participant__connection-quality,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant__connection-quality {
+.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 .str-video__participant_details .str-video__participant__connection-quality--poor,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant__connection-quality--poor {
+.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 .str-video__participant_details .str-video__participant__connection-quality--good,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant__connection-quality--good {
+.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 .str-video__participant_details .str-video__participant__connection-quality--excellent,
-.str-video__participant-angular-host .str-video__participant_details .str-video__participant__connection-quality--excellent {
+.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__paginated-grid-layout--wrapper {
+.str-video__paginated-grid-layout__wrapper {
   flex-grow: 1;
 }
 
@@ -2085,7 +1943,7 @@
   align-items: center;
   justify-content: space-between;
 }
-.str-video__paginated-grid-layout .str-video__paginated-grid-layout--group {
+.str-video__paginated-grid-layout .str-video__paginated-grid-layout__group {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -2095,20 +1953,20 @@
   margin: auto;
   width: 100%;
 }
-.str-video__paginated-grid-layout .str-video__paginated-grid-layout--group .str-video__participant {
+.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 {
+.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 {
+.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 {
+.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 {
+.str-video__speaker-layout__wrapper {
   flex-grow: 1;
   overflow-y: hidden;
 }
@@ -2122,65 +1980,69 @@
   gap: 1rem;
   padding-inline: 2px;
 }
-.str-video__speaker-layout .str-video__participant {
+.str-video__speaker-layout .str-video__participant-view {
   aspect-ratio: 16/9;
 }
-.str-video__speaker-layout .str-video__speaker-layout--spotlight {
+.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 {
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__participant-view {
   width: 100%;
   max-width: 110vh;
 }
-.str-video__speaker-layout .str-video__speaker-layout--spotlight .str-video__screen-share {
+.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__participant-view:has(.str-video__video--screen-share) {
   border-radius: unset;
+}
+.str-video__speaker-layout .str-video__speaker-layout__spotlight .str-video__video--screen-share {
   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 {
+.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 {
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper .str-video__speaker-layout--participants-bar-button-left {
+.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;
   z-index: 1;
 }
-.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper .str-video__speaker-layout--participants-bar-button-left .str-video__call-controls__button--icon {
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-left .str-video__call-controls__button--icon {
   width: 0.8rem;
   height: 0.8rem;
 }
-.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper .str-video__speaker-layout--participants-bar-button-right {
+.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;
   z-index: 1;
 }
-.str-video__speaker-layout .str-video__speaker-layout--participants-bar-buttons-wrapper .str-video__speaker-layout--participants-bar-button-right .str-video__call-controls__button--icon {
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-buttons-wrapper .str-video__speaker-layout__participants-bar--button-right .str-video__call-controls__button--icon {
   width: 0.8rem;
   height: 0.8rem;
 }
-.str-video__speaker-layout .str-video__speaker-layout--participants-bar-wrapper {
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.str-video__speaker-layout .str-video__speaker-layout--participants-bar-wrapper::-webkit-scrollbar {
+.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 {
+.str-video__speaker-layout .str-video__speaker-layout__participants-bar-wrapper .str-video__speaker-layout__participants-bar {
   display: flex;
   flex-direction: row;
   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 {
+.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;
@@ -2202,7 +2064,7 @@
 .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-color1);
+  background-color: var(--str-video__danger-color);
 }
 .str-video__icon--recording-off {
   mask-image: var(--str-video__icon--recording-off);
@@ -2259,6 +2121,10 @@
   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);
@@ -2344,7 +2210,7 @@
   height: 1.5rem;
   background-position: center;
   background-repeat: no-repeat;
-  background-image: var(--str-video__icon--network-quality);
+  background-image: var(--str-video__icon--stats);
   cursor: pointer;
 }