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

package/dist/css/styles.css

@@ -49,6 +49,8 @@
   --str-video__background-color6: #b4b7bb;
   --str-video__background-color7: #72767e;
   --str-video__overlay-color: rgba(39, 42, 48, 0.75);
+  --str-video__livestream-overlay-color: rgba(39, 42, 48, 0.25);
+  --str-video__livestream-overlay-color-hovered: rgba(39, 42, 48, 0.5);
   --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=");
@@ -65,9 +67,11 @@
   --str-video__icon--ellipsis: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4KCTxwYXRoCgkJZD0iTTM1MiAyNTZDMzUyIDIzOC4zIDM2Ni4zIDIyNCAzODQgMjI0QzQwMS43IDIyNCA0MTYgMjM4LjMgNDE2IDI1NkM0MTYgMjczLjcgNDAxLjcgMjg4IDM4NCAyODhDMzY2LjMgMjg4IDM1MiAyNzMuNyAzNTIgMjU2ek0xOTIgMjU2QzE5MiAyMzguMyAyMDYuMyAyMjQgMjI0IDIyNEMyNDEuNyAyMjQgMjU2IDIzOC4zIDI1NiAyNTZDMjU2IDI3My43IDI0MS43IDI4OCAyMjQgMjg4QzIwNi4zIDI4OCAxOTIgMjczLjcgMTkyIDI1NnpNOTYgMjU2Qzk2IDI3My43IDgxLjY3IDI4OCA2NCAyODhDNDYuMzMgMjg4IDMyIDI3My43IDMyIDI1NkMzMiAyMzguMyA0Ni4zMyAyMjQgNjQgMjI0QzgxLjY3IDIyNCA5NiAyMzguMyA5NiAyNTZ6IgoJLz4KPC9zdmc+Cg==");
   --str-video__icon--film-roll: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzQzLjY1NiA0NTEuMTA5QzQxMCA0MTEuNDM4IDQ1NC40MjIgMzM4LjkwNiA0NTQuNDIyIDI1NmMwLTEyNS40ODQtMTAxLjcxOS0yMjcuMjE5LTIyNy4yMDMtMjI3LjIxOUMxMDEuNzE5IDI4Ljc4MSAwIDEzMC41MTYgMCAyNTZzMTAxLjcxOSAyMjcuMjE5IDIyNy4yMTkgMjI3LjIxOUg1MTJWNDUxLjExSDM0My42NTZ6bS0yNS4xNzItMzA1LjIzNGMyMy41NDctMTMuNTk0IDUzLjY0MS01LjUzMSA2Ny4yMzQgMTguMDE2czUuNTMxIDUzLjY1Ni0xOC4wMTYgNjcuMjVjLTIzLjU0NyAxMy41NzgtNTMuNjQxIDUuNTE2LTY3LjIzNC0xOC4wMTYtMTMuNjA5LTIzLjU2Mi01LjUzLTUzLjY1NiAxOC4wMTYtNjcuMjV6bS0xOC4wMzEgMTUxLjgxM2MxMy42MDktMjMuNTQ3IDQzLjcwMy0zMS42MDkgNjcuMjUtMTguMDE2IDIzLjU0NyAxMy42MDkgMzEuNjA5IDQzLjcwMyAxOC4wMTYgNjcuMjVzLTQzLjY4OCAzMS42MDktNjcuMjUgMTguMDE2Yy0yMy41MzEtMTMuNTk0LTMxLjYxLTQzLjcwNC0xOC4wMTYtNjcuMjV6TTIyNy4yMTkgNzIuMzc1YzI3LjE4OCAwIDQ5LjIxOSAyMi4wMzEgNDkuMjE5IDQ5LjIxOXMtMjIuMDMxIDQ5LjI1LTQ5LjIxOSA0OS4yNS00OS4yNS0yMi4wNjMtNDkuMjUtNDkuMjUgMjIuMDYyLTQ5LjIxOSA0OS4yNS00OS4yMTl6TTI0OS45MzggMjU2YzAgMTIuNTYzLTEwLjE3MiAyMi43MTktMjIuNzE5IDIyLjcxOS0xMi41NjMgMC0yMi43MTktMTAuMTU2LTIyLjcxOS0yMi43MTlzMTAuMTU2LTIyLjcxOSAyMi43MTktMjIuNzE5YzEyLjU0NyAwIDIyLjcxOSAxMC4xNTcgMjIuNzE5IDIyLjcxOXpNNjguNzAzIDE2My44OTFjMTMuNTk0LTIzLjU0NyA0My43MDMtMzEuNjA5IDY3LjI1LTE4LjAxNnMzMS42MDkgNDMuNjg4IDE4LjAxNiA2Ny4yNWMtMTMuNTk0IDIzLjUzMS00My43MDMgMzEuNjA5LTY3LjI1IDE4LjAxNi0yMy41MzEtMTMuNTk0LTMxLjYxLTQzLjcwMy0xOC4wMTYtNjcuMjV6bTY3LjI2NiAyMDEuMDQ3Yy0yMy41NjMgMTMuNTk0LTUzLjY1NiA1LjUzMS02Ny4yNjYtMTguMDE2LTEzLjU3OC0yMy41NDctNS41MTYtNTMuNjU2IDE4LjAxNi02Ny4yNjYgMjMuNTQ3LTEzLjU5NCA1My42NTYtNS41MTYgNjcuMjUgMTguMDMxczUuNTMxIDUzLjY1Ny0xOCA2Ny4yNTF6bTQyIDI0LjI2NWMwLTI3LjE4OCAyMi4wNjMtNDkuMjM0IDQ5LjI1LTQ5LjIzNHM0OS4yMTkgMjIuMDQ3IDQ5LjIxOSA0OS4yMzQtMjIuMDMxIDQ5LjIzNC00OS4yMTkgNDkuMjM0LTQ5LjI1LTIyLjA0Ni00OS4yNS00OS4yMzR6Ii8+PC9zdmc+Cg==");
   --str-video__icon--filter: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSI+CiAgICA8cGF0aCBkPSJNMSAzLjc1QS43NS43NSAwIDAgMSAxLjc1IDNoMTIuNWEuNzUuNzUgMCAwIDEgMCAxLjVIMS43NUEuNzUuNzUgMCAwIDEgMSAzLjc1em0yLjUgNEEuNzUuNzUgMCAwIDEgNC4yNSA3aDcuNWEuNzUuNzUgMCAwIDEgMCAxLjVoLTcuNWEuNzUuNzUgMCAwIDEtLjc1LS43NXpNNi43NSAxMWEuNzUuNzUgMCAwIDAgMCAxLjVoMi41YS43NS43NSAwIDAgMCAwLTEuNWgtMi41eiIgZmlsbD0iY3VycmVudENvbG9yIi8+XAo8L3N2Zz4K");
