@ulu/frontend 0.1.0-beta.8 → 0.1.0-beta.80

package/scss/components/_menu-stack.scss

@@ -19,12 +19,20 @@ $-fallbacks: (
   "link-border-radius" : (
     "function" : meta.get-function("get", false, "button"),
     "property" : "border-radius"
+  ),
+  "label-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
+  ),
+  "link-line-height" : (
+    "function" : meta.get-function("get", false, "typography"),
+    "property" : "line-height-dense"
   )
 );
     
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} checkbox-area-width [3em] The width of the checkbox are.
+/// @prop {Dimension} selectable-input-width [3em] The width of the checkbox/radio input
 /// @prop {Boolean} link-separated-margin [false] Enables a margin between the items in the menu-stack.
 /// @prop {Boolean} link-separated-rule-style [false] Enables a rule between the items in the menu-stack.
 /// @prop {Dimension} nested-indent [0.5em] The indentation of child lists within the menu-stack.
@@ -36,7 +44,8 @@ $-fallbacks: (
 /// @prop {Color} label-color [null] The type color of the label.
 /// @prop {Dimension} label-margin [0.5em] The margin of the label.
 /// @prop {CssValue} label-text-transform [uppercase] Transforms the label text.
-/// @prop {CssValue} label-type-size [false] Adjusts the type size of the label.
+/// @prop {CssValue} label-type-size [false] Adjusts the type size of the label. Only uses font-size from type size.
+/// @prop {CssValue} label-line-height [true] Adjust the label line-height, defaults to typography line-height-dense
 /// @prop {list} link-active-selectors [(.is-active, '[aria-current=page]')] Selectors to apply active styling.
 /// @prop {Color} link-background-color [transparent] The background color of the menu-stack toggle. 
 /// @prop {Color} link-background-color-active [rgb(219, 219, 219)] The background color of the menu-stack toggle when active.
@@ -46,6 +55,7 @@ $-fallbacks: (
 /// @prop {Color} link-color-active [black] The type color of the menu-stack toggle when active.
 /// @prop {String} link-color-hover [link-hover] The type color of the menu-stack toggle when hovered or focused.  This uses color.scss, so the value of this option should be a color variable from color.scss.
 /// @prop {CssValue} link-font-weight [null] The font weight of the menu-stack toggle.
+/// @prop {CssValue} label-line-height [true] Adjust the link line-height, defaults to typography line-height-dense
 /// @prop {Dimension} link-icon-margin [0.65em] Adds a right margin to the icon.
 /// @prop {Dimension} link-icon-width [1em] The width of the icon.
 /// @prop {Dimension} link-margin [0.2em] Margin for the menu-stack toggle.
@@ -53,34 +63,35 @@ $-fallbacks: (
 /// @prop {Dimension} link-padding-y [0.35em] Vertical padding for menu-stack toggle.
 
 $config: (
-  "checkbox-area-width" : 3em,
+  "selectable-input-width" : 3em,
   "nested-indent" : 0.5em,
-  "rule-style" : "default",
+  "rule-style" : "light",
   "rule-margin" : 0.5em,
-  "link-separated-margin" : false,
-  "link-separated-rule-style" : false,
   "toggle-icon-rotate" : false,
-  "compact-link-padding-x": 0.75em,
-  "compact-link-padding-y": 0.25em,
-
   "label-color" : null,
   "label-margin" : 0.5em,
   "label-text-transform" : uppercase,
   "label-type-size" : false,
+  "label-line-height" : true,
+  "link-separated-margin" : false,
+  "link-separated-rule-style" : false,
   "link-active-selectors" : (".is-active", '[aria-current="page"]'),
   "link-background-color" : transparent,
   "link-background-color-active" : rgb(219, 219, 219),
-  "link-background-color-hover" : rgb(219, 219, 219),
+  "link-background-color-hover" : rgb(240, 240, 240),
   "link-border-radius" : true,
   "link-color" : "link",
   "link-color-active" : black,
   "link-color-hover" : "link-hover",
   "link-font-weight" : null,
+  "link-line-height" : true,
   "link-icon-margin" : 0.65em,
   "link-icon-width" : 1em,
   "link-margin" : 0.2em,
-  "link-padding-x": 1em,
-  "link-padding-y": 0.35em,
+  "link-padding-x": 1.25em,
+  "link-padding-y": 0.5em,
+  "compact-link-padding-x": 0.75em,
+  "compact-link-padding-y": 0.25em,
 ) !default;
 
 
@@ -116,6 +127,7 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("menu-stack");
+  $selectable-y: (get("link-padding-y") + get("link-margin"));
 
   #{ $prefix }--separated {
     border-top: element.get-rule-style(get("rule-style"));
@@ -126,6 +138,7 @@ $config: (
     text-transform: get("label-text-transform");
     padding-bottom: get("label-margin");
     color: color.get(get("label-color"));
+    line-height: get("label-line-height");
     @if (get("label-type-size")) {
       @include typography.size(get("label-type-size"), $only-font-size: true);
     }
@@ -150,7 +163,7 @@ $config: (
   // - Use the modifier "site-menu--contained" to keep the links within 
   //   the parent container (no optical alignment), should be within something that contains it
   #{ $prefix }__link,
-  #{ $prefix }__checkbox,
+  #{ $prefix }__selectable,
   #{ $prefix }__toggle {
     width: 100%;
     display: flex;
@@ -159,6 +172,7 @@ $config: (
     margin: get("link-margin") 0;
     border-radius: get("link-border-radius");
     font-weight: get("link-font-weight");
+    line-height: get("link-line-height");
     color: color.get(get("link-color"));
     background-color: color.get(get("link-background-color"));
     box-sizing: border-box;
@@ -177,19 +191,21 @@ $config: (
       }
     }
   }
-  #{ $prefix }__checkbox {
-    $checkbox-y: (get("link-padding-y") + get("link-margin"));
+  #{ $prefix }__selectable {
     padding: 0;
     position: relative;
-    [type="checkbox"] {
-      position: absolute;
-      top: $checkbox-y;
-      left: get("link-padding-x");
-    }
-    label {
-      width: 100%;
-      padding: $checkbox-y get("link-padding-x") $checkbox-y get("checkbox-area-width");
-    }
+  }
+  #{ $prefix }__selectable [type="checkbox"],
+  #{ $prefix }__selectable [type="radio"],
+  #{ $prefix }__selectable-input {
+    position: absolute;
+    top: $selectable-y;
+    left: get("link-padding-x");
+  }
+  #{ $prefix }__selectable label,
+  #{ $prefix }__selectable-label {
+    width: 100%;
+    padding: $selectable-y get("link-padding-x") $selectable-y get("selectable-input-width");
   }
   #{ $prefix }__link-text {
     display: block;
@@ -220,8 +236,8 @@ $config: (
 
   // Link buttons hang outside in margin so that text optically aligns
   #{ $prefix }--hanging {
-    padding-left: get("link-padding-x");
-    padding-right: get("link-padding-x");
+    // padding-left: get("link-padding-x");
+    // padding-right: get("link-padding-x");
     > #{ $prefix }__list > #{ $prefix }__item {
       > #{ $prefix }__link, 
       >#{ $prefix }__collapsible > #{ $prefix }__toggle {

package/scss/components/_modal.scss

@@ -53,9 +53,13 @@ $-fallbacks: (
 /// @prop {CssValue} header-border-bottom [none] Bottom-border on the modal header.
 /// @prop {Color} header-color [white] Type color of the header.
 /// @prop {Dimension} header-padding [1rem] The padding of the modal header.
+/// @prop {Dimension} footer-padding [(0.5rem 1rem)] The padding of the modal footer.
+/// @prop {Color} footer-background-color [(0.5rem 1rem)] The background color of the footer
+/// @prop {Color} footer-border-top [(0.5rem 1rem)] The border between body and footer
+/// @prop {CssValue} footer-text-align [right] Text alignment for footer
 /// @prop {Color} resizer-background-color [rgb(221, 221, 221)] The background color of the resizer.
-/// @prop {Color} resizer-background-color-hover [rgb(66, 66, 66)] The background color of the resizer when hovered or focused.
-/// @prop {Color} resizer-color [black] The type color of the resizer.
+/// @prop {Color} resizer-background-color-hover [rgb(192, 192, 192)] The background color of the resizer when hovered or focused.
+/// @prop {Color} resizer-color [rgb(99, 99, 99)] The type color of the resizer.
 /// @prop {Color} resizer-color-hover [black] The type color of the resizer when hovered or focused.
 /// @prop {Dimension} resizer-width [1rem] The width of the resizer.
 /// @prop {Color} title-color [white] Type color of the title.
@@ -69,14 +73,14 @@ $-fallbacks: (
 $config: (
   "backdrop-color" :                true,
   "backdrop-blur" :                 4px,
-  "background-color":              white,
-  "body-padding":                   1rem,
+  "background-color" :             white,
+  "body-padding" :                  1rem,
   "border-radius" :                 true,
   "box-shadow" :                    true,         
   "height":                         340px,
   "height-no-header":               100px,
   "width":                          60rem,
-  
+  "width-left-right" :              30rem,
   "animation-duration" :            300ms,
   "animation-duration-exit" :       150ms,
   "animation-timing-function" :     cubic-bezier(0, 0, .2, 1),
@@ -91,11 +95,15 @@ $config: (
   "header-border-bottom":           none,
   "header-color":                   white,
   "header-padding":                 1rem,
+  "footer-padding" :                (0.5rem 1rem),
+  "footer-background-color" :       #f6f6f6,
+  "footer-border-top" :             none,
+  "footer-text-align" :             right,
   "resizer-background-color":       rgb(221, 221, 221),
-  "resizer-background-color-hover": rgb(66, 66, 66),
-  "resizer-color":                  black,
+  "resizer-background-color-hover": rgb(192, 192, 192),
+  "resizer-color":                  rgb(99, 99, 99),
   "resizer-color-hover":            black,
-  "resizer-width":                  1rem,
+  "resizer-width":                  1.25rem,
   "title-color":                    white,
   "title-font-weight":              bold,
   "title-font-family" :             null,
@@ -142,6 +150,7 @@ $config: (
   #{ $prefix } {
     // Required for click outside
     position: fixed;
+    flex-direction: column;
     // Important: If you use the margin layout system (ie. auto) on dialogs they 
     // can't animate out correctly (thinking it jumps from dialog display system 
     // to normal block and doesn't work. This ALSO affects the z-index (seems to move from top-layer to normal layer). Z-index is for close
@@ -165,9 +174,8 @@ $config: (
     box-sizing: border-box;
     animation: uluModalCenterOut get("animation-duration-exit") get("animation-timing-function");
     &[open] {
-      animation: uluModalCenterIn get("animation-duration") get("animation-timing-function");
       display: flex;
-      flex-direction: column;
+      animation: uluModalCenterIn get("animation-duration") get("animation-timing-function");
     }
     &::backdrop {
       background: color.get(get("backdrop-color"));
@@ -190,6 +198,13 @@ $config: (
     overflow: auto;
     padding: get("body-padding");
   }
+  #{ $prefix }__footer {
+    flex: 0;
+    padding: get("footer-padding");
+    background-color: color.get(get("footer-background-color"));
+    border-top: get("footer-border-top");
+    text-align: get("footer-text-align");
+  }
   #{ $prefix }__title {
     display: flex;
     align-items: baseline;
@@ -247,12 +262,6 @@ $config: (
       right: 0;
     }
   }
-  #{ $prefix }__content {
-    margin-top: 2rem;
-    margin-bottom: 2rem;
-    line-height: 1.5;
-    color: rgba(0,0,0,.8);
-  }
 
   // Modifiers
   @each $name, $size-width in get("sizes") {
@@ -260,10 +269,17 @@ $config: (
       width: $size-width;
     }
   }
+
+  #{ $prefix }--fullscreen {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
   #{ $prefix }--right,
   #{ $prefix }--left {
     border-radius: 0;
     height: 100vh;
+    width: get("width-left-right");
     top: 0;
     bottom: 0;
     transform: none;
@@ -370,13 +386,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, -50%);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalCenterOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, -50%);
     }
     to { 
@@ -394,13 +410,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, 0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalTopOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, 0);
     }
     to { 
@@ -418,13 +434,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translate(-50%, 0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalBottomOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translate(-50%, 0);
     }
     to { 
@@ -442,13 +458,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translateX(0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalLeftOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translateX(0);
     }
     to { 
@@ -466,13 +482,13 @@ $config: (
     to { 
       opacity: 1; 
       transform: translateX(0);
-      display: block;
+      display: flex;
     }
   }
   @keyframes uluModalRightOut {
     from { 
       opacity: 1; 
-      display: block;
+      display: flex;
       transform: translateX(0);
     }
     to { 

package/scss/components/_nav-strip.scss

@@ -10,6 +10,7 @@
 @use "../utils";
 @use "../color";
 @use "../selector";
+@use "../layout";
 @use "../typography";
 
 /// Module Settings
@@ -88,6 +89,7 @@ $config: (
     overflow-x: auto;
     line-height: typography.get("line-height-dense");
     gap: get("margin-between");
+    @include layout.remove-scrollbar();
   }
   #{ $prefix }__item,
   #{ $prefix }--auto li {

package/scss/components/_overlay-section.scss

@@ -9,6 +9,7 @@
 @use "../utils";
 @use "../breakpoint";
 @use "../color";
+@use "../layout";
 
 /// Module Settings
 /// @type Map
@@ -81,11 +82,7 @@ $config: (
     }
   }
   .overlay-section__background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    @include layout.absolute-fill();
     img, 
     video {
       object-fit: cover;

package/scss/components/_popover.scss

@@ -29,38 +29,41 @@ $-fallbacks: (
 
 /// Module Settings
 /// @type Map
-/// @prop {Dimension} arrow-size [16px]
-/// @prop {Color} background-color [white]
-/// @prop {Dimension} border-radius [6px]
-/// @prop {Color} color [inherit]
-/// @prop {Dimension} max-width [90vw]
-/// @prop {Dimension} max-height [25rem]
-/// @prop {Dimension} padding [1rem]
-/// @prop {Dimension} padding-large [2rem]
-/// @prop {Dimension} type-size [null]
-/// @prop {Number} z-index [true]
-/// @prop {CssValue} box-shadow [true]
-/// @prop {CssValue} box-shadow-footer [0 0 4px]
-/// @prop {String} box-shadow-footer-color ["box-shadow"]
-/// @prop {Color} header-background-color [#ccc]
-/// @prop {Color} header-color [null]
-/// @prop {Color} header-media-background-color [black]
-/// @prop {Dimension} header-padding-y [0.25rem]
-/// @prop {Color} footer-background-color [#ccc]
-/// @prop {Color} footer-color [null]
-/// @prop {Dimension} footer-padding-y [0.25rem]
-/// @prop {Dimension} footer-padding-y-large [0.5rem]
-/// @prop {Color} tooltip-background-color [white]
-/// @prop {Color} tooltip-color [null]
-/// @prop {Dimension} tooltip-max-width [20rem]
-/// @prop {Dimension} tooltip-padding [0.5rem]
-/// @prop {Dimension} tooltip-width [auto]
-/// @prop {Dimension} width [15rem]
-/// @prop {Dimension} width-large [30rem]
-/// @prop {Dimension} width-large-x [50rem]
+/// @prop {Dimension} arrow-size [16px] Size of the dropdown arrow.
+/// @prop {Boolean} arrow-box-shadow [true] When true the arrow will get the popover's box shadow. Note if the box shadow is not a list (for example custom property), the mask won't be calculated from the box-shadow (use arrow-box-shadow-extent to specify manually)
+/// @prop {Number} arrow-box-shadow-extent [null] If set will determine the amount of overlap added to the arrow mask, else it's calculated automatically by the box-shadow option (can be used if box-shadow is custom property)
+/// @prop {Color} background-color [white] Background color of the popover.
+/// @prop {Dimension} border-radius [6px] Border radius of the popover.
+/// @prop {Color} color [inherit] Text color of the popover.
+/// @prop {Dimension} max-width [90vw] Max width of the popover.
+/// @prop {Dimension} max-height [25rem] Max height of the popover.
+/// @prop {Dimension} padding [1rem] Padding of the popover.
+/// @prop {Dimension} padding-large [2rem] Padding of the popover if using "--large" or "--large-x" styling.
+/// @prop {Dimension} type-size [null] Font size of the popover.
+/// @prop {Number} z-index [true] z-index of the popover.
+/// @prop {CssValue} box-shadow [true] Box shadow of the popover.
+/// @prop {Color} header-background-color [#ccc] Background color of the popover header
+/// @prop {Color} header-color [null] Text color for the header.
+/// @prop {Color} header-media-background-color [black] background color for header media.
+/// @prop {Dimension} header-padding-y [0.25rem] Vertical padding of the header.
+/// @prop {Color} footer-background-color [#ccc] Background color of the footer.
+/// @prop {Color} footer-border-top [1px solid #dfdfdf] Optional border used to separate the content from footer
+/// @prop {Color} footer-color [null] Text color of the footer.
+/// @prop {Dimension} footer-padding-y [0.25rem] Vertical padding of the footer.
+/// @prop {Dimension} footer-padding-y-large [0.5rem] Vertical padding of the footer if using "--large" or "--large-x" styling.
+/// @prop {Color} tooltip-background-color [white] Background color of the tooltip.
+/// @prop {Color} tooltip-color [null] Font color of the tooltip.
+/// @prop {Dimension} tooltip-max-width [20rem] Max width of the tooltip.
+/// @prop {Dimension} tooltip-padding [0.5rem] Padding of the tooltip.
+/// @prop {Dimension} tooltip-width [auto] Width of the tooltip.
+/// @prop {Dimension} width [15rem] Width of the popover.
+/// @prop {Dimension} width-large [30rem] Width of the popover if using "--large".
+/// @prop {Dimension} width-large-x [50rem] Width of the popover if using "--large-x".
 
 $config: (
   "arrow-size"                   : 16px,
+  "arrow-box-shadow"             : true,
+  "arrow-box-shadow-extent"      : null,
   "background-color"             : white,
   "border-radius"                : 6px,
   "color"                        : inherit,
@@ -70,14 +73,12 @@ $config: (
   "padding-large"                : 2rem,
   "type-size"                    : null,
   "z-index"                      : true,
-  
   "box-shadow"                   : true,
-  "box-shadow-footer"            : 0 0 4px,
-  "box-shadow-footer-color"      : "box-shadow",
   "header-background-color"      : #ccc,
   "header-color"                 : null,
   "header-media-background-color": black,
   "header-padding-y"             : 0.25rem,
+  "footer-border-top"            : 1px solid #dfdfdf,  
   "footer-background-color"      : #ccc,
   "footer-color"                 : null,
   "footer-padding-y"             : 0.25rem,
@@ -117,39 +118,9 @@ $config: (
 
 @mixin styles {
   $prefix: selector.class("popover");
-  $arrow-size-half: math.div(get("arrow-size"), 2);
 
   @if (get("arrow-size")) {
-    #{ $prefix }__arrow {
-      display: block;
-      visibility: hidden;
-      z-index: 1;
-      &,
-      &:before {
-        position: absolute;
-        width: get("arrow-size");
-        height: get("arrow-size");
-        background: inherit;
-      }
-      &:before {
-        visibility: visible;
-        content: '';
-        transform: rotate(45deg);
-        // box-shadow: $box-shadow;
-      }
-      [data-placement^='top'] > & {
-        bottom: -($arrow-size-half);
-      }
-      [data-placement^='bottom'] > & {
-        top: -($arrow-size-half);
-      }
-      [data-placement^='left'] > & {
-        right: -($arrow-size-half);
-      }
-      [data-placement^='right'] > & {
-        left: -($arrow-size-half);
-      }
-    }
+    @include -arrow-styles();
   }
   // Default position is on the right of the container (Popper handles positioning)
   #{ $prefix } {
@@ -197,7 +168,7 @@ $config: (
     background-color: color.get(get("header-media-background-color"));
   }
   #{ $prefix }__footer {
-    box-shadow: get("box-shadow-footer") color.get(get("box-shadow-footer-color"));
+    border-top: get("footer-border-top");
     padding: get("footer-padding-y") get("padding");
     color: color.get(get("footer-color"));
     background-color: color.get(get("footer-background-color"));
@@ -260,4 +231,134 @@ $config: (
       }
     }
   }
+}
+
+@mixin -arrow-styles() {
+  @if get("arrow-box-shadow") {
+    @include -arrow-styles-with-box-shadow();
+  } @else {
+    @include -arrow-styles-simple();
+  }
+}
+
+// Internal mixin for original arrow styles without box-shadow
+@mixin -arrow-styles-simple() {
+  $prefix: selector.class("popover");
+  $size: get("arrow-size");
+  $half: math.div($size, 2);
+
+  #{ $prefix }__arrow {
+    visibility: hidden;
+    z-index: 1;
+    &,
+    &::before {
+      display: block;
+      position: absolute;
+      width: $size;
+      height: $size;
+      background: inherit;
+    }
+    &::before {
+      visibility: visible;
+      content: '';
+      transform: rotate(45deg);
+    }
+    [data-placement^="top"] > & {
+      bottom: -($half);
+    }
+    [data-placement^="bottom"] > & {
+      top: -($half);
+    }
+    [data-placement^="left"] > & {
+      right: -($half);
+    }
+    [data-placement^="right"] > & {
+      left: -($half);
+    }
+  }
+  // Account for footer and change arrow color when positioned next to it
+  #{ $prefix }__footer ~ #{ $prefix }__arrow {
+    [data-placement^="top"] > & {
+      &::before {
+        background-color: get("footer-background-color");
+      }
+    }
+  }
+}
+
+// Internal mixin for arrow styles when using the mask (extra pseudo element)
+@mixin -arrow-styles-with-box-shadow() {
+  $prefix: selector.class("popover");
+  $box-shadow: get("box-shadow");
+  $size: get("arrow-size");
+  $half: math.div($size, 2);
+  $size-info: utils.number-info($size);
+  $unitless: map.get($size-info, "value");
+  $unit: map.get($size-info, "unit");
+  $hypotenuse: utils.hypotenuse($unitless, $unitless);
+  $hypotenuse-half: math.div($hypotenuse, 2);
+  $manual-extent: get("arrow-box-shadow-extent");
+  $shadow-extent: if(
+    $manual-extent,
+    $manual-extent,
+    if(utils.is-list($box-shadow), utils.box-shadow-extent($box-shadow), 5px)
+  );
+  $overlap: utils.strip-unit($shadow-extent);
+  $mask-height: utils.add-unit($hypotenuse-half + $overlap, $unit);
+  $mask-width: utils.add-unit($hypotenuse + $overlap, $unit);
+  
+  #{ $prefix }__arrow {
+    visibility: hidden;
+    z-index: 1;
+    &,
+    &::before,
+    &::after {
+      display: block;
+      position: absolute;
+      width: $size;
+      height: $size;
+      background: inherit;
+    }
+    &::before,
+    &::after {
+      visibility: visible;
+      content: '';
+    }
+    &::before {
+      box-shadow: get("box-shadow");
+      transform: rotate(45deg);
+    }
+    // Masking shape
+    &::after {
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      height: $mask-height;
+      width: $mask-width;
+    }
+    [data-placement^="top"] > & {
+      bottom: -($half);
+      transform: rotate(180deg); // Rotate w. mask
+    }
+    [data-placement^="bottom"] > & {
+      top: -($half);
+    }
+    [data-placement^="left"] > & {
+      right: -($half);
+      transform: rotate(90deg); // Rotate w. mask
+    }
+    [data-placement^="right"] > & {
+      left: -($half);
+      transform: rotate(-90deg); // Rotate w. mask
+    }
+  }
+  // Account for footer and change arrow color when positioned next to it
+  #{ $prefix }__footer ~ #{ $prefix }__arrow {
+    [data-placement^="top"] > & {
+      &::before,
+      &::after {
+        background-color: get("footer-background-color");
+      }
+    }
+  }
 }