@apolitical/component-library 1.18.8 → 2.0.0

package/styles/base/_text.scss

@@ -1,61 +1,115 @@
-@use 'sass:map';
-@import './../functions',
-        './../mixins',
-        './../variables';
-
-$default: ('font-size': 16, 'font-size_md': 18, 'line-height': 24, 'line-height_md': 28, 'margin-bottom': 20); // The default size is the 'large paragraph' in Figma
-$small: ('font-size': 12, 'font-size_md': 14, 'letter-spacing': 0.16, 'line-height': 16, 'margin-bottom': 16);
-$medium: ('font-size': 14, 'font-size_md': 16, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 18);
-$sup: ('font-size': 10);
+@import './../functions', './../mixins', './../variables';
+
+$default: (
+  'font-size': 16,
+  'font-size_md': 18,
+  'line-height': 24,
+  'line-height_md': 28,
+  'margin-bottom': 20,
+); // The default size is the 'large paragraph' in Figma
+$small: (
+  'font-size': 12,
+  'font-size_md': 14,
+  'letter-spacing': 0.16,
+  'line-height': 16,
+  'margin-bottom': 16,
+);
+$medium: (
+  'font-size': 14,
+  'font-size_md': 16,
+  'line-height': 16,
+  'line-height_md': 20,
+  'margin-bottom': 18,
+);
+$sup: (
+  'font-size': 10,
+);
 $standard-text-elements: p, li, dt, dd;
 $special-text-elements: h1, h2, h3, h4, h5, h6, a;
 
 @layer base {
-  p, li, small {
-    color: map.get($theme, 'text');
+  p,
+  li,
+  small {
+    color: get-map($theme, 'text');
     font-weight: 500;
 
-    .error &, &.error { color: map.get($theme, 'text_error'); }
+    .error &,
+    &.error {
+      color: get-map($theme, 'text_error');
+    }
   }
 
   #{$standard-text-elements} {
-    font-size: px-to-rem(map.get($default, 'font-size'));
-    line-height: px-to-rem(map.get($default, 'line-height'));
+    font-size: px-to-rem(get-map($default, 'font-size'));
+    line-height: px-to-rem(get-map($default, 'line-height'));
+
+    // These have been split out to allow us to overwrite with a direct class on the element.
+    .text-small & {
+      font-size: px-to-rem(get-map($small, 'font-size'));
+      line-height: px-to-rem(get-map($small, 'line-height'));
+      letter-spacing: px-to-rem(get-map($small, 'letter-spacing'));
+    }
 
-      .text-small &, &.text-small {
-        font-size: px-to-rem(map.get($small, 'font-size'));
-        line-height: px-to-rem(map.get($small, 'line-height'));
-        letter-spacing: px-to-rem(map.get($small, 'letter-spacing'));
-      }
+    .text-medium & {
+      font-size: px-to-rem(get-map($medium, 'font-size'));
+      line-height: px-to-rem(get-map($medium, 'line-height'));
+    }
 
-      .text-medium &, &.text-medium {
-        font-size: px-to-rem(map.get($medium, 'font-size'));
-        line-height: px-to-rem(map.get($medium, 'line-height'));
-      }
+    &.text-small {
+      font-size: px-to-rem(get-map($small, 'font-size'));
+      line-height: px-to-rem(get-map($small, 'line-height'));
+      letter-spacing: px-to-rem(get-map($small, 'letter-spacing'));
+    }
+
+    &.text-medium {
+      font-size: px-to-rem(get-map($medium, 'font-size'));
+      line-height: px-to-rem(get-map($medium, 'line-height'));
+    }
   }
 
   p {
-    margin-bottom: px-to-rem(map.get($default, 'margin-bottom'));
+    margin-bottom: px-to-rem(get-map($default, 'margin-bottom'));
 
-      .text-small &, &.text-small { margin-bottom: px-to-rem(map.get($small, 'margin-bottom')); }
+    // These have been split out to allow us to overwrite with a direct class on the element.
+    .text-small & {
+      margin-bottom: px-to-rem(get-map($small, 'margin-bottom'));
+    }
 
-      .text-medium &, &.text-medium { margin-bottom: px-to-rem(map.get($medium, 'margin-bottom')); }
+    .text-medium & {
+      margin-bottom: px-to-rem(get-map($medium, 'margin-bottom'));
+    }
+
+    &.text-small {
+      margin-bottom: px-to-rem(get-map($small, 'margin-bottom'));
+    }
+
+    &.text-medium {
+      margin-bottom: px-to-rem(get-map($medium, 'margin-bottom'));
+    }
   }
 
   small {
-    font-size: px-to-rem(map.get($small, 'font-size'));
-    line-height: px-to-rem(map.get($small, 'line-height'));
+    font-size: px-to-rem(get-map($small, 'font-size'));
+    line-height: px-to-rem(get-map($small, 'line-height'));
 
-      @include breakpoint('min-width', 'md') {
-        font-size: px-to-rem(map.get($small, 'font-size_md'));
-      }
+    @include breakpoint('min-width', 'md') {
+      font-size: px-to-rem(get-map($small, 'font-size_md'));
+    }
   }
 
-  strong { font-weight: 900; }
-  em, i { font-style: italic; }
+  strong {
+    font-weight: 900;
+  }
 
-  sup, sub {
-    font-size: px-to-rem(map.get($sup, 'font-size'));
+  em,
+  i {
+    font-style: italic;
+  }
+
+  sup,
+  sub {
+    font-size: px-to-rem(get-map($sup, 'font-size'));
     line-height: normal;
   }
 
@@ -67,45 +121,56 @@ $special-text-elements: h1, h2, h3, h4, h5, h6, a;
     vertical-align: sub;
   }
 
-  address { font-style: normal; }
+  address {
+    font-style: normal;
+  }
 
   #{$special-text-elements} {
-      &.text-small {
-        font-size: px-to-rem(map.get($small, 'font-size'));
-        line-height: px-to-rem(map.get($small, 'line-height'));
-      }
+    &.text-small {
+      font-size: px-to-rem(get-map($small, 'font-size'));
+      line-height: px-to-rem(get-map($small, 'line-height'));
+    }
 
-      &.text-medium {
-        font-size: px-to-rem(map.get($medium, 'font-size'));
-        line-height: px-to-rem(map.get($medium, 'line-height'));
-      }
+    &.text-medium {
+      font-size: px-to-rem(get-map($medium, 'font-size'));
+      line-height: px-to-rem(get-map($medium, 'line-height'));
+    }
   }
 
   @include breakpoint('min-width', 'md') {
     #{$standard-text-elements} {
-      font-size: px-to-rem(map.get($default, 'font-size_md'));
-      line-height: px-to-rem(map.get($default, 'line-height_md'));
+      font-size: px-to-rem(get-map($default, 'font-size_md'));
+      line-height: px-to-rem(get-map($default, 'line-height_md'));
 
-        .text-small &, &.text-small {
-          font-size: px-to-rem(map.get($small, 'font-size_md'));
-        }
+      // These have been split out to allow us to overwrite with a direct class on the element.
+      .text-small & {
+        font-size: px-to-rem(get-map($small, 'font-size_md'));
+      }
 
-        .text-medium &, &.text-medium {
-          font-size: px-to-rem(map.get($medium, 'font-size_md'));
-          line-height: px-to-rem(map.get($medium, 'line-height_md'));
-        }
+      .text-medium & {
+        font-size: px-to-rem(get-map($medium, 'font-size_md'));
+        line-height: px-to-rem(get-map($medium, 'line-height_md'));
+      }
+
+      &.text-small {
+        font-size: px-to-rem(get-map($small, 'font-size_md'));
+      }
+
+      &.text-medium {
+        font-size: px-to-rem(get-map($medium, 'font-size_md'));
+        line-height: px-to-rem(get-map($medium, 'line-height_md'));
+      }
     }
 
     #{$special-text-elements} {