+  --str-video__icon--fullscreen: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzNiAzNiIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBmaWxsPSJ3aGl0ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0ibSAxMCwxNiAyLDAgMCwtNCA0LDAgMCwtMiBMIDEwLDEwIGwgMCw2IDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjAsMTAgMCwyIDQsMCAwLDQgMiwwIEwgMjYsMTAgbCAtNiwwIDAsMCB6Ii8+CjxwYXRoIGQ9Im0gMjQsMjQgLTQsMCAwLDIgTCAyNiwyNiBsIDAsLTYgLTIsMCAwLDQgMCwwIHoiLz4KPHBhdGggZD0iTSAxMiwyMCAxMCwyMCAxMCwyNiBsIDYsMCAwLC0yIC00LDAgMCwtNCAwLDAgeiIvPgo8L3N2Zz4=");
   --str-video__icon--grid: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAzMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMzAuMzMxMSIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzMC4zMzExIDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMTYuMTA5NCIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNi4xMDk0IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMjMuMjIwNyIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAyMy4yMjA3IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOC45OTgwNSIgeT0iMTYiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4Ljk5ODA1IDE2KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMzAuMzMxMSIgeT0iOS43NzczNCIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDMwLjMzMTEgOS43NzczNCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjMwLjMzMTEiIHk9IjMuNTU0NjkiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAzMC4zMzExIDMuNTU0NjkpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIyMy4yMjA3IiB5PSI5Ljc3NzM0IiB3aWR0aD0iNC40NDQ0NCIgaGVpZ2h0PSI1LjMzMzMzIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMjMuMjIwNyA5Ljc3NzM0KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMjMuMjIwNyIgeT0iMy41NTQ2OSIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDIzLjIyMDcgMy41NTQ2OSkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjE2LjEwOTQiIHk9IjkuNzc3MzQiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNi4xMDk0IDkuNzc3MzQpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIxNi4xMDk0IiB5PSIzLjU1NDY5IiB3aWR0aD0iNC40NDQ0NCIgaGVpZ2h0PSI1LjMzMzMzIiByeD0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTYuMTA5NCAzLjU1NDY5KSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOC45OTgwNSIgeT0iOS43NzczNCIgd2lkdGg9IjQuNDQ0NDQiIGhlaWdodD0iNS4zMzMzMyIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDguOTk4MDUgOS43NzczNCkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjguOTk4MDUiIHk9IjMuNTU0NjkiIHdpZHRoPSI0LjQ0NDQ0IiBoZWlnaHQ9IjUuMzMzMzMiIHJ4PSIxIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA4Ljk5ODA1IDMuNTU0NjkpIiBmaWxsPSJ3aGl0ZSIvPgo8cmVjdCB4PSIxLjQ5ODA1IiB5PSIwLjUiIHdpZHRoPSIzMSIgaGVpZ2h0PSIyMyIgcng9IjIuNSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L3N2Zz4K");
   --str-video__icon--info-document: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE4LjUgMjNINC41QzMuNCAyMyAyLjUgMjIuMSAyLjUgMjFWN0g0LjVWMjFIMTguNVYyM1pNMTUuNSAxSDguNUM3LjQgMSA2LjUxIDEuOSA2LjUxIDNMNi41IDE3QzYuNSAxOC4xIDcuMzkgMTkgOC40OSAxOUgxOS41QzIwLjYgMTkgMjEuNSAxOC4xIDIxLjUgMTdWN0wxNS41IDFaTTE5LjUgMTdIOC41VjNIMTQuNjdMMTkuNSA3LjgzVjE3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTE0LjgwNjIgMTQuNTY5M0gxMi44MDYyTDEyLjgwNjIgOS41NjkzNEgxNC44MDYyTDE0LjgwNjIgMTQuNTY5M1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNC44OTAxIDYuNTczMjRDMTQuODkwMSA3LjE3MTkxIDE0LjQwNDggNy42NTcyMyAxMy44MDYyIDcuNjU3MjNDMTMuMjA3NSA3LjY1NzIzIDEyLjcyMjIgNy4xNzE5MSAxMi43MjIyIDYuNTczMjRDMTIuNzIyMiA1Ljk3NDU3IDEzLjIwNzUgNS40ODkyNiAxMy44MDYyIDUuNDg5MjZDMTQuNDA0OCA1LjQ4OTI2IDE0Ljg5MDEgNS45NzQ1NyAxNC44OTAxIDYuNTczMjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
   --str-video__icon--info-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExIDdoMnYyaC0yem0wIDRoMnY2aC0yem0xLTlDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThjLTQuNDEgMC04LTMuNTktOC04czMuNTktOCA4LTggOCAzLjU5IDggOC0zLjU5IDgtOCA4eiIvPjwvc3ZnPg==");
