superdesk-ui-framework 2.4.21 → 3.0.1-beta.2

package/app/styles/_buttons.scss

@@ -1,484 +1,234 @@
-/// Padding inside buttons.
-/// @type List
-$button-padding: 0 1.4rem !default;
-$button-padding-small: 0 1rem;
-$button-padding-large: 0 2rem;
 
-$button-height: $sd-base-increment * 4;
-$button-height-small: $sd-base-increment * 3;
-$button-height-large: $sd-base-increment * 5;
-
-$button-padding-icon-only: 0 0.8rem;
-$button-padding-small-icon-only: 0 0.4rem;
-$button-padding-large-icon-only: 0 1.4rem;
-
-$button-padding-icon-only-circle: 0;
-
-
-/// Margin around buttons.
-/// @type List
 $button-margin: 0 !default;
+$button-opacity-disabled: 0.60 !default;
+$icn-button-opacity-disabled: 0.40 !default;
 
-/// Default background color for buttons.
-/// @type Color
-$button-background: scale-color($default-color, $alpha: -75%) !default;
-
-/// Background color on hover for buttons.
-/// @type Color
-$button-background-hover: scale-color($button-background, $lightness: -85%) !default;
-
-/// Border color for active button state
-$active-button-border-color: scale-color($black, $alpha: -60%) !default;
-
-/// Font color for buttons.
-/// @type List
-$button-color: $grayDark !default;
-
-/// Alternative font color for buttons.
-/// @type List
-$button-color-alt: $white !default;
-
-/// Border radius for buttons, defaulted to global-radius.
-/// @type Number
-//$button-radius: $global-radius !default;
-$button-radius: 2px !default;
-
-/// Sizes for buttons / Font size
-/// @type Map
-$button-sizes: (
-  btn--small: 1rem,
-  btn--default: 1.2rem,
-  btn--large: 1.4rem,
-) !default;
-
-/// opacity for a disabled button.
-/// @type List
-$button-opacity-disabled: 0.6 !default;
-
-/// Background color lightness on hover for buttons.
-/// @type Number
-$button-background-hover-lightness: -20% !default;
+// /// transitions for buttons.
+$button-transition: all 0.2s ease-out, color 0.1s ease-out !default;
+$button-focus-box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
+$icn-button-focus-box-shadow: 0 0 0 2px $sd-colour--focus-shadow;
 
-/// Color lightness on hover for hollow buttons.
-/// @type Number
-$button-hollow-hover-lightness: -10% !default;
+////////////////////////////// NEW BUTTONS //////////////////////////////
 
-/// UI dark buttons
-$button-background-ui-dark: scale-color($default-color-ui-dark, $alpha: -75%) !default;
-$button-background-hover-ui-dark: scale-color($button-background-ui-dark, $lightness: -20%) !default;
-$button-color-ui-dark: $white !default;
-$button-background-hover-lightness-ui-dark: -20% !default;
+$new-button-active-shadow: inset 0 1px 2px hsla(0, 0%, 0%, 0.3);
+$new-button-active-shadow-hollow: inset 0 0 0 1px;
 
-/// transitions for buttons.
-$button-transition: background-color 0.2s ease-out, color 0.1s ease-out !default;
-$button-hover-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3) !default;
-$button-focus-box-shadow: 0 0 0 3px rgba(94, 169, 200, 0.30);
-$icn-button-focus-box-shadow: 0 0 0 2px rgba(94, 169, 200, 0.30);
-
-// Button-base() mixin
-@mixin button-base {
-  //@include disable-mouse-outline;
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  justify-content: center;
-  margin: $button-margin;
-  padding: $button-padding;
-  height: $button-height;
-
-  -webkit-appearance: none;
-  border: 1px solid transparent;
-  border-radius: $button-radius;
-  transition: $button-transition;
+:root {
+    --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14);
+}
 
-  font-size: map-get($button-sizes, btn--default);
-  text-transform: uppercase;
-  line-height: 1;
-  font-weight: 400;
-  letter-spacing: 0.1em;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  gap: 0.6rem;
+[data-theme="dark-ui"], .dark-ui {
+    --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 1px 4px 0 rgba(0,0,0,.5);
 }
 
