Merge pull request #10371 from KDSBrowne/2.3-remove-css-variable-duplicates

Fix duplicate css variables being loaded

bigbluebutton-html5/imports/ui/components/actions-bar/captions/reader-menu/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/components/modal/simple/styles";
 @import "/imports/ui/stylesheets/mixins/focus";
 

bigbluebutton-html5/imports/ui/components/actions-bar/create-breakout-room/styles.scss

@@ -1,4 +1,5 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
+@import "/imports/ui/stylesheets/variables/placeholders";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 
 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
@@ -36,8 +37,7 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
 }
 
 .content {
-  display: flex;
-  flex-direction: column;
+  @extend %flex-column;
 }
 
 .labelText {
@@ -160,7 +160,7 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
 }
 
 .roomUserItem {
-  margin: 0;
+  @extend %no-margin;
   padding: .25rem 0 .25rem .25rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -181,14 +181,13 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
 /* mobile */
 
 .listContainer {
-  display: flex;
+  @extend %flex-column;
   justify-content: flex-start;
-  flex-direction: column;
 }
 
 .itemTitle {
+  @extend %no-margin;
   color: var(--color-blue-light);
-  margin: 0;
 }
 
 .roomItem {
@@ -332,8 +331,7 @@ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-i
 }
 
 .checkBoxesContainer {
-  display: flex;
-  flex-direction: row;
+  @extend %flex-row;
   margin-top: 1rem;
 }
 

bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss

@@ -1,11 +1,6 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/components/modal/simple/styles";
 
-:root {
-  --mobile-swap-offset: 3.5rem;
-  --min-modal-height: 20rem;
-}
-
 .modal {
   @extend .modal;
   padding: var(--jumbo-padding-y);

bigbluebutton-html5/imports/ui/components/activity-check/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 .activityModalContent {
   flex-direction: column;
   flex-grow: 1;

bigbluebutton-html5/imports/ui/components/app/styles.scss

@@ -1,7 +1,4 @@
 @import "/imports/ui/stylesheets/variables/_all";
-@import "/imports/ui/stylesheets/variables/general";
-@import "/imports/ui/stylesheets/variables/palette";
-@import "/imports/ui/stylesheets/variables/typography";
 @import '/imports/ui/stylesheets/mixins/_indicators';
 
 :root {
@@ -14,37 +11,34 @@
 }
 
 .main {
+  @extend %flex-column;
   position: relative;
   height: 100%;
-  display: flex;
-  flex-direction: column;
 }
 
 .navbar {
   position: relative;
   text-align: center;
-
   font-size: 1.5rem;
   padding: var(--bars-padding) var(--bars-padding) 0 var(--bars-padding);
   height: 7rem;
 }
 
 .wrapper {
+  @extend %flex-column;
   position: relative;
-  display: flex;
   flex: 1;
-  flex-direction: column;
   overflow: hidden;
 
   @include mq($medium-up) {
-    flex-direction: row;
+    flex-flow: row;
   }
 }
 
 %full-page {
   position: absolute;
   display: flex;
-  flex-direction: column;
+  flex-flow: column;
   overflow-y: auto;
   overflow-x: hidden;
 
@@ -106,7 +100,7 @@
 .userList {
   @extend %full-page;
   @extend %text-elipsis;
-  @include highContrastOutline();
+  @extend %highContrastOutline;
   outline-style: solid;
   z-index: 3;
   overflow: visible;
@@ -143,7 +137,7 @@
 .captions,
 .chat {
   @extend %full-page;
-  @include highContrastOutline();
+  @extend %highContrastOutline;
   outline-style: solid;
   order: 2;
   height: 100%;

bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/components/actions-bar/styles.scss";
 
 .container {

bigbluebutton-html5/imports/ui/components/audio/audio-dial/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 :root {
   --audioDial-font-size: 2rem;
  }

bigbluebutton-html5/imports/ui/components/audio/audio-modal/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/components/modal/simple/styles";
 
 :root {

bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.scss

@@ -1,5 +1,6 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import '/imports/ui/stylesheets/mixins/_indicators';
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .col,
 .formWrapper{
@@ -119,11 +120,11 @@
   padding: .4rem;
 
   &:hover {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
   }
 
   &:focus {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     outline-style: solid;
   }
 }

bigbluebutton-html5/imports/ui/components/audio/audio-test/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 .testAudioBtn {
   --hover-color: #0c5cb2;
   margin: 0 !important;

bigbluebutton-html5/imports/ui/components/audio/autoplay/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 .autoplayPrompt {
   margin-top: auto;
   margin-bottom: auto;

bigbluebutton-html5/imports/ui/components/audio/echo-test/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 
 .echoTest {
   margin-top: auto;

bigbluebutton-html5/imports/ui/components/audio/help/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 
 :root {
   --help-err-height: 10rem;

bigbluebutton-html5/imports/ui/components/audio/permissions-overlay/styles.scss

@@ -1,5 +1,3 @@
-@import "../../../stylesheets/variables/_all";
-
 :root {
   --position-left-edge: 60%;
   --position-bottom-edge: 5%;

bigbluebutton-html5/imports/ui/components/banner-bar/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .bannerTextColor {
   @extend %text-elipsis;

bigbluebutton-html5/imports/ui/components/breakout-join-confirmation/styles.scss

@@ -1,5 +1,3 @@
-@import "../../stylesheets/variables/_all";
-
 .selectParent {
   display: flex;
   flex-direction: column;

bigbluebutton-html5/imports/ui/components/breakout-room/styles.scss

@@ -1,7 +1,7 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
-@import "/imports/ui/components/user-list/styles";
-@import "/imports/ui/components/user-list/user-list-content/styles";
+@import "/imports/ui/stylesheets/mixins/focus";
+@import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .panel {
   @include scrollbox-vertical();
@@ -162,10 +162,29 @@
 }
 
 .breakoutColumn {
-  @extend .userListColumn;
+  display: flex;
+  flex-flow: column;
+  min-height: 0;
+  flex-grow: 1;
 }
 
 .breakoutScrollableList {
-  @extend .scrollableList;
+  @include elementFocus(var(--list-item-bg-hover));
+  @include scrollbox-vertical(var(--user-list-bg));
+  @extend %highContrastOutline;
+
+  &:focus-within,
+  &:focus {
+    outline-style: solid;
+  }
+
+  &:active {
+    box-shadow: none;
+    border-radius: none;
+  }
+
+  overflow-x: hidden;
+  outline-width: 1px !important;
+  outline-color: transparent !important;
   background: none;
 }

bigbluebutton-html5/imports/ui/components/button/styles.scss

@@ -1,5 +1,5 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 /* Base
  * ==========
@@ -63,13 +63,13 @@
 
   &:hover,
   &:focus {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     text-decoration: none;
   }
 
   &:active,
   &:focus {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     outline-style: solid;
   }
 
@@ -105,7 +105,7 @@
 
   &:focus,
   &:hover {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
   }
 
   &:focus {
@@ -116,7 +116,7 @@
     &:focus {
       span:first-of-type::before {
         border-radius: 50%;
-        @include highContrastOutline();
+        @extend %highContrastOutline;
         outline-style: solid;
       }
     }

bigbluebutton-html5/imports/ui/components/captions/pad/styles.scss

@@ -1,5 +1,6 @@
 @import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
   --speech-results-width: 22.3rem;

bigbluebutton-html5/imports/ui/components/captions/writer-menu/styles.scss

@@ -1,6 +1,6 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/components/modal/simple/styles";
 @import "/imports/ui/stylesheets/mixins/focus";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .header {
   margin: 0;
@@ -46,11 +46,11 @@
   padding: 1px;
 
   &:hover {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
   }
 
   &:focus {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     outline-style: solid;
   }
 }

bigbluebutton-html5/imports/ui/components/chat/chat-dropdown/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 .btn {
   --icon-offset: -.4em;
   --square-side-length: 1.56rem;

bigbluebutton-html5/imports/ui/components/chat/message-form/styles.scss

@@ -1,6 +1,6 @@
 @import "/imports/ui/stylesheets/mixins/focus";
 @import "/imports/ui/stylesheets/mixins/_indicators";
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
   --max-chat-input-msg-height: .93rem;
@@ -78,14 +78,10 @@
     background-color: rgba(167,179,189,0.25);
   }
 
-  &:hover {
-    @include highContrastOutline();
-  }
-
+  &:hover,
   &:active,
   &:focus {
-    @include highContrastOutline();
-    outline-style: solid;
+    @extend %highContrastOutline;
   }
 }
 

bigbluebutton-html5/imports/ui/components/chat/message-list/message-list-item/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
   --systemMessage-background-color: #F9FBFC;

bigbluebutton-html5/imports/ui/components/chat/message-list/styles.scss

@@ -1,5 +1,5 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .messageListWrapper {
   display: flex;
@@ -33,6 +33,7 @@
   right: 0 var(--md-padding-x) 0 0;
   padding-top: 0;
   width: 100%;
+  outline-style: none;
 
   [dir="rtl"] & {
     margin: 0 0 0 auto;

bigbluebutton-html5/imports/ui/components/chat/styles.scss

@@ -1,5 +1,6 @@
 @import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
   --toast-content-width: 98%; 

bigbluebutton-html5/imports/ui/components/checkbox/styles.scss

@@ -1,5 +1,3 @@
-@import "../../stylesheets/variables/_all";
-
 .input {
   border: 0;
   clip: rect(0 0 0 0);

bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.scss

@@ -1,13 +1,5 @@
-@import '/imports/ui/stylesheets/mixins/focus';
-@import '/imports/ui/stylesheets/variables/_all';
 @import "/imports/ui/components/modal/simple/styles";
 
-:root {
-  --modal-margin: 3rem;
-  --title-position-left: 2.2rem;
-  --closeBtn-position-left: 2.5rem;
-}
-
 .title {
   left: var(--title-position-left);
   right: auto;

bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss

@@ -1,5 +1,6 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import '/imports/ui/stylesheets/mixins/_indicators';
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 %list {
   list-style: none;
@@ -81,7 +82,7 @@
 
   &:hover,
   &:focus {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     cursor: pointer;
     background-color: var(--color-primary);
     color: var(--color-white);

bigbluebutton-html5/imports/ui/components/dropdown/styles.scss

@@ -1,6 +1,7 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 @import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
   --dropdown-bg: var(--color-white);
@@ -23,7 +24,7 @@
 }
 
 .content {
-  @include highContrastOutline();
+  @extend %highContrastOutline;
   outline-style: solid;
   z-index: 9999;
   position: absolute;

bigbluebutton-html5/imports/ui/components/end-meeting-confirmation/styles.scss

@@ -1,11 +1,5 @@
-@import '/imports/ui/stylesheets/mixins/focus';
-@import '/imports/ui/stylesheets/variables/_all';
 @import "/imports/ui/components/modal/simple/styles";
 
-:root {
-  --description-margin: 3.5rem;
-}
-
 .title {
   color: var(--color-gray-dark);
   font-weight: var(--headings-font-weight);

bigbluebutton-html5/imports/ui/components/error-screen/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/palette";
-
 .background {
   position: fixed;
   display: flex;

bigbluebutton-html5/imports/ui/components/external-video-player/modal/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/components/modal/simple/styles";
 @import "/imports/ui/stylesheets/mixins/focus";
 

bigbluebutton-html5/imports/ui/components/external-video-player/styles.scss

@@ -1,6 +1,3 @@
-@import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/variables/_all";
-
 .videoPlayer iframe {
   display: flex;
   flex-flow: column;
@@ -24,5 +21,4 @@
   vertical-align: middle;
   text-align: center;
   pointer-events: none;
-
 }

bigbluebutton-html5/imports/ui/components/fallback-errors/fallback-presentation/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/palette";
-
 .background {
   display: flex;
   flex-flow: column;

bigbluebutton-html5/imports/ui/components/fullscreen-button/styles.scss

@@ -1,5 +1,3 @@
-@import '/imports/ui/stylesheets/variables/_all';
-
 .wrapper {
   position: absolute;
   right: 0;

bigbluebutton-html5/imports/ui/components/loading-screen/styles.scss

@@ -1,15 +1,6 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 /* Variables
  * ==========
  */
-
-:root {
-  --loader-bg: var(--color-gray-dark);
-  --loader-bullet: var(--color-white);
-  --loader-message-color: var(--color-white);
-}
-
 .background {
   position: fixed;
   display: flex;

bigbluebutton-html5/imports/ui/components/lock-viewers/styles.scss

@@ -1,13 +1,5 @@
-@import '/imports/ui/stylesheets/mixins/focus';
-@import '/imports/ui/stylesheets/variables/_all';
 @import "/imports/ui/components/modal/simple/styles";
 
-:root {
-  --modal-margin: 3rem;
-  --title-position-left: 2.2rem;
-  --closeBtn-position-left: 2.5rem;
-}
-
 .title {
   left: var(--title-position-left);
   right: auto;

bigbluebutton-html5/imports/ui/components/media/autoplay-overlay/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 .autoplayOverlayContent {
   text-align: center;
   margin-top: 8px;

bigbluebutton-html5/imports/ui/components/media/styles.scss

@@ -1,7 +1,3 @@
-@import "../../stylesheets/variables/_all";
-@import "../../stylesheets/variables/video";
-@import "../video-provider/video-list/styles";
-
 $content-order: 2;
 $before-content-order: 1;
 $after-content-order: 3;

bigbluebutton-html5/imports/ui/components/meeting-ended/rating/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 
 .starRating {
   font-family: 'bbb-icons' !important;

bigbluebutton-html5/imports/ui/components/meeting-ended/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 
 .parent {
   height: 100%;

bigbluebutton-html5/imports/ui/components/modal/base/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 
 .modal {

bigbluebutton-html5/imports/ui/components/modal/fullscreen/styles.scss

@@ -1,4 +1,5 @@
-@import "../../../stylesheets/variables/_all";
+@import "../../../stylesheets/variables/breakpoints";
+@import "/imports/ui/stylesheets/variables/placeholders";
 @import "/imports/ui/stylesheets/mixins/_indicators";
 
 :root {
@@ -7,7 +8,7 @@
 }
 
 .modal {
-  @include highContrastOutline();
+  @extend %highContrastOutline;
   outline-style: solid;
   display: flex;
   flex-direction: column;

bigbluebutton-html5/imports/ui/components/modal/remove-user/styles.scss

@@ -1,7 +1,3 @@
-@import "/imports/ui/components/user-list/styles.scss";
-@import "/imports/ui/stylesheets/variables/_all";
-@import '/imports/ui/stylesheets/mixins/_indicators';
-@import '/imports/ui/stylesheets/mixins/focus';
 @import "/imports/ui/components/modal/simple/styles";
 
 :root {

bigbluebutton-html5/imports/ui/components/modal/simple/styles.scss

@@ -1,9 +1,9 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 @import "../base/styles";
 
 .modal {
-  @include highContrastOutline();
+  @extend %highContrastOutline;
   outline-style: solid;
   display: flex;
   flex-direction: column;

bigbluebutton-html5/imports/ui/components/muted-alert/styles.scss

@@ -1,4 +1,4 @@
-@import "../../stylesheets/variables/_all";
+@import "../../stylesheets/variables/breakpoints";
 
 .muteWarning {
   position: absolute;

bigbluebutton-html5/imports/ui/components/nav-bar/recording-indicator/styles.scss

@@ -1,6 +1,5 @@
-@import "../../../stylesheets/variables/_all";
 @import '/imports/ui/stylesheets/mixins/_indicators';
-@import "../../../stylesheets/variables/typography";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .visuallyHidden {
   position: absolute;
@@ -99,13 +98,13 @@
 
 .recordingIndicator {
   &:hover {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
   }
 
   &:active,
   &:focus,
   &:focus-within {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     outline-style: solid;
   }
 }

bigbluebutton-html5/imports/ui/components/nav-bar/styles.scss

@@ -1,4 +1,4 @@
-@import "../../stylesheets/variables/_all";
+@import "../../stylesheets/variables/breakpoints";
 
 :root {
   --mobile-nav-height: 5rem;

bigbluebutton-html5/imports/ui/components/nav-bar/talking-indicator/styles.scss

@@ -1,6 +1,6 @@
-@import "../../../stylesheets/variables/_all";
-@import "../../../stylesheets/variables/typography";
-@import "../../../stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/breakpoints";
+@import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
   --spoke-opacity: .5;
@@ -45,9 +45,9 @@
 }
 
 .talker {
+  @extend %highContrastOutline;
   flex: 0 0 auto;
-  @include highContrastOutline();
-  color: white;
+  color: var(--color-white);
   font-weight: var(--talker-font-weight);
   border-radius: var(--talker-border-radius) var(--talker-border-radius);
   font-size: var(--font-size-base);

bigbluebutton-html5/imports/ui/components/note/styles.scss

@@ -1,5 +1,6 @@
 @import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/placeholders";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 
 .note {
   background-color: var(--color-white);

bigbluebutton-html5/imports/ui/components/notifications-bar/styles.scss

@@ -1,5 +1,3 @@
-@import "../../stylesheets/variables/_all";
-
 :root {
   --nb-default-color: var(--color-gray);
   --nb-default-bg: var(--color-white);

bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 :root {
   --poll-stats-border-color: #d4d9df;
   --poll-stats-option-width: 4em;

bigbluebutton-html5/imports/ui/components/poll/styles.scss

@@ -1,6 +1,6 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/focus";
 @import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
     --poll-column-amount: 2;
@@ -188,7 +188,7 @@
  
     &:hover,
     &:focus {
-        @include highContrastOutline();
+        @extend %highContrastOutline;
     }
 
     &:focus {

bigbluebutton-html5/imports/ui/components/polling/styles.scss

@@ -1,4 +1,4 @@
-@import "../../stylesheets/variables/_all";
+@import "../../stylesheets/variables/breakpoints";
 
 :root {
   --col-amount: 2;

bigbluebutton-html5/imports/ui/components/presentation/default-content/styles.scss

@@ -1,4 +1,4 @@
-@import "../../../stylesheets/variables/_all";
+@import "../../../stylesheets/variables/breakpoints";
 
 .contentRatio {
   position: relative;

bigbluebutton-html5/imports/ui/components/presentation/download-presentation-button/styles.scss

@@ -1,5 +1,3 @@
-@import '/imports/ui/stylesheets/variables/_all';
-
 .wrapper {
   position: absolute;
   left: 0;

bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss

@@ -1,5 +1,5 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
   --whiteboard-toolbar-padding-sm: .3rem; 
@@ -163,11 +163,11 @@
   }
   
   &:hover {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
   }
 
   &:focus {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     outline-style: solid;
   }
 }

bigbluebutton-html5/imports/ui/components/presentation/presentation-uploader/styles.scss

@@ -1,5 +1,6 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
+@import "/imports/ui/stylesheets/variables/placeholders";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 
 :root {
   --uploadIconSize: 2.286rem;

bigbluebutton-html5/imports/ui/components/presentation/styles.scss

@@ -1,12 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-@import "/imports/ui/components/whiteboard/whiteboard-toolbar/styles";
-
-:root {
-  --innerToastWidth: 17rem;
-  --iconWrapperSize: 2rem;
-  --toast-icon-side: 40px;
-}
-
 .enter {
   opacity: 0.01;
 }

bigbluebutton-html5/imports/ui/components/recording/styles.scss

@@ -1,11 +1,5 @@
-@import '/imports/ui/stylesheets/mixins/focus';
-@import '/imports/ui/stylesheets/variables/_all';
 @import "/imports/ui/components/modal/simple/styles";
 
-:root {
-  --description-margin: 3.5rem;
-}
-
 .title {
   color: var(--color-gray-dark);
   font-weight: var(--headings-font-weight);

bigbluebutton-html5/imports/ui/components/screenshare/styles.scss

@@ -1,4 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/components/media/styles";
 
 .connecting {

bigbluebutton-html5/imports/ui/components/settings/styles.scss

@@ -1,8 +1,8 @@
-@import "../../stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .tabs {
-  display: flex;
-  flex-flow: row;
+  @extend %flex-row;
   justify-content: flex-start;
   @include mq($small-only) {
     width: 100%;
@@ -11,11 +11,10 @@
 }
 
 .tabList {
-  display: flex;
-  flex-flow: column;
+  @extend %flex-column;
+  @extend %no-margin;
   border: none;
   padding: 0;
-  margin: 0;
   width: calc(100% / 3);
 
   @include mq($small-only) {
@@ -36,9 +35,8 @@
 }
 
 .tabSelector {
+  @extend %flex-row;
   font-size: 0.9rem;
-  display: flex;
-  flex-flow: row;
   flex: 0 0 auto;
   justify-content: flex-start;
   border: none !important;

bigbluebutton-html5/imports/ui/components/settings/submenus/styles.scss

@@ -1,7 +1,7 @@
 @import '/imports/ui/stylesheets/mixins/focus';
 @import '/imports/ui/stylesheets/mixins/_indicators';
-@import '/imports/ui/stylesheets/variables/_all';
 @import '/imports/ui/components/loading-screen/styles';
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .title {
   color: var(--color-gray-dark);
@@ -84,13 +84,9 @@
   height: 1.75rem;
   padding: 1px;
 
-  &:hover {
-    @include highContrastOutline();
-  }
-
+  &:hover,
   &:focus {
-    @include highContrastOutline();
-    outline-style: solid;
+    @extend %highContrastOutline;
   }
 }
 

bigbluebutton-html5/imports/ui/components/shortcut-help/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 .shortcutTable,
 .keyCell,
 .descCell,

bigbluebutton-html5/imports/ui/components/status-notifier/styles.scss

@@ -1,11 +1,8 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 :root {
-  --iconWrapperSize: 40px;
-  --innerToastWidth: 17rem;
   --toast-margin: .5rem;
-  --toast-icon-side: 40px;
   --avatar-side: 34px;
   --avatar-wrapper-offset: 14px;
   --avatar-inset: -7px;
@@ -75,7 +72,7 @@
 
 .avatarsExtra,
 .avatar {
-  @include highContrastOutline();
+  @extend %highContrastOutline;
   width: var(--avatar-side);
   height: var(--avatar-side);
   color: var(--color-white);

bigbluebutton-html5/imports/ui/components/switch/styles.scss

@@ -1,13 +1,14 @@
 @import '/imports/ui/stylesheets/mixins/_indicators';
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .switch {
     &:hover {
-        @include highContrastOutline();
+        @extend %highContrastOutline;
     }
 
     &:focus,
     &:focus-within {
-        @include highContrastOutline();
+        @extend %highContrastOutline;
         outline-style: solid;
     }
 }

bigbluebutton-html5/imports/ui/components/toast/styles.scss

@@ -1,4 +1,4 @@
-@import "../../stylesheets/variables/_all";
+@import "../../stylesheets/variables/breakpoints";
 
 :root {
   --toast-default-color: var(--color-white);

bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/palette";
-@import "/imports/ui/stylesheets/variables/general";
 @import "/imports/ui/stylesheets/mixins/_indicators";
 
 /* Variables
@@ -10,7 +8,6 @@
   --user-avatar-text: var(--color-white);
   --user-indicator-voice-bg: var(--color-success);
   --user-indicator-muted-bg: var(--color-danger);
-  --user-list-bg: var(--color-off-white);
   --user-color: currentColor; //picks the current color reference in the class
 }
 

bigbluebutton-html5/imports/ui/components/user-info/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 .keyCell, .valueCell, .userInfoTable {
   border: var(--border-size) solid var(--color-gray-lighter);
 }
@@ -21,4 +19,3 @@
 .keyCell, .valueCell {
   padding: var(--md-padding-x);
 }
-

bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/chat-icon/styles.scss

@@ -1,15 +1,16 @@
-@import "/imports/ui/components/user-list/styles.scss";
 @import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .chatThumbnail {
-  @extend %flex-column;
+  display: flex;
+  flex-flow: column;
   color: var(--color-gray-light);
   justify-content: center;
   font-size: 175%;
 }
 
 .chatIcon {
-  @include highContrastOutline();
+  @extend %highContrastOutline;
   outline-style: solid;
   flex: 0 0 2.2rem;
 }

bigbluebutton-html5/imports/ui/components/user-list/chat-list-item/styles.scss

@@ -1,7 +1,39 @@
-@import "../styles.scss";
-@import "/imports/ui/stylesheets/variables/_all";
-@import "/imports/ui/stylesheets/variables/typography";
 @import "/imports/ui/stylesheets/mixins/_indicators";
+@import "/imports/ui/stylesheets/variables/placeholders";
+
+%list-item {
+  display: flex;
+  flex-flow: row;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  cursor: pointer;
+
+  [dir="rtl"] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:hover {
+    @extend %highContrastOutline;
+    background-color: var(--list-item-bg-hover);
+  }
+
+  &:active,
+  &:focus {
+    @extend %highContrastOutline;
+    outline-style: solid;
+    background-color: var(--list-item-bg-hover);
+    box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
+  }
+}
 
 .chatListItem {
   @extend %list-item;
@@ -50,7 +82,7 @@
 }
 
 .chatNameMain {
-  @extend %no-margin;
+  margin: 0;
   @extend %text-elipsis;
   font-weight: 400;
   font-size: var(--font-size-small);

bigbluebutton-html5/imports/ui/components/user-list/custom-logo/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 .separator {
   height: 1px;
   background-color: var(--color-gray-lighter);

bigbluebutton-html5/imports/ui/components/user-list/styles.scss

@@ -1,46 +1,6 @@
-@import "/imports/ui/stylesheets/variables/_all";
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 @import "/imports/ui/stylesheets/mixins/_indicators";
-
-/* Variables
- * ==========
- */
-
-// TODO: would be better to have those variables scoped and not global
-:root {
-  --unread-messages-bg: var(--color-danger);
-  --user-list-text: var(--color-gray);
-  --user-list-bg: var(--color-off-white);
-
-  --user-thumbnail-border: var(--color-gray-light);
-  --user-thumbnail-text: var(--user-thumbnail-border);
-
-  --voice-user-bg: var(--color-success);
-  --voice-user-text: var(--color-white);
-
-  --moderator-text: var(--color-white);
-  --moderator-bg: var(--color-primary);
-
-  --sub-name-color: var(--color-gray-light);
-
-  --user-icons-color: var(--color-gray-light);
-  --user-icons-color-hover: var(--color-gray);
-
-  --list-item-bg-hover: #dce4ed;
-  --item-focus-border: var(--color-blue-lighter);
-}
-
-/* classes for extending
- * ==========
- */
-%flex-column {
-  display: flex;
-  flex-flow: column;
-}
-
-%no-margin {
-  margin: 0;
-}
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 %list-item {
   display: flex;
@@ -63,13 +23,13 @@
   }
 
   &:hover {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     background-color: var(--list-item-bg-hover);
   }
 
   &:active,
   &:focus {
-    @include highContrastOutline();
+    @extend %highContrastOutline;
     outline-style: solid;
     background-color: var(--list-item-bg-hover);
     box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/styles.scss

@@ -2,7 +2,7 @@
 @import "/imports/ui/stylesheets/mixins/_scrollable";
 @import "/imports/ui/stylesheets/mixins/focus";
 @import "/imports/ui/stylesheets/mixins/_indicators";
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .content {
   @extend %flex-column;
@@ -20,41 +20,43 @@
 .scrollableList {
   @include elementFocus(var(--list-item-bg-hover));
   @include scrollbox-vertical(var(--user-list-bg));
-  @include highContrastOutline();
 
-  &:focus-within,
-  &:focus {
-    outline-style: solid;
+  outline: none;
+  
+  &:hover {
+    @extend %highContrastOutline;
   }
 
+  &:focus,
   &:active {
     box-shadow: none;
     border-radius: none;
   }
 
   overflow-x: hidden;
-  outline-width: 1px !important;
-  outline-color: transparent !important;
 }
 
 .virtulizedScrollableList {
   @include elementFocus(var(--list-item-bg-hover));
   @include scrollbox-vertical(var(--user-list-bg));
-  @include highContrastOutline();
+  
 
-  &:focus-within,
-  &:focus {
-    outline-style: solid;
+  > div {
+    outline: none;
   }
 
+
+  &:hover {
+    @extend %highContrastOutline;
+  }
+
+  &:focus,
   &:active {
     box-shadow: none;
     border-radius: none;
+    outline-style: none;
   }
 
-  outline-width: 1px !important;
-  outline-color: transparent !important;
-
   flex-grow: 1;
   flex-shrink: 1;
 
@@ -183,7 +185,7 @@
 
 .scrollStyle {
   @include scrollbox-vertical($bg-color: #f3f6f9);
-  
+  outline: none;
 }
 
 .noteLock {

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-dropdown/styles.scss

@@ -1,11 +1,40 @@
-@import "/imports/ui/components/user-list/styles.scss";
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
+@import "/imports/ui/stylesheets/variables/placeholders";
 @import '/imports/ui/stylesheets/mixins/_indicators';
 @import '/imports/ui/stylesheets/mixins/focus';
-@import "/imports/ui/components/modal/simple/styles";
 
-:root {
-  --description-margin: 3.5rem;
+%list-item {
+  display: flex;
+  flex-flow: row;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  cursor: pointer;
+
+  [dir="rtl"] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:hover {
+    @extend %highContrastOutline;
+    background-color: var(--list-item-bg-hover);
+  }
+
+  &:active,
+  &:focus {
+    @extend %highContrastOutline;
+    outline-style: solid;
+    background-color: var(--list-item-bg-hover);
+    box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
+  }
 }
 
 /* Animations
@@ -90,7 +119,7 @@
 }
 
 .usertListItemWithMenu {
-  @include highContrastOutline();
+  @extend %highContrastOutline;
   outline-style: solid;
   background-color: var(--list-item-bg-hover);
   box-shadow: inset 0 0 0 var(--border-size) var(--item-focus-border), inset 1px 0 0 1px var(--item-focus-border);
@@ -127,6 +156,7 @@
 
 .dropdown {
   position: static;
+  margin: 0 0 1px var(--lg-padding-y);
 }
 
 .dropdownContent {

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-icons/styles.scss

@@ -1,7 +1,6 @@
-@import "/imports/ui/components/user-list/styles.scss";
-
 .userIconsContainer {
-  @extend %flex-column;
+  display: flex;
+  flex-flow: column;
   text-align: center;
   flex-basis: 1rem;
   justify-content: center;

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-name/styles.scss

@@ -1,7 +1,6 @@
-@import "/imports/ui/components/user-list/styles.scss";
-
 .userName {
-  @extend %flex-column;
+  display: flex;
+  flex-flow: column;
   min-width: 0;
   flex-grow: 1;
   margin: 0 0 0 var(--sm-padding-x);
@@ -14,7 +13,7 @@
 }
 
 .userNameMain {
-  @extend %no-margin;
+  margin: 0;
   font-size: 0.9rem;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -36,7 +35,7 @@
 }
 
 .userNameSub {
-  @extend %no-margin;
+  margin: 0;
   font-size: 0.75rem;
   font-weight: 200;
   color: var(--color-gray);

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 
 :root {
   --user-manage-menu-top : -0.5rem;

bigbluebutton-html5/imports/ui/components/video-preview/styles.scss

@@ -1,5 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
-@import '/imports/ui/stylesheets/mixins/focus';
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/components/modal/simple/styles";
 
 .warning {

bigbluebutton-html5/imports/ui/components/video-provider/many-users-notify/styles.scss

@@ -1,5 +1,4 @@
 @import '/imports/ui/components/breakout-room/styles';
-@import "/imports/ui/stylesheets/variables/_all";
 
 .buttonWrapper,
 .button,

bigbluebutton-html5/imports/ui/components/video-provider/video-button/styles.scss

@@ -1,4 +1,4 @@
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/breakpoints";
 @import "/imports/ui/components/actions-bar/styles.scss";
 
 .imageSize {

bigbluebutton-html5/imports/ui/components/video-provider/video-list/styles.scss

@@ -1,9 +1,5 @@
-@import "/imports/ui/stylesheets/variables/_all";
-@import "/imports/ui/stylesheets/variables/video";
-
-:root {
-  --color-white-with-transparency: #ffffff40;
-}
+@import "/imports/ui/stylesheets/variables/breakpoints";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .videoCanvas {
   --cam-dropdown-width: 70%;

bigbluebutton-html5/imports/ui/components/waiting-users/styles.scss

@@ -1,5 +1,5 @@
 @import "/imports/ui/stylesheets/mixins/focus";
-@import "/imports/ui/stylesheets/variables/_all";
+@import "/imports/ui/stylesheets/variables/placeholders";
 
 .panel {
   background-color: #fff;

bigbluebutton-html5/imports/ui/components/whiteboard/annotations/poll/styles.scss

@@ -1,5 +1,3 @@
-@import "/imports/ui/stylesheets/variables/_all";
-
 :root {
     --poll-annotation-gray: #333333;
 }

bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/styles.scss

@@ -1,4 +1,4 @@
-@import "../../../stylesheets/variables/_all";
+@import "../../../stylesheets/variables/breakpoints";
 
 :root {
   --toolbar-margin: .8rem;

bigbluebutton-html5/imports/ui/stylesheets/mixins/_indicators.scss

@@ -1,6 +1,3 @@
-@import "/imports/ui/stylesheets/variables/palette";
-@import "/imports/ui/stylesheets/variables/general";
-
 @mixin presenterIndicator() {
   &:before {
     opacity: 1;

bigbluebutton-html5/imports/ui/stylesheets/mixins/focus.scss

@@ -1,6 +1,3 @@
-@import "/imports/ui/stylesheets/variables/palette";
-@import "/imports/ui/stylesheets/variables/general";
-
 @mixin elementFocus($color: var(--color-primary)) {
   &:focus {
     outline: none;

bigbluebutton-html5/imports/ui/stylesheets/variables/_all.scss

@@ -1,9 +1,6 @@
 @import "./breakpoints";
-
-%text-elipsis {
-  min-width: 0;
-  display: inline-block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+@import "./general";
+@import "./palette";
+@import "./typography";
+@import "./video";
+@import "./placeholders";

bigbluebutton-html5/imports/ui/stylesheets/variables/general.scss

@@ -25,5 +25,15 @@
   --indicator-padding-top: 0.7em;
   --indicator-padding-bottom: 0.7em;
 
+  //Miscellaneous
   --user-indicators-offset: -5px;
+  --mobile-swap-offset: 3.5rem;
+  --min-modal-height: 20rem;
+  --modal-margin: 3rem;
+  --title-position-left: 2.2rem;
+  --closeBtn-position-left: 2.5rem;
+  --description-margin: 3.5rem;
+  --toast-icon-side: 40px;
+  --innerToastWidth: 17rem;
+  --iconWrapperSize: 2rem;
 }

bigbluebutton-html5/imports/ui/stylesheets/variables/palette.scss

@@ -31,4 +31,30 @@
 
   --color-transparent: #ff000000;
   --color-tip-bg: #333333;
+
+  --color-white-with-transparency: #ffffff40;
+
+  --loader-bg: var(--color-gray-dark);
+  --loader-bullet: var(--color-white);
+  --user-list-bg: var(--color-off-white);
+
+  --unread-messages-bg: var(--color-danger);
+  --user-list-text: var(--color-gray);
+
+  --user-thumbnail-border: var(--color-gray-light);
+  --user-thumbnail-text: var(--user-thumbnail-border);
+
+  --voice-user-bg: var(--color-success);
+  --voice-user-text: var(--color-white);
+
+  --moderator-text: var(--color-white);
+  --moderator-bg: var(--color-primary);
+
+  --sub-name-color: var(--color-gray-light);
+
+  --user-icons-color: var(--color-gray-light);
+  --user-icons-color-hover: var(--color-gray);
+
+  --list-item-bg-hover: #dce4ed;
+  --item-focus-border: var(--color-blue-lighter);
 }

bigbluebutton-html5/imports/ui/stylesheets/variables/placeholders.scss

@@ -0,0 +1,29 @@
+%no-margin {
+    margin: 0;
+}
+
+%flex-column {
+    display: flex;
+    flex-flow: column;
+}
+
+%flex-row {
+    display: flex;
+    flex-flow: row;
+}
+
+%text-elipsis {
+    min-width: 0;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+%highContrastOutline {
+  /* Visible in Windows high-contrast themes */
+  outline: transparent;
+  outline-style: dotted;
+  outline-width: var(--border-size);
+}
+

bigbluebutton-html5/imports/ui/stylesheets/variables/video.scss

@@ -1,5 +1,3 @@
-@import "../../stylesheets/variables/_all";
-
 :root {
   --video-height: calc((100vh - calc(var(--navbar-height) + var(--actionsbar-height))) * 0.2);
   --video-ratio: calc(4 / 3);