diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
index bf4886f454..1497b41004 100755
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/component.jsx
@@ -1,8 +1,7 @@
 import React, { Component, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 import KEY_CODES from '/imports/utils/keyCodes';
-import { styles } from './styles';
+import Styled from './styles';
 import ListItem from './item/component';
 import ListSeparator from './separator/component';
 import ListTitle from './title/component';
@@ -14,8 +13,8 @@ const propTypes = {
     if (propValue[key].type !== ListItem
       && propValue[key].type !== ListSeparator
       && propValue[key].type !== ListTitle) {
-      return new Error(`Invalid prop \`${propFullName}\` supplied to` +
-        ` \`${componentName}\`. Validation failed.`);
+      return new Error(`Invalid prop \`${propFullName}\` supplied to`
+        + ` \`${componentName}\`. Validation failed.`);
     }
     return true;
   }).isRequired,
@@ -153,7 +152,6 @@ export default class DropdownList extends Component {
     const {
       children,
       style,
-      className,
       horizontal,
     } = this.props;
 
@@ -186,11 +184,12 @@ export default class DropdownList extends Component {
       },
     );
 
-    const listDirection = horizontal ? styles.horizontalList : styles.verticalList;
+    const listDirection = horizontal ? 'horizontal' : 'vertical';
+
     return (
-      <ul
+      <Styled.List
         style={style}
-        className={cx(listDirection, className)}
+        direction={listDirection}
         role="menu"
         ref={(menu) => {
           this._menu = menu;
@@ -198,7 +197,7 @@ export default class DropdownList extends Component {
         }}
       >
         {boundChildren}
-      </ul>
+      </Styled.List>
     );
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx
index 00da4cfd4f..2549f6e4df 100644
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/item/component.jsx
@@ -2,9 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import _ from 'lodash';
-import cx from 'classnames';
-import Icon from '/imports/ui/components/icon/component';
-import { styles } from '../styles';
+import Styled from './styles';
 
 const propTypes = {
   icon: PropTypes.string,
@@ -41,13 +39,13 @@ class DropdownListItem extends Component {
     } = this.props;
 
     return [
-      (icon ? <Icon iconName={icon} key="icon" className={styles.itemIcon} /> : null),
+      (icon ? <Styled.ItemIcon iconName={icon} key="icon" /> : null),
       (
-        <span className={styles.itemLabel} key="label" accessKey={accessKey}>
+        <Styled.ItemLabel key="label" accessKey={accessKey}>
           {label}
-        </span>
+        </Styled.ItemLabel>
       ),
-      (iconRight ? <Icon iconName={iconRight} key="iconRight" className={styles.iconRight} /> : null),
+      (iconRight ? <Styled.IconRight iconName={iconRight} key="iconRight" /> : null),
     ];
   }
 
@@ -70,7 +68,7 @@ class DropdownListItem extends Component {
     const isSelected = className && className.includes('emojiSelected');
     const _label = isSelected ? `${label} (${intl.formatMessage(messages.activeAriaLabel)})` : label;
     return (
-      <li
+      <Styled.Item
         id={id}
         ref={injectRef}
         onClick={onClick}
@@ -78,7 +76,6 @@ class DropdownListItem extends Component {
         tabIndex={tabIndex}
         aria-labelledby={this.labelID}
         aria-describedby={this.descID}
-        className={cx(styles.item, className)}
         style={style}
         role="menuitem"
         data-test={dataTest}
@@ -92,7 +89,7 @@ class DropdownListItem extends Component {
             : null
         }
         <span id={this.descID} key="describedby" hidden>{description}</span>
-      </li>
+      </Styled.Item>
     );
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/item/styles.js b/bigbluebutton-html5/imports/ui/components/dropdown/list/item/styles.js
new file mode 100644
index 0000000000..be69db5518
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/item/styles.js
@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+import Icon from '/imports/ui/components/icon/component';
+import { lineHeightComputed } from '/imports/ui/stylesheets/styled-components/typography';
+import {
+  colorGrayDark,
+  colorPrimary,
+  colorWhite,
+  colorText,
+} from '/imports/ui/stylesheets/styled-components/palette';
+import { borderSize } from '/imports/ui/stylesheets/styled-components/general';
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+
+const ItemIcon = styled(Icon)`
+  margin: 0 calc(${lineHeightComputed} / 2) 0 0;
+  color: ${colorText};
+  flex: 0 0;
+
+  [dir="rtl"] & {
+    margin: 0 0 0 calc(${lineHeightComputed} / 2);
+  }
+`;
+
+const ItemLabel = styled.span`
+  color: ${colorGrayDark};
+  font-size: 90%;
+  flex: 1;
+`;
+
+const IconRight = styled(ItemIcon)`
+  margin-right: 0;
+  margin-left: 1rem;
+  font-size: 12px;
+  line-height: 16px;
+
+  [dir="rtl"] & {
+    margin-left: 0;
+    margin-right: 1rem;
+    -webkit-transform: scale(-1, 1);
+    -moz-transform: scale(-1, 1);
+    -ms-transform: scale(-1, 1);
+    -o-transform: scale(-1, 1);
+    transform: scale(-1, 1);
+  }
+`;
+
+const Item = styled.li`
+  display: flex;
+  flex: 1 1 100%;
+  align-items: center;
+  padding: calc(${lineHeightComputed} / 3) 0;
+
+  &:hover,
+  &:focus {
+    outline: transparent;
+    outline-style: dotted;
+    outline-width: ${borderSize};
+
+    cursor: pointer;
+    background-color: ${colorPrimary};
+    color: ${colorWhite};
+
+    & > span {
+      color: ${colorWhite} !important;
+    }
+
+    margin-left: -.25rem;
+    margin-right: -.25rem;
+    padding-left: .25rem;
+    padding-right: .25rem;
+
+    [dir="rtl"] & {
+      margin-right: -.25rem;
+      margin-left: -.25rem;
+      padding-right: .25rem;
+      padding-left: .25rem;
+    }
+
+
+    @media ${smallOnly} {
+      border-radius: 0.2rem;
+    }
+
+    & i {
+      color: inherit;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px ${colorWhite}, 0 0 2px 4px rgba(${colorPrimary}, .4);
+    outline-style: solid;
+  }
+`;
+
+export default {
+  ItemIcon,
+  ItemLabel,
+  IconRight,
+  Item,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/separator/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/separator/component.jsx
index e051c53e17..31957b03fa 100644
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/separator/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/separator/component.jsx
@@ -1,20 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { styles } from '../styles';
+import Styled from './styles';
 
-const DropdownListSeparator = ({ style, className }) => (
-  <li style={style} className={cx(styles.separator, className)} />
+const DropdownListSeparator = ({ style }) => (
+  <Styled.Separator style={style} />
 );
 
 DropdownListSeparator.propTypes = {
   style: PropTypes.shape({}),
-  className: PropTypes.string,
 };
 
 DropdownListSeparator.defaultProps = {
   style: null,
-  className: null,
 };
 
 export default DropdownListSeparator;
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/separator/styles.js b/bigbluebutton-html5/imports/ui/components/dropdown/list/separator/styles.js
new file mode 100644
index 0000000000..26279a0d32
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/separator/styles.js
@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { colorGrayLighter } from '/imports/ui/stylesheets/styled-components/palette';
+import { lineHeightComputed } from '/imports/ui/stylesheets/styled-components/typography';
+
+const Separator = styled.li`
+  display: flex;
+  flex: 1 1 100%;
+  height: 1px;
+  min-height: 1px;
+  background-color: ${colorGrayLighter};
+  padding: 0;
+  margin-top: calc(${lineHeightComputed} * .5);
+  margin-bottom: calc(${lineHeightComputed} * .5);
+`;
+
+export default {
+  Separator,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.js b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.js
new file mode 100644
index 0000000000..e7a5f63f19
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.js
@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { fontSizeBase, fontSizeLarge, lineHeightComputed } from '/imports/ui/stylesheets/styled-components/typography';
+import { colorGrayDark } from '/imports/ui/stylesheets/styled-components/palette';
+
+import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
+
+const List = styled.ul`
+  list-style: none;
+  font-size: ${fontSizeBase};
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  color: ${colorGrayDark};
+  display: flex;
+  overflow-wrap: break-word;
+  white-space: pre-line;
+
+  [dir="rtl"] & {
+    text-align: right;
+  }
+
+  @media ${smallOnly} {
+    font-size: calc(${fontSizeLarge} * 1.1);
+    padding: ${lineHeightComputed};
+  }
+
+  ${({ direction }) => direction === 'horizontal' && `
+    padding: 0;
+    flex-direction: row;
+
+    @media ${smallOnly} {
+      flex-direction: column;
+      padding: calc(${lineHeightComputed} / 1.5) 0;
+    }
+
+    padding: 0 calc(${lineHeightComputed} / 3);
+  `}
+
+  ${({ direction }) => direction === 'vertical' && `
+    flex-direction: column;
+    width: 100%;
+  `}
+`;
+
+export default {
+  List,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
deleted file mode 100755
index 19cef3bbbb..0000000000
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/styles.scss
+++ /dev/null
@@ -1,166 +0,0 @@
-@import "/imports/ui/stylesheets/variables/breakpoints";
-@import '/imports/ui/stylesheets/mixins/_indicators';
-@import "/imports/ui/stylesheets/variables/placeholders";
-
-%list {
-  list-style: none;
-  font-size: var(--font-size-base);
-  margin: 0;
-  padding: 0;
-  text-align: left;
-  color: var(--color-gray-dark);
-  display: flex;
-  overflow-wrap: break-word;
-  white-space: pre-line;
-
-  [dir="rtl"] & {
-    text-align: right;
-  }
-
-  @include mq($small-only) {
-    font-size: calc(var(--font-size-large) * 1.1);
-    padding: var(--line-height-computed);
-  }
-}
-
-.verticalList {
-  @extend %list;
-  flex-direction: column;
-  width: 100%;
-}
-
-.horizontalList {
-  @extend %list;
-  padding: 0;
-  flex-direction: row;
-  @include mq($small-only) {
-    flex-direction: column;
-    padding: var(--line-height-computed);
-  }
-}
-
-.title {
-  color: var(--color-gray);
-  font-weight: 600;
-  width: 100%;
-}
-
-.separator {
-  display: flex;
-  flex: 1 1 100%;
-  height: 1px;
-  min-height: 1px;
-  background-color: var(--color-gray-lighter);
-  padding: 0;
-  margin-top: calc(var(--line-height-computed) * .5);
-  margin-bottom: calc(var(--line-height-computed) * .5);
-}
-
-.item {
-  display: flex;
-  flex: 1 1 100%;
-  align-items: center;
-
-  .verticalList & {
-    padding: calc(var(--line-height-computed) / 3) 0;
-
-    @include mq($small-only) {
-      padding: calc(var(--line-height-computed) / 1.5) 0;
-    }
-  }
-
-  .horizontalList & {
-    padding: 0 calc(var(--line-height-computed) / 3);
-
-    @include mq($small-only) {
-      padding: calc(var(--line-height-computed) / 1.5) 0;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    @extend %highContrastOutline;
-    cursor: pointer;
-    background-color: var(--color-primary);
-    color: var(--color-white);
-
-    .verticalList & {
-      margin-left: -.25rem;
-      margin-right: -.25rem;
-      padding-left: .25rem;
-      padding-right: .25rem;
-
-      [dir="rtl"] & {
-        margin-right: -.25rem;
-        margin-left: -.25rem;
-        padding-right: .25rem;
-        padding-left: .25rem;
-      }
-    }
-
-    .horizontalList & {
-      margin-top: calc((var(--line-height-computed) / 2) * -1);
-      margin-bottom: calc((var(--line-height-computed) / 2) * -1);
-      padding-top: calc(var(--line-height-computed) / 2);
-      padding-bottom: calc(var(--line-height-computed) / 2);
-
-      @include mq($small-only) {
-        margin: 0;
-        padding: calc(var(--line-height-computed) / 1.5) 0;
-        margin-left: calc((var(--line-height-computed) / 2) * -1);
-        margin-right: calc((var(--line-height-computed) / 2) * -1);
-        padding-left: calc(var(--line-height-computed) / 2);
-        padding-right: calc(var(--line-height-computed) / 2);
-      }
-    }
-
-    @include mq($small-only) {
-      border-radius: 0.2rem;
-    }
-
-    .iconRight,
-    .itemIcon,
-    .itemLabel {
-      color: inherit;
-    }
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 2px var(--color-white), 0 0 2px 4px rgba(var(--color-primary), .4);
-    outline-style: solid;
-  }
-}
-
-.iconRight,
-.itemIcon {
-  margin: 0 calc(var(--line-height-computed) / 2) 0 0;
-  color: var(--color-text);
-  flex: 0 0;
-
-  [dir="rtl"] & {
-    margin: 0 0 0 calc(var(--line-height-computed) / 2);
-  }
-}
-
-.iconRight {
-  margin-right: 0;
-  margin-left: 1rem;
-  font-size: 12px;
-  line-height: 16px;
-
-  [dir="rtl"] & {
-    margin-left: 0;
-    margin-right: 1rem;
-    -webkit-transform: scale(-1, 1);
-    -moz-transform: scale(-1, 1);
-    -ms-transform: scale(-1, 1);
-    -o-transform: scale(-1, 1);
-    transform: scale(-1, 1);
-  }
-}
-
-.itemLabel {
-  color: var(--color-gray-dark);
-  font-size: 90%;
-  flex: 1;
-}
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
index bc2e729256..39a1b461d5 100644
--- a/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/component.jsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import cx from 'classnames';
 import _ from 'lodash';
-import { styles } from '../styles';
+import Styled from './styles';
 
 export default class DropdownListTitle extends Component {
   constructor(props) {
@@ -11,14 +10,13 @@ export default class DropdownListTitle extends Component {
 
   render() {
     const {
-      className,
       children,
     } = this.props;
 
     return (
-      <li className={cx(styles.title, className)} aria-hidden>
+      <Styled.Title aria-hidden>
         {children}
-      </li>
+      </Styled.Title>
     );
   }
 }
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/list/title/styles.js b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/styles.js
new file mode 100644
index 0000000000..a022715221
--- /dev/null
+++ b/bigbluebutton-html5/imports/ui/components/dropdown/list/title/styles.js
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { colorGray } from '/imports/ui/stylesheets/styled-components/palette';
+
+const Title = styled.li`
+  color: ${colorGray};
+  font-weight: 600;
+  width: 100%;
+`;
+
+export default {
+  Title,
+};
diff --git a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss b/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
deleted file mode 100755
index 4325a22cfe..0000000000
--- a/bigbluebutton-html5/imports/ui/components/dropdown/styles.scss
+++ /dev/null
@@ -1,401 +0,0 @@
-@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);
-  --dropdown-color: var(--color-text);
-  --caret-shadow-color: var(--color-gray);
-
-  --dropdown-caret-width: 12px;
-  --dropdown-caret-height: 8px;
-
-  --rtl-caret-offset: -0.4375rem;
-  --rtl-content-offset: 10.75rem;
-}
-
-.dropdown {
-  position: relative;
-  z-index: 3;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.content {
-  @extend %highContrastOutline;
-  outline-style: solid;
-  z-index: 9999;
-  position: absolute;
-  background: var(--dropdown-bg);
-  border-radius: var(--border-radius);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-  border: 0;
-  padding: calc(var(--line-height-computed) / 2);
-
-  [dir="rtl"] & {
-    right: var(--rtl-content-offset);
-  }
-
-  &:after,
-  &:before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-  }
-
-  &[aria-expanded="false"] {
-    display: none;
-  }
-
-  &[aria-expanded="true"] {
-    display: block;
-  }
-
-  @include mq($small-only) {
-    z-index: 1015;
-    border-radius: 0;
-    background-color: #fff;
-    box-shadow: none;
-    position: fixed;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    border: 0 !important;
-    padding: 0 !important;
-    margin: 0 0 calc(var(--line-height-computed) * 5.25) 0 !important;
-    transform: translateX(0) translateY(0) !important;
-
-    &:after,
-    &:before {
-      display: none !important;
-    }
-  }
-}
-
-.scrollable {
-  @include mq($small-only) {
-    @include scrollbox-vertical();
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
-
-.trigger {
-}
-
-.close {
-  display: none;
-  position: fixed;
-  bottom: 0.8rem;
-  border-radius: 0;
-  z-index: 1011;
-  font-size: calc(var(--font-size-large) * 1.1);
-  width: calc(100% - (var(--line-height-computed) * 2));
-  left: var(--line-height-computed);
-  box-shadow: 0 0 0 2rem var(--color-white) !important;
-  border: var(--color-white) !important;
-
-  @include mq($small-only) {
-    display: block;
-  }
-}
-
-// removes transform on tethered dropdown for small screen sizes.
-// prevents the user-list-item dropdown breaking on mobile.
-:global(.tether-out-of-bounds)  {
-  @include mq($small-only) {
-    transform: none !important;
-  }
-}
-
-/* Placements
- * ==========
- */
-
-%down-caret {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: calc(var(--dropdown-caret-height) * 1.25);
-
-  &:before,
-  &:after {
-    border-left: var(--dropdown-caret-width) solid transparent;
-    border-right: var(--dropdown-caret-width) solid transparent;
-    border-top: var(--dropdown-caret-height) solid var(--dropdown-bg);
-    bottom: 0;
-    margin-bottom: calc(var(--dropdown-caret-height) * -1);
-  }
-
-  &:before {
-    border-top: var(--dropdown-caret-height) solid var(--caret-shadow-color);
-  }
-}
-
-%up-caret {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: calc(var(--dropdown-caret-height) * 1.25);
-
-  &:before,
-  &:after {
-    border-left: var(--dropdown-caret-width) solid transparent;
-    border-right: var(--dropdown-caret-width) solid transparent;
-    border-bottom: var(--dropdown-caret-height) solid var(--dropdown-bg);
-    margin-top: calc(var(--dropdown-caret-height) * -1);
-    top: 0;
-
-    [dir="rtl"] & {
-      right: 50%;
-      transform: translateX(-150%);
-    }
-  }
-
-  &:before {
-    border-bottom: var(--dropdown-caret-height) solid var(--caret-shadow-color);
-  }
-}
-
-%right-caret {
-  top: 50%;
-  transform: translateX(-100%) translateY(-50%);
-  left: calc(var(--dropdown-caret-height) * -1.25);
-
-  &:before,
-  &:after {
-    border-top: var(--dropdown-caret-width) solid transparent;
-    border-bottom: var(--dropdown-caret-width) solid transparent;
-    border-left: var(--dropdown-caret-height) solid var(--dropdown-bg);
-    margin-right: calc(var(--dropdown-caret-height) * -1);
-    top: 50%;
-    right: 0;
-
-    [dir="rtl"] & {
-      left: 0;
-      border-left: 0;
-      border-right: var(--dropdown-caret-height) solid var(--dropdown-bg);
-      margin-left: calc(var(--dropdown-caret-height) * -1);
-    }
-  }
-
-  &:before {
-
-    
-    border-left: var(--dropdown-caret-height) solid var(--caret-shadow-color);
-    border-right: 0;
-
-    [dir="rtl"] & {
-      transform: rotate(180deg);
-      border-left: 0;
-      border-right: var(--dropdown-caret-height) solid var(--caret-shadow-color);
-    }
-  }
-}
-
-%left-caret {
-  top: 50%;
-  transform: translateX(100%) translateY(-50%);
-  right: calc(var(--dropdown-caret-height) * -1.25);
-
-  &:before,
-  &:after {
-    border-top: var(--dropdown-caret-width) solid transparent;
-    border-bottom: var(--dropdown-caret-width) solid transparent;
-    border-right: var(--dropdown-caret-height) solid var(--dropdown-bg);
-    margin-left: calc(var(--dropdown-caret-height) * -1);
-    top: 50%;
-    left: 0;
-
-    [dir="rtl"] & {
-      transform: rotate(180deg);
-      margin-right: calc(var(--dropdown-caret-height) * -1);
-      right: 1px;
-    }
-  }
-
-  &:before {
-    border-right: var(--dropdown-caret-height) solid var(--caret-shadow-color);
-    border-left: 0;
-
-    [dir="rtl"] & {
-      right: var(--rtl-caret-offset);
-      border: none;
-      margin: 0;
-    }
-  }
-}
-
-%horz-center-caret {
-  &:after,
-  &:before {
-    left: 50%;
-    margin-left: calc(var(--dropdown-caret-width) * -1);
-
-    [dir="rtl"] & {
-      margin-right: calc(var(--dropdown-caret-width) * -1);
-    }
-  }
-}
-
-%horz-left-caret {
-  transform: translateX(-100%);
-  left: 100%;
-
-  [dir="rtl"] & {
-    right: 100%;
-  }
-
-  &:after,
-  &:before {
-    right: calc(var(--dropdown-caret-width) / 2);
-  }
-}
-
-%horz-right-caret {
-  transform: translateX(100%);
-  right: 100%;
-  left: auto;
-
-  &:after,
-  &:before {
-    left: var(--dropdown-caret-width);
-  }
-}
-
-%vert-center-caret {
-  &:after,
-  &:before {
-    margin-top: calc(var(--dropdown-caret-width) * -1);
-  }
-}
-
-%vert-top-caret {
-  top: 0;
-
-  &:after,
-  &:before {
-    top: 0;
-    margin-top: calc(var(--dropdown-caret-width) / 2);
-  }
-}
-
-%vert-bottom-caret {
-  top: auto;
-  bottom: 0;
-
-  &:after,
-  &:before {
-    top: auto;
-    bottom: calc(var(--dropdown-caret-width) / 2);
-
-    [dir="rtl"] & {
-      top: calc(var(--dropdown-caret-width) / 2);
-      bottom: auto;
-    }
-  }
-}
-
-.top {
-  @extend %down-caret;
-  @extend %horz-center-caret;
-}
-
-.top-left, [dir="rtl"] .top-right {
-  @extend %down-caret;
-  @extend %horz-right-caret;
-  min-width: 18rem;
-
-  @include mq($small-only) {
-    width: auto;
-  }
-}
-
-.top-right {
-  @extend %down-caret;
-  @extend %horz-left-caret;
-}
-
-[dir="rtl"] .top-left {
-  @extend %down-caret;
-  @extend %horz-left-caret;
-  transform: translateX(25%);
-}
-
-.bottom {
-  @extend %up-caret;
-  @extend %horz-center-caret;
-}
-
-.bottom-left, [dir="rtl"] .bottom-right {
-  @extend %up-caret;
-  @extend %horz-right-caret;
-}
-
-.bottom-right, [dir="rtl"] .bottom-left  {
-  @extend %up-caret;
-  @extend %horz-left-caret;
-  min-width: 10rem;
-
-  @include mq($small-only) {
-    width: auto;
-  }
-}
-
-.left, [dir="rtl"] .right {
-  @extend %right-caret;
-  @extend %vert-center-caret;
-}
-
-.left-top, [dir="rtl"] .right-top {
-  @extend %right-caret;
-  @extend %vert-top-caret;
-  transform: translateX(-100%) translateY(0);
-}
-
-.left-bottom {
-  @extend %right-caret;
-  @extend %vert-bottom-caret;
-  transform: translateX(-100%) translateY(0);
-}
-
-[dir="rtl"] .right-bottom  {
-  @extend %right-caret;
-  @extend %vert-bottom-caret;
-  transform: translateX(-110%) translateY(0);
-}
-
-.right, [dir="rtl"] .left {
-  @extend %left-caret;
-  @extend %vert-center-caret;
-}
-
-.right-top  {
-  @extend %left-caret;
-  @extend %vert-top-caret;
-  transform: translateX(100%) translateY(0);
-}
-
-[dir="rtl"] .right-top {
-  transform: translateX(-25%) translateY(0%);
-}
-
-[dir="rtl"] .left-top {
-  @extend %left-caret;
-  @extend %vert-top-caret;
-  transform: translateX(125%) translateY(-25%);
-}
-
-.right-bottom, [dir="rtl"] .left-bottom {
-  @extend %left-caret;
-  @extend %vert-bottom-caret;
-  transform: translateX(100%) translateY(0);
-}