superdesk-ui-framework 3.0.0-beta.0 → 3.0.0

package/app/styles/_buttons.scss

@@ -1,6 +1,7 @@
 
 $button-margin: 0 !default;
-$button-opacity-disabled: 0.25 !default;
+$button-opacity-disabled: 0.60 !default;
+$icn-button-opacity-disabled: 0.40 !default;
 
 // /// transitions for buttons.
 $button-transition: all 0.2s ease-out, color 0.1s ease-out !default;
@@ -13,360 +14,425 @@ $new-button-active-shadow: inset 0 1px 2px hsla(0, 0%, 0%, 0.3);
 $new-button-active-shadow-hollow: inset 0 0 0 1px;
 
 :root {
-  --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14);
+    --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px 0 rgba(0,0,0,.14);
 }
 
 [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);
+    --new-button-hover-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 1px 4px 0 rgba(0,0,0,.5);
 }
 
 @mixin new-button-base {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  justify-content: center;
-  margin: $button-margin;
-  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;
-  cursor: pointer;
-  background-color: var(--sd-btn-bg);
-  &:hover {
-    background-color: var(--sd-btn-bg--hover);
-    box-shadow: var(--new-button-hover-shadow);
-  }
-  &: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;
-  }
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    margin: $button-margin;
+    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;
+    cursor: pointer;
+    position: relative;
+    border: 1px solid transparent;
+    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;
+    }
 }
 @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;
-  }
+    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;
-  }
+    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 {
-  --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);
+    --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
-  &--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;
-    margin-inline-end: 0.6rem ;
-  }
-  // Colours
-  &--primary, &--success, &--warning, &--alert, &--highlight, &--sd-green, &--secondary {
-    color: $white;
+    @include new-button-base;
+    // Sizes
+    &--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-"] {
-      color: $white;
-    }
-  }
-  
-  &--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);
-  }
-
-  &--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);
-  }
+        margin-inline-start: -0.3rem;
+    }
+    // Colours
+    &--primary, &--success, &--warning, &--alert, &--highlight, &--sd-green, &--secondary {
+        color: $white;
+        [class^="icon-"], [class*=" icon-"] {
+        color: $white;
+        }
+        .sd-spinner__path {
+        stroke: $white;
+        }
+    }
+    
+    &--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);
+    }
 
-  &--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);
-  }
+    &--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);
+    }
 
-  &--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);
-  }
+    &--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);
+    }
 
-  &--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);
-  }
+    &--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);
+    }
 
-  &--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);
-  }
+    &--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);
+    }
 
-  &--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);
-  }
+    &--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);
+    }
 
-  // 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);
-      color: var(--sd-btn-color);
-    }
-  
-    &.btn--success {
-      --sd-btn-border: var(--sd-colour-success-btn-border);
-      --sd-btn-color: var(--sd-colour-success);
-      color: var(--sd-btn-color);
-    }
-  
-    &.btn--warning {
-      --sd-btn-border: var(--sd-colour-warning-btn-border);
-      --sd-btn-color: var(--sd-colour-warning);
-      color: var(--sd-btn-color);
-    }
-  
-    &.btn--alert {
-      --sd-btn-border: var(--sd-colour-alert-btn-border);
-      --sd-btn-color: var(--sd-colour-alert);
-      color: var(--sd-btn-color);
-    }
-  
-    &.btn--highlight {
-      --sd-btn-border: var(--sd-colour-highlight-btn-border);
-      --sd-btn-color: var(--sd-colour-highlight);
-      color: var(--sd-btn-color);
-    }
-  
-    &.btn--sd-green {
-      --sd-btn-border: var(--sd-colour-superdesk-btn-border);
-      --sd-btn-color: var(--sd-colour-superdesk);
-      color: var(--sd-btn-color);
-    }
-  
-    &.btn--secondary {
-      --sd-btn-border: var(--sd-colour-secondary-btn-border);
-      --sd-btn-color: var(--sd-colour-secondary);
-      color: var(--sd-btn-color);
-    }
-  }
-  // Text only
-  &.btn--text-only {
-    --sd-btn-hs: 214, 13%;
+    &--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);
+    }
 
-    color: var(--sd-colour-btn-txt-neutral);
-    @include new-button-text-only;
+    // 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);
+        }
     