-/// Expands a button to make it full-width.
-@mixin button-expand($expand: true) {
-  @if $expand {
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-  }
-  @else {
+@mixin new-button-base {
     display: inline-flex;
-    width: auto;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
     margin: $button-margin;
-  }
-}
-
-/// Active styles
-@mixin button-active-style () {
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
-    border-style: solid;
-    border-color: $active-button-border-color $active-button-border-color transparent $active-button-border-color;
-    border-width: 1px;
-}
-
-
-/// Sets the visual style of a button.
-@mixin button-style(
-  $background: $button-background,
-  $background-hover: $button-background-hover,
-  $color: $button-color,
-  $background-hover-lightness: $button-background-hover-lightness
-) {
-
-  @if $background-hover == auto {
-    $background-hover: scale-color($background, $lightness: $background-hover-lightness);
-  }
-
-  background-color: $background;
-  color: $color;
-
-  &:hover, &:focus {
-    background-color: $background-hover;
-    color: $color;
+    padding-block-start: 0;
+    padding-block-end: 0;
+    padding-inline: $padding-x__button--default;
+    height: $height__button--default;
+    font-size: $font-size__button--default;
+    -webkit-appearance: none;
+    border: none;
+    border-radius: $border-radius__base--small;
+    transition: $button-transition;
+    text-transform: uppercase;
+    line-height: 1;
+    font-weight: 400;
+    letter-spacing: 0.1em;
+    text-align: center;
     text-decoration: none;
-    box-shadow: $button-hover-box-shadow;
-  }
-  &:focus {
-    box-shadow: $button-focus-box-shadow;
-  }
-  &:active {
-    @include button-active-style;
-  }
-}
-
-/// Removes background fill on hover and focus for hollow buttons.
-@mixin button-hollow {
-  &,
-  &:hover, &:focus {
-    background-color: transparent;
-  }
-}
-
-@mixin button-hollow-style(
-  $color: $button-color,
-  $border-color: scale-color($color, $alpha: -60%),
-  $hover-lightness: $button-hollow-hover-lightness
-) {
-
-  $color-hover: scale-color($color, $alpha: $hover-lightness);
-
-  border: 1px solid $border-color;
-  color: $color;
-  box-shadow: none;
-
-  &:hover, &:focus {
-    border-color: $color-hover;
-    color: $color-hover;
-  }
-  &:focus {
-    box-shadow: $button-focus-box-shadow;
-  }
-  &:active {    
-    box-shadow: inset 0 1px 0 0 $color;
-  }
-}
-
-// UI dark
-@mixin button-ui-dark-style(
-  $background: $button-background-ui-dark,
-  $background-hover: $button-background-hover-ui-dark,
-  $color: $button-color-ui-dark,
-  $background-hover-lightness: $button-background-hover-lightness-ui-dark
-) {
-
-  @if $background-hover == auto {
-    $background-hover: scale-color($background, $lightness: $background-hover-lightness);
-  }
-
-  background-color: $background;
-  color: $color;
-
-  &:hover, &:focus {
-    background-color: $background-hover;
-    color: $color;
-  }
-  &:focus {
-    box-shadow: $button-focus-box-shadow;
-  }
-  &:active {
-    @include button-active-style;
-  }
-}
-
-@mixin button-text-only-style(
-  $background: $button-background,
-  $color: $button-color,
-  $background-hover: $button-background-hover,
-  $ui-dark: false
-) {
-  
-  // no background by default
-  background-color: transparent;
-
-  // hover for colored buttons
-  @if $background-hover == auto {
-    $background-hover: scale-color($background, $alpha: -90%);
-    box-shadow: none;
-  }
-
-  // hover for default gray button
-  @else {
-    $background-hover: scale-color($background, $alpha: -50%);
-  }
-
-  // button colors
-  // UI dark
-  @if $ui-dark {
-    color: $default-color-ui-dark;
-    $background-hover: scale-color($background, $alpha: -60%); // fix for default hover background on UI dark
-  }
-
-  // default UI (light)
-  @else {
-    color: $color;
-  }
-
-  &:hover, &:focus {
-    background-color: $background-hover;
-    color: $color;
-    box-shadow: none;
-  }
-  &:active {
-    $active-border-color: scale-color($color, $alpha: -60%);
-    box-shadow: inset 0 1px 0 0 $active-border-color;
-    border-color: $active-border-color transparent transparent transparent;
-    background-color: scale-color($background-hover, $alpha: +10%);
-  }
-}
-
-/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-@mixin button-disabled(
-  $background-color: $button-background,
-  $color: $button-color
-  ) {
-  opacity: $button-opacity-disabled;
-  cursor: not-allowed;
-  box-shadow: none;
-
-  &:hover, &:focus {
-    background-color: $background-color;
-    color: $color;
-    box-shadow: none;
+    cursor: pointer;
+    position: relative;
     border: 1px solid transparent;
-    box-shadow: none;
-
-  }
+    background-color: var(--sd-btn-bg);
+    gap: 0.6rem;
+    &:hover {
+        background-color: var(--sd-btn-bg--hover);
+        box-shadow: var(--new-button-hover-shadow);
+        text-decoration: none !important;
+    }
+    &:active {
+        background-color: var(--sd-btn-bg--active);
+        box-shadow: $new-button-active-shadow;
+    }
+    &:focus-visible {
+        box-shadow: $button-focus-box-shadow;
+    }
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
 }
-
-/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
-@mixin button(
-  $expand: false,
-  $background: $button-background,
-  $background-hover: $button-background-hover,
-  $color: $button-color
-) {
-  @include button-base;
-
-  @include button-style($background, $background-hover, $color);
-
-  @if $expand {
-    @include button-expand;
-  }
+@mixin new-button-hollow {
+    border: 1px solid var(--sd-btn-border);
+    background-color: transparent !important;
+    box-shadow: inset 0 0 0 0px var(--sd-btn-border);
+    [class^="icon-"], [class*=" icon-"] {
+        color: var(--sd-btn-color);
+    }
+    &:hover {
+        box-shadow: none;
+        border-color: var(--sd-btn-color);
+        box-shadow: inset 0 0 0 2px var(--sd-btn-border);
+    }
+    &:active {
+        border-color: var(--sd-btn-color);
+        box-shadow: inset 0 0 0 2px var(--sd-btn-color);
+    }
+    &:focus-visible {
+        box-shadow: $button-focus-box-shadow;
+    }
+}
+@mixin new-button-text-only {
+    border: none;
+    background-color: transparent;
+    --sd-btn-hs: 214, 13%;
+    --sd-btn-l: var(--sd-btn-hs), 50%;
+    --sd-btn-txt: hsla(var(--sd-btn-l), 1);
+    --sd-btn-bg--hover: hsla(var(--sd-btn-l), 0.20);
+    --sd-btn-bg--active: hsla(var(--sd-btn-l), 0.16);
+    --sd-btn-bg--shadow: hsla(var(--sd-btn-l), 0.24);
+    [class^="icon-"], [class*=" icon-"] {
+        color: currentColor;
+    }
+    &:hover {
+        box-shadow: none;
+        background-color: var(--sd-btn-bg--hover);
+        box-shadow: inset 0 0 0 0 var(--sd-btn-bg--shadow);
+    }
+    &:active {
+        box-shadow: none;
+        background-color: var(--sd-btn-bg--active);
+        box-shadow: inset 0 0 0 4px var(--sd-btn-bg--shadow);
+    }
+    &:focus-visible {
+        box-shadow: $button-focus-box-shadow;
+    }
 }
 
 .btn {
-    @include button;
+    --sd-btn-bg: var(--sd-colour-btn-bg-neutral);
+    --sd-btn-bg--hover: var(--sd-colour-btn-bg-neutral--hover);
+    --sd-btn-bg--active: var(--sd-colour-btn-bg-neutral--active);
+    color: var(--sd-colour-btn-txt-neutral);
 
+    @include new-button-base;
     // Sizes
-    @each $size, $value in map-remove($button-sizes, btn--default) {
-      &.#{$size} {
-        font-size: $value;
-        @if $size == btn--small {
-          padding: $button-padding-small;
-          height: $button-height-small;
+    &--small {
+        padding: $padding-x__button--small;
+        height: $height__button--small;
+        font-size: $font-size__button--small;
+    }
+    &--large {
+        padding: $padding-x__button--large;
+        height: $height__button--large;
+        font-size: $font-size__button--large;
+    }
+    &--expanded {
+        width: 100%;
+        margin-right: 0;
+        margin-left: 0;
+    }
+    [class^="icon-"], [class*=" icon-"] {
+        margin-inline-start: -0.3rem;
+    }
+    // Colours
+    &--primary, &--success, &--warning, &--alert, &--highlight, &--sd-green, &--secondary {
+        color: $white;
+        [class^="icon-"], [class*=" icon-"] {
+        color: $white;
         }
-        @if $size == btn--large {
-          padding: $button-padding-large;
-          height: $button-height-large;
+        .sd-spinner__path {
+        stroke: $white;
         }
-      }
     }
-
-    &.btn--active { @include button-active-style; }
     
-    &.btn--expanded { @include button-expand; }
-
-    // Colors
-    @each $name, $color in $sd-basic-palette {
-        &.btn--#{$name} {
-          @if $name == default {
-            @include button-style($button-background, auto, $button-color); // btn--default class if needed
-          }
-          @else {
-            @include button-style($color, auto, $button-color-alt); // for all colored buttons we use alt color (white)
-            [class^="icon-"], [class*=" icon-"] {
-              color: $button-color-alt;
-            }
-          }
-        }
+    &--primary {
+        --sd-btn-bg: var(--sd-colour-primary);
+        --sd-btn-bg--hover: var(--sd-colour-primary--hover);
+        --sd-btn-bg--active: var(--sd-colour-primary--active);
     }
 
-    // Hollow style    
-    &.btn--hollow {
-      @include button-hollow;
-      @include button-hollow-style;
-
-      @each $name, $color in $sd-basic-palette {
-        &.btn--#{$name} {
-          @include button-hollow-style($color);
-          [class^="icon-"], [class*=" icon-"] {
-            color: $color;
-          }
-        }
-      }
+    &--success {
+        --sd-btn-bg: var(--sd-colour-success);
+        --sd-btn-bg--hover: var(--sd-colour-success--hover);
+        --sd-btn-bg--active: var(--sd-colour-success--active);
     }
 
-    // Text only style
-    &.btn--text-only {
-      @include button-text-only-style;
+    &--warning {
+        --sd-btn-bg: var(--sd-colour-warning);
+        --sd-btn-bg--hover: var(--sd-colour-warning--hover);
+        --sd-btn-bg--active: var(--sd-colour-warning--active);
+    }
 
-      @each $name, $color in $sd-basic-palette {
-        &.btn--#{$name} {
-          @include button-text-only-style($color, $color, auto, false);
-        }
-      }
+    &--alert {
+        --sd-btn-bg: var(--sd-colour-alert);
+        --sd-btn-bg--hover: var(--sd-colour-alert--hover);
+        --sd-btn-bg--active: var(--sd-colour-alert--active);
     }
-    // Disabled style
-    &.btn--disabled,
-    &[disabled] {
-      @include button-disabled;
 
-      @each $name, $color in $sd-basic-palette {
-        &.btn--#{$name} {
-          @include button-disabled($color, $button-color-alt);
-        }
-      }
+    &--highlight {
+        --sd-btn-bg: var(--sd-colour-highlight);
+        --sd-btn-bg--hover: var(--sd-colour-highlight--hover);
+        --sd-btn-bg--active: var(--sd-colour-highlight--active);
+    }
 
-      // Hollow disabled style
-      &.btn--hollow {
-        @include button-hollow;
-        @include button-hollow-style($button-color, 0);
-        &:active {
-          box-shadow: none;
-        }
+    &--sd-green {
+        --sd-btn-bg: var(--sd-colour-superdesk);
+        --sd-btn-bg--hover: var(--sd-colour-superdesk--hover);
+        --sd-btn-bg--active: var(--sd-colour-superdesk--active);
+    }
 
-        @each $name, $color in $sd-basic-palette {
-          &.btn--#{$name} {
-            @include button-hollow-style($color, 0);
-            &:active {
-              box-shadow: none;
-            }
-          }
-        }
-      }
+    &--secondary {
+        --sd-btn-bg: var(--sd-colour-secondary);
+        --sd-btn-bg--hover: var(--sd-colour-secondary--hover);
+        --sd-btn-bg--active: var(--sd-colour-secondary--active);
+    }
 
-      // Text only disabled style
-      &.btn--text-only {
-        @include button-text-only-style($background: transparent);
-        &:hover, &:focus, &:active {
-          box-shadow: none;
-          border-color: transparent;
-          background: transparent;
-        }
-        &:focus {
-          box-shadow: $button-focus-box-shadow;
+    // Hollow style
+    &.btn--hollow {
+        --sd-btn-border: var(--sd-colour-btn-border-neutral);
+        --sd-btn-color: var(--sd-colour-btn-txt-neutral);
+        color: var(--sd-colour-btn-txt-neutral);
+        @include new-button-hollow;
+        &.btn--primary {
+            --sd-btn-border: var(--sd-colour-interactive-btn-border);
+            --sd-btn-color: var(--sd-colour-interactive);
         }
-
-        @each $name, $color in $sd-basic-palette {
-          &.btn--#{$name} {
-            @include button-text-only-style(transparent, $color, transparent, false);
-            &:hover, &:focus, &:active {
-              box-shadow: none;
-              border-color: transparent;
-              background: transparent;
-            }
-          }
+    
+        &.btn--success {
+            --sd-btn-border: var(--sd-colour-success-btn-border);
+            --sd-btn-color: var(--sd-colour-success);
         }
-      }
-    }
-
-    // UI dark style
-    &.btn--ui-dark {
-      @include button-ui-dark-style;
-
-      @each $name, $color in $sd-basic-palette-ui-dark {
-        &.btn--#{$name} {
-          @include button-ui-dark-style($color, auto, $button-color-alt);
+    
+        &.btn--warning {
+            --sd-btn-border: var(--sd-colour-warning-btn-border);
+            --sd-btn-color: var(--sd-colour-warning);
         }
-      }
-      
-      &.btn--disabled,
-      &[disabled] {
-        @include button-ui-dark-style($button-background-ui-dark, auto, $button-color-ui-dark, 0);
-
-        &:hover, &:focus, &:active {
-          box-shadow: none;
-          border-color: transparent;
+    
+        &.btn--alert {
+            --sd-btn-border: var(--sd-colour-alert-btn-border);
+            --sd-btn-color: var(--sd-colour-alert);
         }
-        @each $name, $color in $sd-basic-palette-ui-dark {
-          &.btn--#{$name} {
-            @include button-ui-dark-style($color, auto, $button-color-alt, 0);
-            &:hover, &:focus, &:active {
-              box-shadow: none;
-              border-color: transparent;
-            }
-          }
+    
+        &.btn--highlight {
+            --sd-btn-border: var(--sd-colour-highlight-btn-border);
+            --sd-btn-color: var(--sd-colour-highlight);
         }
-      }
-
-      [class^="icon-"], [class*=" icon-"] {
-        color: $button-color-alt;
-      }
-      
-      // Text only UI dark
-      &.btn--text-only {
-        @include button-text-only-style($button-background-ui-dark, $default-color-ui-dark, auto, true);
-
-        @each $name, $color in $sd-basic-palette-ui-dark {
-          $btn-background-hover: scale-color($color, $alpha: -80%);
-          &.btn--#{$name} {
-            @include button-ui-dark-style(transparent, $btn-background-hover, $color);
-            &:active {
-              $active-border-color: scale-color($color, $alpha: -60%);
-              box-shadow: inset 0 1px 0 0 $active-border-color;
-              border-color: $active-border-color transparent transparent transparent;
-            }
-          }
+    
+        &.btn--sd-green {
+            --sd-btn-border: var(--sd-colour-superdesk-btn-border);
+            --sd-btn-color: var(--sd-colour-superdesk);
         }
-
-        // Text only disabled UI dark
-        &.btn--disabled,
-        &[disabled] {
-          @include button-text-only-style(transparent, $default-color-ui-dark, transparent, true);
-          &:hover, &:focus, &:active {
-            box-shadow: none;
-            border-color: transparent;
-          }
-
-          @each $name, $color in $sd-basic-palette-ui-dark {
-            &.btn--#{$name} {
-              @include button-ui-dark-style(transparent, transparent, $color);
-              &:hover, &:focus, &:active {
-                box-shadow: none;
-                border-color: transparent;
-              }
-            }
-          }
+    
+        &.btn--secondary {
+            --sd-btn-border: var(--sd-colour-secondary-btn-border);
+            --sd-btn-color: var(--sd-colour-secondary);
         }
-
         &.btn--primary,
         &.btn--success,
         &.btn--warning,
@@ -486,24 +236,44 @@ $icn-button-focus-box-shadow: 0 0 0 2px rgba(94, 169, 200, 0.30);
         &.btn--highlight,
         &.btn--sd-green,
         &.btn--secondary {
-            color: var(--sd-btn-txt);
+            color: var(--sd-btn-color);
             .sd-spinner__path {
-                stroke: var(--sd-btn-txt);
+                stroke: var(--sd-btn-color);
             }
         }
-      }
-
-      // Hollow UI dark
-      &.btn--hollow {
-        @include button-hollow;
-        @include button-hollow-style(scale-color($default-color-ui-dark, $alpha: -30%));
-
-        @each $name, $color in $sd-basic-palette-ui-dark {
-          &.btn--#{$name} {
-            @include button-hollow-style($color);
-          }
+    }
+    // Text only
+    &.btn--text-only {
+        --sd-btn-hs: 214, 13%;
+        color: var(--sd-colour-btn-txt-neutral);
+        @include new-button-text-only;
+        &.btn--primary {
+            --sd-btn-hs: var(--sd-colour-primary-hs);
+        }
+    
+        &.btn--success {
+            --sd-btn-hs: var(--sd-colour-success-hs);
+        }
+    
+        &.btn--warning {
+            --sd-btn-hs: var(--sd-colour-warning-hs);
+        }
+    
+        &.btn--alert {
+            --sd-btn-hs: var(--sd-colour-alert-hs);
+        }
+    
+        &.btn--highlight {
+            --sd-btn-hs: var(--sd-colour-highlight-hs);
+        }
+    
+        &.btn--sd-green {
+            --sd-btn-hs: var(--sd-colour-superdesk-hs);
+        }
+    
+        &.btn--secondary {
+            --sd-btn-hs: var(--sd-colour-secondary-hs);
         }
-
         &.btn--primary,
         &.btn--success,
         &.btn--warning,
@@ -511,656 +281,402 @@ $icn-button-focus-box-shadow: 0 0 0 2px rgba(94, 169, 200, 0.30);
         &.btn--highlight,
         &.btn--sd-green,
         &.btn--secondary {
-            color: var(--sd-btn-color);
+            color: var(--sd-btn-txt);
             .sd-spinner__path {
-                stroke: var(--sd-btn-color);
-            }
-        }
-        
-        // Hollow disabled UI dark
-        &.btn--disabled,
-        &[disabled] {
-          @include button-hollow;
-          @include button-hollow-style($default-color-ui-dark, 0);
-          &:hover, &:focus, &:active {
-            box-shadow: none;
-          }
-
-          @each $name, $color in $sd-basic-palette-ui-dark {
-            &.btn--#{$name} {
-              @include button-hollow-style($color, 0);
-              &:hover, &:focus, &:active {
-                box-shadow: none;
-              }
+                stroke: var(--sd-btn-txt);
             }
-          }
         }
-      }
-    }
-
-    // Add some space, i there is more buttons side by side
-    &+.btn {
-      margin-left: 4px;
-    }
-    // Icons inside buttons (with text included as well)
-    [class^="icon-"], [class*=" icon-"] {
-        margin: 0 0.6rem 0 -0.3rem;
-        line-height: 1;
-        vertical-align: middle;
     }
     &.btn--icon-only {
-      padding: $button-padding-icon-only;
-      justify-content: center;
-      [class^="icon-"], [class*=" icon-"] {
-          display:inline-block;
-          margin: 0;
-          vertical-align: middle;
-      }
-      &.btn--large {
-        padding: $button-padding-large-icon-only;
-        
-      }
-      &.btn--small {
-        padding: $button-padding-small-icon-only;
-        
-      }
-    }
-    &.btn--icon-only-circle {
-      padding: $button-padding-icon-only-circle;
-      width: $button-height;
-      justify-content: center;
-      border-radius: 50%;
-      [class^="icon-"], [class*=" icon-"] {
-          display:inline-block;
-          margin: 0;
-          vertical-align: middle;
-      }
-      &.btn--large {
-        //padding: $button-padding-icon-only-circle;
-        width: $button-height-large;
-      }
-      &.btn--small {
-        //padding: $button-padding-icon-only-circle;
-        width: $button-height-small;
-      }
-
-      &.btn--text-only {
-        @include button-text-only-style;
-        transition: background-color 0.2s ease-out, color 0.1s ease-out, opacity 0.1s ease-out;
-        opacity: 0.5;
-          [class^="icon-"], [class*=" icon-"] {
-            color:inherit;
-        }
-          &:hover, &:focus, &:active {
-          box-shadow: none;
-          opacity:1;
-          border-color: transparent;
-        }
-          &:hover {
-          background-color: rgba(35,35,35,0);
-        }
-          &:focus, &:active {
-          background-color: rgba(35,35,35,0.2);
-        }
-        &.btn--ui-dark {
-          [class^="icon-"], [class*=" icon-"] {
-            color:$white;
-          }
-        }
-      }
-    }
-
-    &--primary, &--success, &--warning, &--alert, &--highlight, &--sd-green, &--secondary {
-        color: $white;
         [class^="icon-"], [class*=" icon-"] {
-        color: $white;
-        }
-        .sd-spinner__path {
-        stroke: $white;
-        }
-    }
-}
-
-// SD create button
-.sd-create-btn {
-    width: 4.8rem;
-    height: $subnav-height;
-    line-height: 4.8rem;
-    padding: 0 !important;
-    overflow: hidden;
-    position: relative;
-    background: $white;
-    vertical-align: top; // fix for active state
-    i {
-        position: absolute;
-        z-index: 1;
-        display: block;
-        top: 50%; margin-top: -0.8rem;
-        left: 50%; margin-left: -0.8rem;
-        opacity: 1 !important;
-        color: $white !important;
-        line-height: 1.6rem !important;
-    }
-    .circle {
-        @include border-box();
-        display: inline-block;
-        text-align: center;
-        width: 2.6rem;
-        height: 2.6rem;
-        margin: 0;
-        padding: 0;
-        margin-top: 1.1rem;
-        border-radius: 50%;
-        background-color: $sd-blue;
-        color: $white;
-        position: relative;
-        @include transition(all, 60ms, ease-in);
-    }
-    &:hover {
-        .circle {
-            width: 3.4rem;
-            height: 3.4rem;
-            margin-top: 0.7rem;
-            margin-left: 0;
+            margin: 0;
+        }
+        &.btn--icon-only-circle {
+            border-radius: $border-radius__base--full;
+            padding: 0;
+            width: $height__button--default;
+            &.btn--small {
+                width: $height__button--small;
+            }
+            &.btn--large {
+                width: $height__button--large;
+            }
         }
     }
-    &:active {
-        .circle {
-          width: 6.8rem;
-          height: 6.8rem;
-          margin: -1rem 0 0 -1rem;
-          @include transition(all, 30ms, ease-in);
+    &.btn--disabled, &[disabled] {
+        opacity: $button-opacity-disabled;
+        cursor: not-allowed;
+        pointer-events: none;
+        box-shadow: none !important;
+        &:hover, &:active {
+        cursor: not-allowed;
         }
     }
 }
+////////////////////////////// END NEW BUTTONS /////////////////////////////
 
 // Plain Icon buttons
-
 @mixin icn-btn-style () {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.6rem;
-  transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
-  height: $sd-base-increment * 4;
-  width: $sd-base-increment * 4;
-  border-radius: 50%;
-  background-color: transparent;
-  opacity: 0.75;
-  background-color: rgba(55,55,55,0);
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  [class^="icon-"], [class*=" icon-"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.6rem;
+    transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
+    height: $height__button--default;
+    width: $height__button--default;
+    border-radius: $border-radius__base--full;
+    background-color: transparent;
+    opacity: 0.75;
+    background-color: rgba(55,55,55,0);
     color: inherit;
-    vertical-align: baseline !important;
-  }
-  &:hover {
-    opacity: 1;
     text-decoration: none;
-  }
-  &:focus {
-    opacity: 1;
-    background-color: rgba(155,155,155,0.15);
-    box-shadow: $icn-button-focus-box-shadow;
+    cursor: pointer;
+    flex-shrink: 0;
     [class^="icon-"], [class*=" icon-"] {
-      opacity: 1;
+        color: inherit;
+        vertical-align: baseline !important;
     }
-  }
-  &:active {
-    opacity: 1;
-    background-color: rgba(155,155,155,0.25);
-    [class^="icon-"], [class*=" icon-"] {
-      color: $sd-blue;
-      opacity: 1;
+    &:hover {
+        opacity: 1;
+        text-decoration: none;
+        background-color: hsla(214, 13%, 55%, 0.2);
+    }
+    &:focus-visible {
+        opacity: 1;
+        background-color: hsla(214, 13%, 55%, 0.2);
+        box-shadow: $icn-button-focus-box-shadow;
+        outline: none;
+        [class^="icon-"], [class*=" icon-"] {
+            opacity: 1;
+        }
+    }
+    &:active {
+        opacity: 1;
+        background-color: hsla(214, 13%, 55%, 0.3);
+        [class^="icon-"], [class*=" icon-"] {
+            color: $sd-colour-interactive;
+            opacity: 1;
+        }
+    }
+    &--disabled {
+        opacity: $icn-button-opacity-disabled;
+        &:hover, &:active, &:focus-visible {
+            background-color: transparent !important;
+            cursor: not-allowed;
+            opacity: $icn-button-opacity-disabled;
+            [class^="icon-"], [class*=" icon-"] {
+                opacity: 1;
+                color: inherit !important;
+            }
+        }
     }
-  }
-  &--disabled {
-    opacity: $button-opacity-disabled;
-  }
 }
 
 .icn-btn {
-  @include icn-btn-style;
-  &--small {
-    height: 1.25em;
-    width: 1.25em;
-  }
-}
-
-
-// Radio styled buttons
-// --------------------------------------------------
-
-$checkBtnColor: #546E7A;
-$checkBtnColorActive: #2c7694;
-
-.btn__check {
-    position: relative;
-    color: $white;
-    padding: 0.7rem 1.6rem;
-    background: $checkBtnColor;
-    border: none;
-    font-size: 1.3rem;
-    border-radius: 3px;
-    transition: $button-transition;
-    &:hover {
-        cursor: pointer;
-        background: scale-color($checkBtnColor, $lightness: 5%);
-    }
-    &.btn__check--active, &:active {
-        background: $checkBtnColorActive;
-        box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.2);
-        &:after {
-            content: "";
-            width: 4.2rem;
-            position: absolute;
-            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MnB4IiBoZWlnaHQ9IjQycHgiIHZpZXdCb3g9IjAgMCA0MiA0MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDIgNDIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBvcGFjaXR5PSIwLjU4IiBmaWxsPSIjRkZGRkZGIiBkPSJNMjEsMEM5LjQsMCwwLDkuNCwwLDIxYzAsMTEuNiw5LjQsMjEsMjEsMjFzMjEtOS40LDIxLTIxQzQyLDkuNCwzMi42LDAsMjEsMHogTTE3LDMzTDcsMjMKCWw0LTRsNiw2bDE0LTE0bDQsNEwxNywzM3oiLz4KPC9zdmc+Cg==) no-repeat;
-            background-size: 4.2rem;
-            background-position: 0 -0.2rem;
-            top: 0; 
-            bottom: 0;
-            right: 0.8rem;
-            opacity: 0.3;
+    @include icn-btn-style;
+    &--small {
+        height: $height__button--small;
+        width: $height__button--small;
+    }
+    &--x-large {
+        height: $height__button--x-large;
+        width: $height__button--x-large;
+        [class^="icon-"], [class*=" icon-"] {
+            color: inherit;
+            vertical-align: baseline !important;
+            font-size: 2.4rem;
+            height: 2.4rem;
+            width: 2.4rem;
+            line-height: 2.4rem;
         }
+        
     }
-    &.btn__check--active {
-      cursor: default;
-    }
-    &:active {
-        background: scale-color($checkBtnColor, $lightness: 5%);
-        box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.2);
-        &:after {
-          opacity: 0.05;
+    &--outline {
+        border: 1px solid currentColor;
+        &:active:not(.icn-btn--disabled) {
+            border-color: var(--sd-colour-interactive);
         }
     }
-
-    &.btn__check--active:disabled {
-        opacity: 0.5;
-        background-color: rgba(123,123,123,0.5);
-        &:after {
-          opacity: 0.15;
+    &--outlineWhite {
+        color: hsla(214, 13%, 95%, 0.8);
+        border: 1px solid currentColor;
+        &:hover:not(.icn-btn--disabled) {
+            color: hsla(214, 13%, 95%, 1);
+            border-color: hsla(214, 13%, 95%, 1);
+            background-color: hsla(0, 0%, 0%, 0.4);
+        }
+        &:active:not(.icn-btn--disabled) {
+            border-color: var(--sd-colour-interactive);
+            background-color: hsla(0, 0%, 0%, 0.6);
         }
     }
-    &:disabled {
-        opacity: 0.5;
-        color:rgba(255,255,255,0.5);
-        background-color: rgba(123,123,123,0.5);
-        //&:not(.btn__check--active) { background: $checkBtnColor !important; }
-        &:hover { cursor: not-allowed; }
+    &.icn-btn--x-large.icn-btn--outline,
+    &.icn-btn--x-large.icn-btn--outlineWhite {
+        border-width: 2px;
+    }
+}
+.p-dialog-header-close {
+    @include icn-btn-style;
+    height: $height__button--small;
+    width: $height__button--small;
+    &:hover {
+        opacity: 1;
+        text-decoration: none;
+        background-color: hsla(0, 0%, 61%, 0.2) !important;
+    }
+    &:active {
+        opacity: 1;
+        background-color: hsla(0, 0%, 61%, 0.3);
     }
 }
 
 // Button navigation 
 // --------------------------------------------------
 
-$button-nav-color: currentColor;
-
 .button-nav {
   display: flex;
   flex-direction: row;
   align-content: center;
-  .button-nav__btn {
-    margin: 0 0.5rem;
-  }
+  gap: $sd-base-increment;
 }
 .button-nav__btn {
-    
-  display: inline-block;
-  vertical-align: middle;
-  margin: $button-margin;
-  padding: 0.7rem 1.8rem;
-  background: transparent;
-  -webkit-appearance: none;
-  border: none;
-  border-radius: 1em;
-  transition: $button-transition;
-  font-size: 1.4rem;
-  line-height: 1;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  &:hover {
-    background: rgba(123,123,123,0.2)
-  }
-  &:active, &--active, &--active:hover {
-    color: scale-color($white, $alpha: -20%);
-    background: rgba(0, 0, 0, 0.35);
-    box-shadow: inset 0 2px 0 0 rgba(0,0,0,.25);
-  }
+    color: var(--color-text);
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+    padding-block-start: 0.7rem;
+    padding-block-end: 0.7rem;
+    padding-inline: 1.8rem;
+    background: transparent;
+    -webkit-appearance: none;
+    border: none;
+    border-radius: $border-radius__base--full;
+    transition: $button-transition;
+    font-size: 1.4rem;
+    line-height: 1;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    background-color: var(--sd-colour-bg__button-nav-btn);
+    &:hover {
+        background-color: var(--sd-colour-bg__button-nav-btn--hover);
+    }
+    &:active, &--active, &--active:hover {
+        background-color: var(--sd-colour-bg__button-nav-btn--active);
+        box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.25);
+    }
 }
 
 // Button icon group 
 .btn-icon-group {
-  display: flex;
-  align-items: center;
-
-  .btn + .btn {
-    margin-left: 6px;
-  }
-
-  [class^="icon-"], [class*=" icon-"] {
-    opacity: 0.6;
-  }
-}
-
-// DARK UI ---------------------------------------------
-//------------------------------------------------------
-
-.dark-ui,
-[data-theme="dark-ui"],
-[class^="--dark-ui"],
-[class*="--dark-ui"] {
-  .btn.btn--ui-dark.btn--hollow.btn--active {
-    color: $sd-blue;
-    background-color: rgba(0, 0, 0, 0.3);
-    box-shadow: inset 0 2px 0 rgba(0,0,0,0.8);
-    i {
-      color: inherit;
-    }
-  }
-
-  .btn:not(.btn--success):not(.btn--primary):not(.btn--alert):not(.btn--warning):not(.btn--highlight):not(.btn--sd-green):not(.btn--hollow):not(.btn--text-only) {
-      color: inherit;
-      background-color: hsla(0, 0%, 50%, 0.5);
-      &:hover {
-        background-color: hsla(0, 0%, 40%, 0.5);
-      }
-  }
-  .btn.btn--text-only {
-    &:not(.btn--success):not(.btn--primary):not(.btn--alert):not(.btn--warning):not(.btn--highlight):not(.btn--sd-green):not(.btn--hollow) {
-      color: inherit;
-      &:hover {
-        background-color: hsla(0, 0%, 40%, 0.5);
-      }
-    }
-  }
-
-  .btn {
-    &.btn--hollow {
-      @include button-hollow;
-      @include button-hollow-style(scale-color($default-color-ui-dark, $alpha: -30%));
-
-      @each $name, $color in $sd-basic-palette-ui-dark {
-        &.btn--#{$name} {
-          @include button-hollow-style($color);
-        }
-      }
-      
-      // Hollow disabled UI dark
-      &.btn--disabled,
-      &[disabled] {
-        @include button-hollow;
-        @include button-hollow-style($default-color-ui-dark, 0);
-        &:hover, &:focus, &:active {
-          box-shadow: none;
-        }
-
-        @each $name, $color in $sd-basic-palette-ui-dark {
-          &.btn--#{$name} {
-            @include button-hollow-style($color, 0);
-            &:hover, &:focus, &:active {
-              box-shadow: none;
-            }
-          }
-        }
-      }
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    [class^="icon-"], [class*=" icon-"] {
+        opacity: 0.6;
     }
-  }
 }
 
+
 // BUTTON GROUPS 
 // --------------------------------------------------
 
 .button-group {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  .btn {
-    margin: 0;
-  }
-  &--left {
-    margin-right: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: $sd-base-increment;
+    
     .btn {
-      @include sd-margin('1', 'right');
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-    .sd-navbtn {
-      border-width: 0 1px 0 0;
+        margin: 0;
     }
-    &.button-group--compact {
-      .btn {
-        @include sd-margin('0-5', 'right');
-        &:last-child {
-          margin-right: 0;
+    &--left, &--start {
+        margin-inline-end: auto;
+        .sd-navbtn {
+            border-inline-width: 0 1px;
         }
-      }
-    } 
-  }
-  &--inline {
-    margin-right: 0;
-    .btn {
-      @include sd-margin('1', 'right');
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-    .sd-navbtn {
-      border-width: 0 1px 0 0;
-    }
-    &.button-group--compact {
-      .btn {
-        @include sd-margin('0-5', 'right');
-        &:last-child {
-          margin-right: 0;
+        &.button-group--compact {
+            gap: 0.5 * $sd-base-increment;
         }
-      }
-    } 
-    &.button-group--compact {
-      .btn {
-        @include sd-margin('0-5', 'right');
-        &:last-child {
-          margin-right: 0;
+        .button-group--inline {
+            .sd-navbtn {
+                border-inline-width: 0 1px;
+            }
         }
-      }
-    } 
-  }
-  &--right {
-    margin-left: auto;
-    .btn {
-      @include sd-margin('1', 'left');
-      &:first-child {
-        margin-left: 0;
-      }
     }
-    &.button-group--compact {
-      .btn {
-        @include sd-margin('0-5', 'left');
-        &:first-child {
-          margin-right: 0;
+    &--inline {
+        margin-inline-end: 0;
+        .sd-navbtn {
+            border-inline-width: 0 1px;
         }
-      }
     }
-  }
-  &--center {
-    margin-left: auto;
-    margin-right: auto;
-    .btn {
-      @include sd-margin('0-5', 'x');
-      &:first-child {
-        margin-left: 0;
-      }
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-    .sd-navbtn {
-      border-width: 0 1px 0 0;
-      &:first-child {
-        border-width: 0 1px 0 1px;
-      }
-    }
-    &.button-group--compact {
-      .btn {
-        margin: 0 0.2rem;
-        &:first-child {
-          margin-left: 0;
-        }
-        &:last-child {
-          margin-right: 0;
-        }
-      }
+    &--right, &--end {
+        margin-inline-start: auto;
     }
-  }
-  &--vertical {
-    flex-grow: 1;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    .btn {
-      @include sd-margin('1', 'top');
-      &:first-child, &:only-child {
-        margin-top: 0;
-      }
-    }
-    &.button-group--compact {
-      .btn {
-        @include sd-margin('0-5', 'top');
-        &:first-child {
-          margin-left: 0;
-        }
-        &:last-child {
-          margin-right: 0;
+    &--center {
+        margin-inline-start: auto;
+        margin-inline-end: auto;
+        .sd-navbtn {
+            border-inline-width: 0 1px;
+            &:first-child {
+                border-inline-width: 1px 1px;
+            }
         }
-      }
     }
-  }
-}
-
-
-
-.subnav {
-  .button-group--right {
-    .btn:last-of-type {
-      @include sd-margin('2', 'right');
+    &--vertical {
+        flex-grow: 1;
+        flex-direction: column;
+        align-items: stretch;
+        justify-content: center;
+    }
+    &--comfort {
+        gap: $sd-base-increment;
+    }
+    &--loose {
+        gap: $sd-base-increment * 2;
+    }
+    &--compact {
+        gap: $sd-base-increment * 0.5;
+    }
+    &--no-space {
+        gap: unset;
+    }
+    &--padded {
+        padding-inline-start: $sd-base-increment * 2;
+        padding-inline-end: $sd-base-increment * 2;
     }
-  }
-}
-.button-group__divider {
-  width: 1px;
-  height: $sd-base-increment * 3;
-  &--mini {
-    @include sd-padding('1-5', 'left');
-    width: 0;
-    border: none !important;
-  }
-  &--small {
-    @include sd-margin('1', 'x');
-  }
-  &--medium {
-    @include sd-margin('1-5', 'x');
-  }
-  &--large {
-    @include sd-margin('2', 'x');
-  }
-  &--border {
-    border-left: 1px dotted rgba(123, 123, 123, 0.6);
-  }
-}
-
-
-
-.button-group--right {
-  .button-group__divider {
-    &--border {
-      &.button-group__divider--small {
-        @include sd-margin('0-5', 'right');
-        @include sd-margin('1-5', 'left');
-      }
-      &.button-group__divider--medium {
-        @include sd-margin('1', 'right');
-        @include sd-margin('2', 'left');
-      }
-      &.button-group__divider--large {
-        @include sd-margin('1-5', 'right');
-        margin-left: $sd-base-increment * 2.5;
-      }
-    }
-  }
-  &.button-group--padded {
-    @include sd-margin('1-5', 'right');
-  }
 }
 
-.button-group--left {
-  .button-group__divider {
+.button-group__divider {
+    width: 1px;
+    height: $sd-base-increment * 3;
+    &--mini {
+        padding: 0 !important;
+        width: 0;
+        border: none !important;
+    }
+    &--small {
+        @include sd-margin('0-5', 'x');
+    }
+    &--medium {
+        @include sd-margin('1', 'x');
+    }
+    &--large {
+        @include sd-margin('1-5', 'x');
+    }
     &--border {
-      &.button-group__divider--small {
-        @include sd-margin('0-5', 'left');
-        @include sd-margin('1-5', 'right');
-      }
-      &.button-group__divider--medium {
-        @include sd-margin('1', 'left');
-        @include sd-margin('2', 'right');
-      }
-      &.button-group__divider--large {
-        @include sd-margin('1-5', 'left');
-        margin-right: $sd-base-increment * 2.5;
-      }
-    }
-  }
-  &.button-group--padded {
-    @include sd-margin('1-5', 'left');
-  }
-}
-
-.button-group--inline {
-  &.button-group--padded {
-    @include sd-margin('1-5', 'x');
-  }
+        border-left: 1px dotted var(--sd-colour-line--strong);
+    }
 }
 
 .button-group--vertical {
-  .button-group__divider {
-    height: 1px;
-    width: auto;
-    @include sd-margin('0', 'x');
-
-    &--border {
-      border-left: none;
-      border-top: 1px dotted rgba(123, 123, 123, 0.6);
+    .button-group__divider {
+        height: 1px;
+        width: auto;
+        @include sd-margin('0', 'x');
+        &--border {
+            border-left: none;
+            border-top: 1px dotted var(--sd-colour-line--strong);
+        }
+        &.button-group__divider--mini {
+            @include sd-padding('1-5', 'top');
+        }
+        &.button-group__divider--small {
+            @include sd-margin('0-5', 'y');
+        }
+        &.button-group__divider--medium {
+            @include sd-margin('1', 'y');
+        }
+        &.button-group__divider--large {
+            @include sd-margin('1-5', 'y');
+        }
     }
-    &.button-group__divider--mini {
-      @include sd-padding('1-5', 'top');
+}
+
+.sd-create-btn {
+    width: 4.8rem;
+    height: 4.8rem;
+    line-height: 4.8rem;
+    padding: 0 !important;
+    overflow: hidden;
+    position: relative;
+    background: transparent;
+    vertical-align: top;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0px solid var(--sd-colour-line--x-light);
+    border-inline-width: 1px 0;
+    .circle {
+        display: inline-block;
+        text-align: center;
+        width: 2.6rem;
+        height: 2.6rem;
+        margin: 0;
+        padding: 0;
+        border-radius: 50%;
+        background-color: var(--sd-colour-interactive);
+        color: hsl(0, 0%, 100%);
+        position: relative;
+        transition: all 0.2s ease;
     }
-    &.button-group__divider--small {
-      @include sd-margin('0-5', 'bottom');
-      @include sd-margin('1-5', 'top');
+    &:hover {
+        .circle {
+            width: 3.4rem;
+            height: 3.4rem;
+            margin-inline-start: 0;
+        }
     }
-    &.button-group__divider--medium {
-      @include sd-margin('1', 'bottom');
-      @include sd-margin('2', 'top');
+    &:active {
+        .circle {
+            width: 6.8rem;
+            height: 6.8rem;
+            margin-inline-start: -1rem;
+            margin-inline-end: -1rem;
+            transition: all 0.05s ease;
+        }
     }
-    &.button-group__divider--large {
-      @include sd-margin('1-5', 'bottom');
-      margin-top: $sd-base-increment * 2.5;
+    i {
+        position: absolute;
+        z-index: 1;
+        display: block;
+        inset-block-start: 50%;
+        margin-block-start: -0.8rem;
+        inset-inline-start: 50%;
+        inset-inline-end: auto;
+        margin-inline-start: -0.8rem;
+        opacity: 1 !important;
+        color: hsl(0, 0%, 100%) !important;
+        line-height: 1.6rem !important;
     }
-  }
 }
 
 .visuallyhidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
 }
 
+.btn__state--loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+.btn--loading {
+    color: transparent;
+    pointer-events: none;
+}
 .btn {
     &[data-loading="true"] {
         pointer-events: none;
@@ -1174,3 +690,9 @@ $button-nav-color: currentColor;
         }
     }
 }
+
+.button-group {
+    .tag-label {
+        margin: 0 !important;
+    }
+}