+  --str-video__icon--livestream-viewers: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg2OTdfMjU1NykiPgo8cGF0aCBkPSJNOC4zNzc0NCA0LjU2MjVDMTAuNzQ2MiA0LjU2MjUgMTIuODU4NyA1Ljg5Mzc1IDEzLjg4OTkgOEMxMi44NTg3IDEwLjEwNjIgMTAuNzQ2MiAxMS40Mzc1IDguMzc3NDQgMTEuNDM3NUM2LjAwODY5IDExLjQzNzUgMy44OTYxOSAxMC4xMDYyIDIuODY0OTQgOEMzLjg5NjE5IDUuODkzNzUgNi4wMDg2OSA0LjU2MjUgOC4zNzc0NCA0LjU2MjVaTTguMzc3NDQgMy4zMTI1QzUuMjUyNDQgMy4zMTI1IDIuNTgzNjkgNS4yNTYyNSAxLjUwMjQ0IDhDMi41ODM2OSAxMC43NDM4IDUuMjUyNDQgMTIuNjg3NSA4LjM3NzQ0IDEyLjY4NzVDMTEuNTAyNCAxMi42ODc1IDE0LjE3MTIgMTAuNzQzOCAxNS4yNTI0IDhDMTQuMTcxMiA1LjI1NjI1IDExLjUwMjQgMy4zMTI1IDguMzc3NDQgMy4zMTI1Wk04LjM3NzQ0IDYuNDM3NUM5LjIzOTk0IDYuNDM3NSA5LjkzOTk0IDcuMTM3NSA5LjkzOTk0IDhDOS45Mzk5NCA4Ljg2MjUgOS4yMzk5NCA5LjU2MjUgOC4zNzc0NCA5LjU2MjVDNy41MTQ5NCA5LjU2MjUgNi44MTQ5NCA4Ljg2MjUgNi44MTQ5NCA4QzYuODE0OTQgNy4xMzc1IDcuNTE0OTQgNi40Mzc1IDguMzc3NDQgNi40Mzc1Wk04LjM3NzQ0IDUuMTg3NUM2LjgyNzQ0IDUuMTg3NSA1LjU2NDk0IDYuNDUgNS41NjQ5NCA4QzUuNTY0OTQgOS41NSA2LjgyNzQ0IDEwLjgxMjUgOC4zNzc0NCAxMC44MTI1QzkuOTI3NDQgMTAuODEyNSAxMS4xODk5IDkuNTUgMTEuMTg5OSA4QzExLjE4OTkgNi40NSA5LjkyNzQ0IDUuMTg3NSA4LjM3NzQ0IDUuMTg3NVoiIGZpbGw9IiNGQ0ZDRkMiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84Njk3XzI1NTciPgo8cmVjdCB4PSIwLjg3NzQ0MSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
   --str-video__icon--loading: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMSAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzAuOTIxMyAxNUMzMC45MjEzIDIzLjI4NDMgMjQuMjA1NiAzMCAxNS45MjEzIDMwQzEwLjcxNTQgMzAgNi4xMjg5OSAyNy4zNDggMy40MzkyMSAyMy4zMjE0TDUuMTAzNDkgMjIuMjExOUM3LjQzNDYzIDI1LjcwMTYgMTEuNDA5NiAyOCAxNS45MjEzIDI4QzIzLjEwMSAyOCAyOC45MjEzIDIyLjE3OTcgMjguOTIxMyAxNUMyOC45MjEzIDcuODIwMyAyMy4xMDEgMiAxNS45MjEzIDJMMTUuOTIxMyAwQzI0LjIwNTYgMCAzMC45MjEzIDYuNzE1NzMgMzAuOTIxMyAxNVoiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMykiLz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xODYwXzExMDYyMyIgeDE9IjMuNDM5MjEiIHkxPSIwIiB4Mj0iMy40MzkyMSIgeTI9IjMwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLXNlbWl0cmFuc3BhcmVudCIgc3RvcC1vcGFjaXR5PSIwLjAxIi8+CiAgICAgICAgICAgIDxzdG9wIGlkPSJzdG9wLW9wYXF1ZSIgb2Zmc2V0PSIxIiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+Cjwvc3ZnPg==");
   --str-video__icon--magnifier-glass: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04LjQ4NDkxIDcuODYwM0g3Ljk1NTk3TDcuNzY4NSA3LjY3OTUyQzguNTcxOTUgNi43NDIxNiA4Ljk4NzA2IDUuNDYzMzQgOC43NTk0MiA0LjEwNDE4QzguNDQ0NzMgMi4yNDI4NSA2Ljg5MTQgMC43NTY0NzQgNS4wMTY2OSAwLjUyODgzQzIuMTg0NTMgMC4xODA2NjkgLTAuMTk5MDMxIDIuNTY0MjMgMC4xNDkxMyA1LjM5NjM5QzAuMzc2Nzc0IDcuMjcxMSAxLjg2MzE1IDguODI0NDMgMy43MjQ0OCA5LjEzOTEyQzUuMDgzNjQgOS4zNjY3NiA2LjM2MjQ2IDguOTUxNjUgNy4yOTk4MiA4LjE0ODJMNy40ODA2IDguMzM1NjdWOC44NjQ2MUwxMC4zMjYxIDExLjcxMDJDMTAuNjAwNyAxMS45ODQ3IDExLjA0OTIgMTEuOTg0NyAxMS4zMjM4IDExLjcxMDJDMTEuNTk4MyAxMS40MzU2IDExLjU5ODMgMTAuOTg3IDExLjMyMzggMTAuNzEyNUw4LjQ4NDkxIDcuODYwM1pNNC40Njc2NiA3Ljg2MDNDMi44MDA1MSA3Ljg2MDMgMS40NTQ3MyA2LjUxNDUyIDEuNDU0NzMgNC44NDczNkMxLjQ1NDczIDMuMTgwMjEgMi44MDA1MSAxLjgzNDQzIDQuNDY3NjYgMS44MzQ0M0M2LjEzNDgyIDEuODM0NDMgNy40ODA2IDMuMTgwMjEgNy40ODA2IDQuODQ3MzZDNy40ODA2IDYuNTE0NTIgNi4xMzQ4MiA3Ljg2MDMgNC40Njc2NiA3Ljg2MDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
   --str-video__icon--mic: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE0Ljg5NDdDMTMuODk3MSAxNC44OTQ3IDE1LjQyODYgMTMuMzQzMiAxNS40Mjg2IDExLjQyMTFWNC40NzM2OEMxNS40Mjg2IDIuNTUxNTggMTMuODk3MSAxIDEyIDFDMTAuMTAyOSAxIDguNTcxNDMgMi41NTE1OCA4LjU3MTQzIDQuNDczNjhWMTEuNDIxMUM4LjU3MTQzIDEzLjM0MzIgMTAuMTAyOSAxNC44OTQ3IDEyIDE0Ljg5NDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTcuNzE0MyAxMS40MjExQzE3LjcxNDMgMTQuNjE2OCAxNS4xNTQzIDE3LjIxMDUgMTIgMTcuMjEwNUM4Ljg0NTcxIDE3LjIxMDUgNi4yODU3MSAxNC42MTY4IDYuMjg1NzEgMTEuNDIxMUg0QzQgMTUuNTA4NCA2Ljk4Mjg2IDE4Ljg2NjMgMTAuODU3MSAxOS40MzM3VjIzSDEzLjE0MjlWMTkuNDMzN0MxNy4wMTcxIDE4Ljg2NjMgMjAgMTUuNTA4NCAyMCAxMS40MjExSDE3LjcxNDNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