-    &.btn--primary {
-      --sd-btn-hs: var(--sd-colour-primary-hs);
-      color: var(--sd-btn-txt);
-    }
-  
-    &.btn--success {
-      --sd-btn-hs: var(--sd-colour-success-hs);
-      color: var(--sd-btn-txt);
-    }
-  
-    &.btn--warning {
-      --sd-btn-hs: var(--sd-colour-warning-hs);
-      color: var(--sd-btn-txt);
-    }
-  
-    &.btn--alert {
-      --sd-btn-hs: var(--sd-colour-alert-hs);
-      color: var(--sd-btn-txt);
-    }
-  
-    &.btn--highlight {
-      --sd-btn-hs: var(--sd-colour-highlight-hs);
-      color: var(--sd-btn-txt);
-    }
-  
-    &.btn--sd-green {
-      --sd-btn-hs: var(--sd-colour-superdesk-hs);
-      color: var(--sd-btn-txt);
-    }
-  
-    &.btn--secondary {
-      --sd-btn-hs: var(--sd-colour-secondary-hs);
-      color: var(--color-text);
-    }
-  }
-  &.btn--icon-only {
-    [class^="icon-"], [class*=" icon-"] {
-      margin: 0;
+        &.btn--success {
+            --sd-btn-border: var(--sd-colour-success-btn-border);
+            --sd-btn-color: var(--sd-colour-success);
+        }
+    
+        &.btn--warning {
+            --sd-btn-border: var(--sd-colour-warning-btn-border);
+            --sd-btn-color: var(--sd-colour-warning);
+        }
+    
+        &.btn--alert {
+            --sd-btn-border: var(--sd-colour-alert-btn-border);
+            --sd-btn-color: var(--sd-colour-alert);
+        }
+    
+        &.btn--highlight {
+            --sd-btn-border: var(--sd-colour-highlight-btn-border);
+            --sd-btn-color: var(--sd-colour-highlight);
+        }
+    
+        &.btn--sd-green {
+            --sd-btn-border: var(--sd-colour-superdesk-btn-border);
+            --sd-btn-color: var(--sd-colour-superdesk);
+        }
+    
+        &.btn--secondary {
+            --sd-btn-border: var(--sd-colour-secondary-btn-border);
+            --sd-btn-color: var(--sd-colour-secondary);
+        }
+        &.btn--primary,
+        &.btn--success,
+        &.btn--warning,
+        &.btn--alert,
+        &.btn--highlight,
+        &.btn--sd-green,
+        &.btn--secondary {
+            color: var(--sd-btn-color);
+            .sd-spinner__path {
+                stroke: var(--sd-btn-color);
+            }
+        }
     }
-    &.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;
-      }
-    }
-  }
-  &.btn--disabled, &[disabled] {
-    opacity: 0.3;
-    cursor: not-allowed;
-    pointer-events: none;
-    box-shadow: none !important;
-    &:hover, &:active {
-      cursor: not-allowed;
+    // 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,
+        &.btn--alert,
+        &.btn--highlight,
+        &.btn--sd-green,
+        &.btn--secondary {
+            color: var(--sd-btn-txt);
+            .sd-spinner__path {
+                stroke: var(--sd-btn-txt);
+            }
+        }
+    }
+    &.btn--icon-only {
+        [class^="icon-"], [class*=" icon-"] {
+            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;
+            }
+        }
+    }
+    &.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: $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;
-  text-decoration: none;
-  cursor: pointer;
-  [class^="icon-"], [class*=" icon-"] {
-    color: inherit;
-    vertical-align: baseline !important;
-  }
-  &:hover {
-    opacity: 1;
+    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: hsla(214, 13%, 55%, 0);
+    color: var(--color-icon-default);
     text-decoration: none;
-    background-color: rgba(155,155,155,0.20);
-  }
-  &:focus-visible {
-    opacity: 1;
-    background-color: rgba(155,155,155,0.20);
-    box-shadow: $icn-button-focus-box-shadow;
+    cursor: pointer;
+    flex-shrink: 0;
     [class^="icon-"], [class*=" icon-"] {
-      opacity: 1;
+        color: var(--color-icon-default) !important;
+        vertical-align: baseline !important;
     }
-  }
-  &:active {
-    opacity: 1;
-    background-color: rgba(155,155,155,0.30);
-    [class^="icon-"], [class*=" icon-"] {
-      color: $sd-colour-interactive;
-      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: $height__button--small;
-    width: $height__button--small;
-  }
+    @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-"] {
+            vertical-align: baseline !important;
+            font-size: 2.4rem;
+            height: 2.4rem;
+            width: 2.4rem;
+            line-height: 2.4rem;
+        }
+        
+    }
+    &--outline {
+        border: 1px solid currentColor;
+        &:active:not(.icn-btn--disabled) {
+            border-color: var(--sd-colour-interactive);
+        }
+    }
+    &--outlineWhite {
+        color: hsla(214, 13%, 95%, 0.8) !important;
+        border: 1px solid currentColor;
+        [class^="icon-"], [class*=" icon-"] {
+            color: hsla(214, 13%, 95%, 0.8) !important;
+        }
+        &:hover:not(.icn-btn--disabled) {
+            color: hsla(214, 13%, 95%, 1) !important;
+            border-color: hsla(214, 13%, 95%, 1);
+            background-color: hsla(0, 0%, 0%, 0.4);
+            [class^="icon-"], [class*=" icon-"] {
+                color: hsla(214, 13%, 95%, 1) !important;
+            }
+        }
+        &:active:not(.icn-btn--disabled) {
+            border-color: var(--sd-colour-interactive);
+            background-color: hsla(0, 0%, 0%, 0.6);
+        }
+    }
+    &.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: rgba(155,155,155,0.20) !important;
-  }
-  &:active {
-    opacity: 1;
-    background-color: rgba(155,155,155,0.30);
-  }
-
+    @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 
@@ -410,12 +476,7 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
 .btn-icon-group {
     display: flex;
     align-items: center;
-
-    .btn + .btn {
-        gap: 6px;
-        //margin-left: 6px;
-    }
-
+    gap: 6px;
     [class^="icon-"], [class*=" icon-"] {
         opacity: 0.6;
     }
@@ -429,11 +490,12 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
     display: flex;
     flex-direction: row;
     align-items: center;
+    gap: $sd-base-increment;
     
     .btn {
         margin: 0;
     }
-    &--left {
+    &--left, &--start {
         margin-inline-end: auto;
         .sd-navbtn {
             border-inline-width: 0 1px;
@@ -453,7 +515,7 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
             border-inline-width: 0 1px;
         }
     }
-    &--right {
+    &--right, &--end {
         margin-inline-start: auto;
     }
     &--center {
@@ -475,12 +537,19 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
     &--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 {
@@ -539,6 +608,10 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
     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;
@@ -584,12 +657,47 @@ $new-button-active-shadow-hollow: inset 0 0 0 1px;
 }
 
 .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;
+        .sd-spinner {
+            margin-inline-start: -0.3rem;
+        }
+        &.btn--icon-only {
+            .sd-spinner {
+                margin-inline-start: 0;
+            }
+        }
+    }
+}
+
+.button-group {
+    .tag-label {
+        margin: 0 !important;
+    }
+}