-        &.text-small {
-          font-size: px-to-rem(map.get($small, 'font-size_md'));
-        }
-
-        &.text-medium {
-          font-size: px-to-rem(map.get($medium, 'font-size_md'));
-          line-height: px-to-rem(map.get($medium, 'line-height_md'));
-        }
+      &.text-small {
+        font-size: px-to-rem(get-map($small, 'font-size_md'));
+      }
+
+      &.text-medium {
+        font-size: px-to-rem(get-map($medium, 'font-size_md'));
+        line-height: px-to-rem(get-map($medium, 'line-height_md'));
+      }
     }
   }
-
-}
+}

package/styles/base/_titles.scss

@@ -1,159 +1,237 @@
-@use 'sass:map';
-@import './../functions',
-        './../mixins',
-        './../variables';
-
-$highlight: ('width': 64, 'height': 4, 'margin-top': 12, 'border-radius': 8);
-$pre-title: ('font-size': 14, 'font-size_md': 16, 'letter-spacing': 1.28, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 24);
-$title: ('font-size': 32, 'font-size_md': 52, 'letter-spacing': -0.16, 'line-height': 40, 'line-height_md': 64, 'margin-bottom': 16, 'margin-bottom_md': 32);
-$h1: ('font-size': 28, 'font-size_md': 40, 'line-height': 32, 'line-height_md': 48, 'letter-spacing': -0.16, 'margin-bottom': 16);
-$h2: ('font-size': 24, 'font-size_md': 28, 'line-height': 32, 'line-height_md': 40, 'margin-top': 40, 'margin-bottom': 16);
-$h3: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height_md': 32, 'margin-top': 60, 'margin-bottom': 20);
-$h4: ('font-size': 18, 'font-size_md': 20, 'line-height': 24, 'line-height_md': 28, 'margin-top': 40, 'margin-bottom': 20);
-$h5: ('font-size': 12, 'font-size_md': 14, 'line-height': 16, 'margin-top': 16, 'margin-bottom': 16);
-$h6: ('font-size': 12, 'font-size_md': 11, 'line-height': 16);
-$subtitle: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height_md': 32, 'margin-bottom': 20);
-$count-icon: ('width': 15, 'margin-horizontal': 8, 'offset': 1);
-
-@mixin highlight {
+@import './../functions', './../mixins', './../variables';
+
+$highlight: (
+  'width': 64,
+  'height': 4,
+  'margin-top': 12,
+  'border-radius': 8,
+);
+$pre-title: (
+  'font-size': 14,
+  'font-size_md': 16,
+  'letter-spacing': 1.28,
+  'line-height': 16,
+  'line-height_md': 20,
+  'margin-bottom': 24,
+);
+$title: (
+  'font-size': 32,
+  'font-size_md': 52,
+  'letter-spacing': -0.16,
+  'line-height': 40,
+  'line-height_md': 64,
+  'margin-bottom': 16,
+  'margin-bottom_md': 32,
+);
+$h1: (
+  'font-size': 28,
+  'font-size_md': 40,
+  'line-height': 32,
+  'line-height_md': 48,
+  'letter-spacing': -0.16,
+  'margin-bottom': 16,
+);
+$h2: (
+  'font-size': 24,
+  'font-size_md': 28,
+  'line-height': 32,
+  'line-height_md': 40,
+  'margin-top': 40,
+  'margin-bottom': 16,
+);
+$h3: (
+  'font-size': 20,
+  'font-size_md': 24,
+  'line-height': 28,
+  'line-height_md': 32,
+  'margin-top': 60,
+  'margin-bottom': 20,
+);
+$h4: (
+  'font-size': 18,
+  'font-size_md': 20,
+  'line-height': 24,
+  'line-height_md': 28,
+  'margin-top': 40,
+  'margin-bottom': 20,
+);
+$h5: (
+  'font-size': 12,
+  'font-size_md': 14,
+  'line-height': 16,
+  'margin-top': 16,
+  'margin-bottom': 16,
+);
+$h6: (
+  'font-size': 12,
+  'font-size_md': 11,
+  'line-height': 16,
+);
+$subtitle: (
+  'font-size': 20,
+  'font-size_md': 24,
+  'line-height': 28,
+  'line-height_md': 32,
+  'margin-bottom': 20,
+);
+$count-icon: (
+  'width': 15,
+  'margin-horizontal': 8,
+  'offset': 1,
+);
+
+@mixin highlight($align: 'left') {
   position: relative;
-  padding-bottom: px-to-rem(map.get($highlight, 'height') + map.get($highlight, 'margin-top'));
+  padding-bottom: px-to-rem(
+    get-map($highlight, 'height') + get-map($highlight, 'margin-top')
+  );
+
+  &::after {
+    content: '';
+    width: px-to-rem(get-map($highlight, 'width'));
+    height: px-to-rem(get-map($highlight, 'height'));
+    background: get-map($theme, 'highlight_bg');
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    border-radius: px-to-rem(get-map($highlight, 'border-radius'));
+    display: block;
+  }
 
+  @if $align == 'center' {
     &::after {
-      content: '';
-      width: px-to-rem(map.get($highlight, 'width'));
-      height: px-to-rem(map.get($highlight, 'height'));
-      background: map.get($theme, 'highlight_bg');
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      border-radius: px-to-rem(map.get($highlight, 'border-radius'));
-      display: block;
+      left: 50%;
+      transform: translateX(-50%);
     }
+  }
 }
 
 @mixin pre-title {
-  margin-bottom: px-to-rem(map.get($pre-title, 'margin-bottom'));
-  font-size: px-to-rem(map.get($pre-title, 'font-size'));
-  color: map.get($theme, 'title');
+  margin-bottom: px-to-rem(get-map($pre-title, 'margin-bottom'));
+  font-size: px-to-rem(get-map($pre-title, 'font-size'));
+  color: get-map($theme, 'title');
   font-weight: 700;
-  line-height: px-to-rem(map.get($pre-title, 'line-height'));
-  letter-spacing: px-to-rem(map.get($pre-title, 'letter-spacing'));
+  line-height: px-to-rem(get-map($pre-title, 'line-height'));
+  letter-spacing: px-to-rem(get-map($pre-title, 'letter-spacing'));
   text-transform: uppercase;
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($pre-title, 'font-size_md'));
-      line-height: px-to-rem(map.get($pre-title, 'line-height_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($pre-title, 'font-size_md'));
+    line-height: px-to-rem(get-map($pre-title, 'line-height_md'));
+  }
 }
 
 @mixin title {
-  margin-bottom: px-to-rem(map.get($title, 'margin-bottom'));
-  font-size: px-to-rem(map.get($title, 'font-size'));
-  color: map.get($theme, 'title');
+  margin-bottom: px-to-rem(get-map($title, 'margin-bottom'));
+  font-size: px-to-rem(get-map($title, 'font-size'));
+  color: get-map($theme, 'title');
   font-weight: 900;
-  line-height: px-to-rem(map.get($title, 'line-height'));
-  letter-spacing: px-to-rem(map.get($title, 'letter-spacing'));
+  line-height: px-to-rem(get-map($title, 'line-height'));
+  letter-spacing: px-to-rem(get-map($title, 'letter-spacing'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($title, 'font-size_md'));
-      line-height: px-to-rem(map.get($title, 'line-height_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($title, 'font-size_md'));
+    line-height: px-to-rem(get-map($title, 'line-height_md'));
+  }
 }
 
 @mixin h1 {
-  margin-bottom: px-to-rem(map.get($h1, 'margin-bottom'));
-  font-size: px-to-rem(map.get($h1, 'font-size'));
-  color: map.get($theme, 'title');
+  margin-bottom: px-to-rem(get-map($h1, 'margin-bottom'));
+  font-size: px-to-rem(get-map($h1, 'font-size'));
+  color: get-map($theme, 'title');
   text-transform: none;
   font-weight: 900;
-  line-height: px-to-rem(map.get($h1, 'line-height'));
-  letter-spacing: px-to-rem(map.get($h1, 'letter-spacing'));
+  line-height: px-to-rem(get-map($h1, 'line-height'));
+  letter-spacing: px-to-rem(get-map($h1, 'letter-spacing'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($h1, 'font-size_md'));
-      line-height: px-to-rem(map.get($h1, 'line-height_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($h1, 'font-size_md'));
+    line-height: px-to-rem(get-map($h1, 'line-height_md'));
+  }
 }
 
 @mixin h2 {
-  margin: px-to-rem(map.get($h2, 'margin-top')) 0 px-to-rem(map.get($h2, 'margin-bottom')) 0;
-  font-size: px-to-rem(map.get($h2, 'font-size'));
-  color: map.get($theme, 'title');
+  margin: px-to-rem(get-map($h2, 'margin-top')) 0 px-to-rem(get-map($h2, 'margin-bottom'))
+    0;
+  font-size: px-to-rem(get-map($h2, 'font-size'));
+  color: get-map($theme, 'title');
   text-transform: none;
   font-weight: 900;
-  line-height: px-to-rem(map.get($h2, 'line-height'));
+  line-height: px-to-rem(get-map($h2, 'line-height'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($h2, 'font-size_md'));
-      line-height: px-to-rem(map.get($h2, 'line-height_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($h2, 'font-size_md'));
+    line-height: px-to-rem(get-map($h2, 'line-height_md'));
+  }
 }
 
 @mixin h3 {
-  margin: px-to-rem(map.get($h3, 'margin-top')) 0 px-to-rem(map.get($h3, 'margin-bottom')) 0;
-  font-size: px-to-rem(map.get($h3, 'font-size'));
-  color: map.get($theme, 'title');
+  margin: px-to-rem(get-map($h3, 'margin-top')) 0 px-to-rem(get-map($h3, 'margin-bottom'))
+    0;
+  font-size: px-to-rem(get-map($h3, 'font-size'));
+  color: get-map($theme, 'title');
   text-transform: none;
   font-weight: 900;
-  line-height: px-to-rem(map.get($h3, 'line-height'));
+  line-height: px-to-rem(get-map($h3, 'line-height'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($h3, 'font-size_md'));
-      line-height: px-to-rem(map.get($h3, 'line-height_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($h3, 'font-size_md'));
+    line-height: px-to-rem(get-map($h3, 'line-height_md'));
+  }
 }
 
 @mixin h4 {
-  margin: px-to-rem(map.get($h4, 'margin-top')) 0 px-to-rem(map.get($h4, 'margin-bottom')) 0;
-  font-size: px-to-rem(map.get($h4, 'font-size'));
-  color: map.get($theme, 'title');
+  margin: px-to-rem(get-map($h4, 'margin-top')) 0 px-to-rem(get-map($h4, 'margin-bottom'))
+    0;
+  font-size: px-to-rem(get-map($h4, 'font-size'));
+  color: get-map($theme, 'title');
   text-transform: none;
   font-weight: 900;
-  line-height: px-to-rem(map.get($h4, 'line-height'));
+  line-height: px-to-rem(get-map($h4, 'line-height'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($h4, 'font-size_md'));
-      line-height: px-to-rem(map.get($h4, 'line-height_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($h4, 'font-size_md'));
+    line-height: px-to-rem(get-map($h4, 'line-height_md'));
+  }
 }
 
 @mixin h5 {
-  margin: px-to-rem(map.get($h5, 'margin-top')) 0 px-to-rem(map.get($h5, 'margin-bottom')) 0;
-  font-size: px-to-rem(map.get($h5, 'font-size'));
-  color: map.get($theme, 'title');
+  margin: px-to-rem(get-map($h5, 'margin-top')) 0 px-to-rem(get-map($h5, 'margin-bottom'))
+    0;
+  font-size: px-to-rem(get-map($h5, 'font-size'));
+  color: get-map($theme, 'title');
   text-transform: uppercase;
   font-weight: 700;
-  line-height: px-to-rem(map.get($h5, 'line-height'));
+  line-height: px-to-rem(get-map($h5, 'line-height'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($h5, 'font-size_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($h5, 'font-size_md'));
+  }
 }
 
 @mixin h6 {
-  font-size: px-to-rem(map.get($h6, 'font-size'));
-  color: map.get($theme, 'title');
+  font-size: px-to-rem(get-map($h6, 'font-size'));
+  color: get-map($theme, 'title');
   text-transform: uppercase;
   font-weight: 700;
-  line-height: px-to-rem(map.get($h6, 'line-height'));
+  line-height: px-to-rem(get-map($h6, 'line-height'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($h6, 'font-size_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($h6, 'font-size_md'));
+  }
 }
 
 @mixin subtitle {
-  margin-bottom: px-to-rem(map.get($subtitle, 'margin-bottom'));
-  font-size: px-to-rem(map.get($subtitle, 'font-size'));
-  color: map.get($theme, 'subtitle');
+  margin-bottom: px-to-rem(get-map($subtitle, 'margin-bottom'));
+  font-size: px-to-rem(get-map($subtitle, 'font-size'));
+  color: get-map($theme, 'subtitle');
   font-weight: 400;
-  line-height: px-to-rem(map.get($subtitle, 'line-height'));
+  line-height: px-to-rem(get-map($subtitle, 'line-height'));
 
-    @include breakpoint('min-width', 'md') {
-      font-size: px-to-rem(map.get($subtitle, 'font-size_md'));
-      line-height: px-to-rem(map.get($subtitle, 'line-height_md'));
-    }
+  @include breakpoint('min-width', 'md') {
+    font-size: px-to-rem(get-map($subtitle, 'font-size_md'));
+    line-height: px-to-rem(get-map($subtitle, 'line-height_md'));
+  }
 }
 
 @layer base {
@@ -198,17 +276,17 @@ $count-icon: ('width': 15, 'margin-horizontal': 8, 'offset': 1);
   }
 
   .count {
-      &::before {
-        @include image('icons/middot.svg', true);
-
-        content: '';
-        width: px-to-rem(map.get($count-icon, 'width'));
-        height: px-to-rem(map.get($count-icon, 'width'));
-        background: currentcolor;
-        position: relative;
-        top: px-to-rem(map.get($count-icon, 'offset'));
-        margin: 0 px-to-rem(map.get($count-icon, 'margin-horizontal'));
-        display: inline-block;
-      }
-  }
-}
+    &::before {
+      @include image('icons/middot.svg', true);
+
+      content: '';
+      width: px-to-rem(get-map($count-icon, 'width'));
+      height: px-to-rem(get-map($count-icon, 'width'));
+      background: currentcolor;
+      position: relative;
+      top: px-to-rem(get-map($count-icon, 'offset'));
+      margin: 0 px-to-rem(get-map($count-icon, 'margin-horizontal'));
+      display: inline-block;
+    }
+  }
+}

package/styles/base/buttons/_button-wrapper.scss

@@ -1,9 +1,8 @@
-@use 'sass:map';
-@import './../../functions',
-        './../../mixins',
-        './../../variables';
+@import './../../functions', './../../mixins', './../../variables';
 
-$button-wrapper-button: ('margin': 12);
+$button-wrapper-button: (
+  'margin': 12,
+);
 
 @layer base {
   .button-wrapper {
@@ -14,21 +13,27 @@ $button-wrapper-button: ('margin': 12);
     flex-flow: row wrap;
     place-content: center;
 
-      li, > button, > .button {
-        margin: 0 px-to-rem(map.get($button-wrapper-button, 'margin')) px-to-rem(map.get($button-wrapper-button, 'margin')) px-to-rem(map.get($button-wrapper-button, 'margin'));
-      }
+    li,
+    > button,
+    > .button {
+      margin: 0 px-to-rem(get-map($button-wrapper-button, 'margin'))
+        px-to-rem(get-map($button-wrapper-button, 'margin'))
+        px-to-rem(get-map($button-wrapper-button, 'margin'));
+    }
 
-      li {
-        display: flex;
-        align-content: center;
+    li {
+      display: flex;
+      align-content: center;
 
-          &:last-child { margin-bottom: px-to-rem(map.get($button-wrapper-button, 'margin')); }
+      &:last-child {
+        margin-bottom: px-to-rem(get-map($button-wrapper-button, 'margin'));
       }
+    }
 
-      button, .button {
-        margin-top: auto;
-        margin-bottom: auto;
-      }
+    button,
+    .button {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
   }
-
-}
+}