@@ -289,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;
@@ -581,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;
@@ -960,54 +1207,206 @@
   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;
-  -webkit-mask-size: 1rem;
-  background-color: var(--str-video__text-color2);
-  animation: rotation 1s linear infinite;
-  width: 1rem;
-  height: 1rem;
+.str-video__icon--chat {
+  mask-image: var(--str-video__icon--chat);
+  -webkit-mask-image: var(--str-video__icon--chat);
 }
-
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.str-video__icon--reactions {
+  -webkit-mask-image: var(--str-video__icon--reactions);
+  mask-image: var(--str-video__icon--reactions);
 }
-.str-video__menu-container {
-  z-index: 2;
+.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__menu-container {
-  box-shadow: 0px 0px 5px var(--str-video__background-color1);
+.str-video__icon--recording-off {
+  mask-image: var(--str-video__icon--recording-off);
+  -webkit-mask-image: var(--str-video__icon--recording-off);
 }
-
-.str-video__generic-menu {
-  list-style: none;
-  margin: unset;
-  padding: 5px;
-  border-radius: var(--str-video__border-radius-xs);
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
+.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__generic-menu .str-video__generic-menu--item {
-  display: flex;
+.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;
+  width: 1rem;
+  height: 1rem;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.str-video__menu-container {
+  z-index: 2;
+}
+
+.str-video__menu-container {
+  box-shadow: 0px 0px 5px var(--str-video__background-color1);
+}
+
+.str-video__generic-menu {
+  list-style: none;
+  margin: unset;
+  padding: 5px;
+  border-radius: var(--str-video__border-radius-xs);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.str-video__generic-menu .str-video__generic-menu--item {
+  display: flex;
 }
 .str-video__generic-menu .str-video__generic-menu--item button {
   all: unset;
@@ -1081,71 +1480,148 @@
   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;
+  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__avatar {
-  width: 80px;
-  height: 80px;
+.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__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-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;
-  bottom: 10%;
-  padding: 0.125rem 0.375rem;
+  top: 0.875rem;
+  right: 0.875rem;
+  padding: 0.3rem;
 }
-.str-video__call-panel--ringing .str-video__pending-call-controls {
+.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;
-  gap: 0.675rem;
+  align-items: center;
+  gap: 0.3125rem;
 }
-
-.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 .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__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__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__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__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__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__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 {
@@ -1209,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;
@@ -1494,485 +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__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;