@tmorrow/cre8-wc 2.0.3 → 2.0.5

package/lib/components/button/button.styles.js

@@ -1,33 +1,619 @@
-import { css } from "lit";
-const styles = css `
-@import '../../design-tokens/core/scss/theming/component';
+import { css } from 'lit';
+const styles = css `@charset "UTF-8";
+.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
+}
+
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
+}
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
+}
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
+}
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
+.cre8-u-padding-bottom-xl {
+  padding-bottom: size(4) !important;
+}
+
+.cre8-u-padding-bottom-xxl {
+  padding-bottom: size(8) !important;
+}
+
+.cre8-u-padding-left-none {
+  padding-left: 0 !important;
+}
+
+.cre8-u-padding-left-sm {
+  padding-left: size(1) !important;
+}
+
+.cre8-u-padding-left-md {
+  padding-left: size(2) !important;
+}
+
+.cre8-u-padding-left-lg {
+  padding-left: size(3) !important;
+}
+
+.cre8-u-padding-left-xl {
+  padding-left: size(4) !important;
+}
+
+.cre8-u-padding-left-xxl {
+  padding-left: size(8) !important;
+}
 
+.cre8-u-display-flex {
+  display: flex !important;
+}
+
+.cre8-u-display-block {
+  display: block !important;
+}
+
+body {
+  font-family: var(--cre8-typography-body-default-font-family);
+  font-size: var(--cre8-typography-body-default-font-size);
+  font-weight: var(--cre8-typography-body-default-font-weight);
+  line-height: var(--cre8-typography-body-default-line-height);
+  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  color: var(--cre8-color-content-default);
+  background: var(--background-default);
+}
+
+@media all and (min-width: 60rem) {
+  .page-container {
+    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
+  }
+}
+.band__inner {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media all and (min-width: 60rem) {
+  .band__inner {
+    margin-right: 0;
+  }
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+:host {
+  --cre8-z-index-1: 1;
+  --cre8-z-index-50: 50;
+  --cre8-z-index-100: 100;
+  --cre8-z-index-200: 200;
+  --cre8-z-index-1030: 1030;
+  --cre8-anim-fade-quick: 0.35s;
+  --cre8-anim-ease: ease;
+}
+
+@keyframes fadeIn {
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInFwd {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideOutRight {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideUp {
+  100% {
+    transform: translateY(0);
+  }
+}
+@media (width >= 481px) {
+  @keyframes slideInFwd {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+}
+@media (width >= 48rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 330px;
+      height: 330px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 330px;
+      height: 330px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 60rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 460px;
+      height: 460px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 460px;
+      height: 460px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 75rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 592px;
+      height: 591px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 87.5rem) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 120px));
+    }
+  }
+}
+@media (width >= 2200px) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 592px));
+    }
+  }
+}
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: var(--ripple-bg-color);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 1;
+  }
+}
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
 :host {
   display: inline-flex;
 }
+
 :host([fullWidth]) {
   display: flex;
-
 }
+
 /**
  * 1) Button or link that has functionality to it
  */
-
 /**
  * Primary button
  */
 .cre8-c-button {
-  @include cre8-typography-label-default();
+  font-family: var(--cre8-typography-label-default-font-family);
+  font-size: var(--cre8-typography-label-default-font-size);
+  font-weight: var(--cre8-typography-label-default-font-weight);
+  line-height: var(--cre8-typography-label-default-line-height);
+  text-decoration: var(--cre8-typography-label-default-text-decoration);
+  text-transform: var(--cre8-typography-label-default-text-transform);
   width: var(--cre8-button-width, auto);
   height: var(--cre8-button-height, auto);
   min-width: var(--cre8-button-min-width, auto);
   min-height: var(--cre8-button-min-height, auto);
   justify-content: center;
   text-align: center;
-  margin-top: var( --cre8-button-margin-top, 0);
-  margin-bottom: var( --cre8-button-margin-bottom, 0);
-  margin-left: var( --cre8-button-margin-left, 0);
-  margin-right: var( --cre8-button-margin-right, 0);
+  margin-top: var(--cre8-button-margin-top, 0);
+  margin-bottom: var(--cre8-button-margin-bottom, 0);
+  margin-left: var(--cre8-button-margin-left, 0);
+  margin-right: var(--cre8-button-margin-right, 0);
   display: inline-flex;
   align-items: center;
   border-width: var(--cre8-border-width-button-default);
@@ -42,114 +628,110 @@ const styles = css `
   transition: revert;
   transform: revert;
   white-space: nowrap;
-  &:hover,
-  &:focus,
-  &:active,
-  &:focus-visible {
-    border-style: var(--cre8-border-style-default);
-    box-shadow: none;
-    transform: revert;
-    transition: revert;
-  }
-  &.cre8-c-button--primary {
-    background: var(--cre8-color-button-primary-bg);
-    border-width: var(--cre8-border-width-button-default);
-    border-color: var(--cre8-color-button-primary-border);
-    border-radius: var(--cre8-border-radius-button);
-    box-shadow: var(--cre8-shadow-button);
-    color: var(--cre8-color-button-primary-content);
-    --cre8-icon-fill: var(--cre8-color-button-primary-content);
-    &:hover,
-    &:focus {
-      box-shadow: none;
-      --cre8-icon-fill: var(--cre8-color-button-primary-content-hover);
-      color: var(--cre8-color-button-primary-content-hover);
-      border-color: var(--cre8-color-button-primary-border-hover);
-      background: var(--cre8-color-button-primary-bg-hover);
-      text-decoration: none;
-      &:focus {
-        @includefocus();
-      }
-    }
-    &:focus-visible,
-    &:active,
-    &.cre8-c-button--loading {
-      box-shadow: none;
-      color: var(--cre8-color-button-primary-content-active);
-      --cre8-icon-fill: var(--cre8-color-button-primary-content-active);
-      border-color: var(--cre8-color-button-primary-border-active);
-      background-color: var(--cre8-color-button-primary-bg-active);
-    }
-    &:focus-visible{
-      @includefocus();
-    }
-    &.cre8-c-button--loading{
-      cursor: not-allowed;
-    }
-    /**
- * Disabled primary and secondary button
- */
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-primary-bg-disabled);
-    border-color: var(--cre8-color-button-primary-border-disabled);
-    color: var(--cre8-color-button-primary-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);
-    cursor: not-allowed;
-    outline: none;
-    &:hover,
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      background-color: var(--cre8-color-button-primary-bg-disabled);
-      border-color: var(--cre8-color-button-primary-border-disabled);
-      color: var(--cre8-color-button-primary-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);
-    }
-  }
 }
-
-/**
-* Primary button inverse
-*/
-&.cre8-c-button--primary.cre8-c-button--inverse {
-background: var(--cre8-color-button-primary-inverse-bg);
-border-width: var(--cre8-border-width-button-default);
-border-color: var(--cre8-color-button-primary-inverse-border);
-border-radius: var(--cre8-border-radius-button);
-box-shadow: var(--cre8-shadow-button);
-color: var(--cre8-color-button-primary-inverse-content);
---cre8-icon-fill: var(--cre8-color-button-primary-inverse-content);
-&:hover,
-&:focus {
+.cre8-c-button:hover, .cre8-c-button:focus, .cre8-c-button:active, .cre8-c-button:focus-visible {
+  border-style: var(--cre8-border-style-default);
+  box-shadow: none;
+  transform: revert;
+  transition: revert;
+}
+.cre8-c-button.cre8-c-button--primary {
+  background: var(--cre8-color-button-primary-bg);
+  border-width: var(--cre8-border-width-button-default);
+  border-color: var(--cre8-color-button-primary-border);
+  border-radius: var(--cre8-border-radius-button);
+  box-shadow: var(--cre8-shadow-button);
+  color: var(--cre8-color-button-primary-content);
+  --cre8-icon-fill: var(--cre8-color-button-primary-content);
+}
+.cre8-c-button.cre8-c-button--primary:hover, .cre8-c-button.cre8-c-button--primary:focus {
+  box-shadow: none;
+  --cre8-icon-fill: var(--cre8-color-button-primary-content-hover);
+  color: var(--cre8-color-button-primary-content-hover);
+  border-color: var(--cre8-color-button-primary-border-hover);
+  background: var(--cre8-color-button-primary-bg-hover);
+  text-decoration: none;
+}
+.cre8-c-button.cre8-c-button--primary:hover:focus, .cre8-c-button.cre8-c-button--primary:focus:focus {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--primary:focus-visible, .cre8-c-button.cre8-c-button--primary:active, .cre8-c-button.cre8-c-button--primary.cre8-c-button--loading {
+  box-shadow: none;
+  color: var(--cre8-color-button-primary-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-primary-content-active);
+  border-color: var(--cre8-color-button-primary-border-active);
+  background-color: var(--cre8-color-button-primary-bg-active);
+}
+.cre8-c-button.cre8-c-button--primary:focus-visible {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--loading {
+  cursor: not-allowed;
+}
+.cre8-c-button.cre8-c-button--primary {
+  /**
+  * Disabled primary and secondary button
+  */
+}
+.cre8-c-button.cre8-c-button--primary:disabled {
+  box-shadow: none;
+  background-color: var(--cre8-color-button-primary-bg-disabled);
+  border-color: var(--cre8-color-button-primary-border-disabled);
+  color: var(--cre8-color-button-primary-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);
+  cursor: not-allowed;
+  outline: none;
+}
+.cre8-c-button.cre8-c-button--primary:disabled:hover, .cre8-c-button.cre8-c-button--primary:disabled:focus, .cre8-c-button.cre8-c-button--primary:disabled:active, .cre8-c-button.cre8-c-button--primary:disabled:focus-visible {
+  outline: none;
+  background-color: var(--cre8-color-button-primary-bg-disabled);
+  border-color: var(--cre8-color-button-primary-border-disabled);
+  color: var(--cre8-color-button-primary-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);
+}
+.cre8-c-button {
+  /**
+  * Primary button inverse
+  */
+}
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse {
+  background: var(--cre8-color-button-primary-inverse-bg);
+  border-width: var(--cre8-border-width-button-default);
+  border-color: var(--cre8-color-button-primary-inverse-border);
+  border-radius: var(--cre8-border-radius-button);
+  box-shadow: var(--cre8-shadow-button);
+  color: var(--cre8-color-button-primary-inverse-content);
+  --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content);
+}
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:focus {
   box-shadow: none;
   --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-hover);
   color: var(--cre8-color-button-primary-inverse-content-hover);
   border-color: var(--cre8-color-button-primary-inverse-border-hover);
   background: var(--cre8-color-button-primary-inverse-bg-hover);
   text-decoration: none;
-  &:focus {
-    @includefocus();
-  }
 }
-&:focus-visible,
-&:active,
-&.cre8-c-button--loading {
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:hover:focus, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:focus:focus {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse.cre8-c-button--loading {
   box-shadow: none;
   color: var(--cre8-color-button-primary-inverse-content-active);
   --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-active);
   border-color: var(--cre8-color-button-primary-inverse-border-active);
   background-color: var(--cre8-color-button-primary-inverse-bg-active);
 }
-&:focus-visible{
-  @includefocus();
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:focus-visible {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
 }
-&.cre8-c-button--loading{
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse.cre8-c-button--loading {
   cursor: not-allowed;
 }
-
-&:disabled {
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled {
   box-shadow: none;
   background-color: var(--cre8-color-button-primary-inverse-bg-disabled);
   border-color: var(--cre8-color-button-primary-inverse-border-disabled);
@@ -157,163 +739,148 @@ color: var(--cre8-color-button-primary-inverse-content);
   --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);
   cursor: not-allowed;
   outline: none;
-  &:hover,
-  &:focus,
-  &:active,
-  &:focus-visible {
-    outline: none;
-    background-color: var(--cre8-color-button-primary-inverse-bg-disabled);
-    border-color: var(--cre8-color-button-primary-inverse-border-disabled);
-    color: var(--cre8-color-button-primary-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);
-  }
 }
+.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled:hover, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled:focus, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled:active, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled:focus-visible {
+  outline: none;
+  background-color: var(--cre8-color-button-primary-inverse-bg-disabled);
+  border-color: var(--cre8-color-button-primary-inverse-border-disabled);
+  color: var(--cre8-color-button-primary-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);
 }
-
-/**
- * Secondary button
- * The icon button shares the styles of the standard secondary button
- */
-  &.cre8-c-button--secondary {
-    background-color: var(--cre8-color-button-secondary-bg);
-    border-color: var(--cre8-color-button-secondary-border);
-    color: var(--cre8-color-button-secondary-content);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-content);
-    border-radius: var(--cre8-border-radius-button);
-    border-width: var(--cre8-border-width-button-default);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-button-secondary-bg-hover);
-    border-color: var(--cre8-color-button-secondary-border-hover);
-    color: var(--cre8-color-button-secondary-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);
-    &:focus {
-      @includefocus();
-    }
-  }
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    transition: none;
-    transform: none;
-    background-color: var(--cre8-color-button-secondary-bg-active);
-    border-color: var(--cre8-color-button-secondary-border-active);
-    color: var(--cre8-color-button-secondary-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
-  }
-  &:focus-visible {
-    @includefocus();
-  }
-  &.cre8-c-button--loading {
-    cursor: not-allowed;
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-secondary-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-border-disabled);
-    color: var(--cre8-color-button-secondary-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);
-    outline: none;
-    border-radius: var(--cre8-border-radius-button);
-    border-width: var(--cre8-border-width-button-default);
-    cursor: not-allowed;
-    &:hover,
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      background-color: var(--cre8-color-button-secondary-bg-disabled);
-      border-color: var(--cre8-color-button-secondary-border-disabled);
-      color: var(--cre8-color-button-secondary-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);
-    }
-  }
+.cre8-c-button {
+  /**
+   * Secondary button
+   * The icon button shares the styles of the standard secondary button
+   */
 }
-
- /**
- * Secondary button neutral
- */
- &.cre8-c-button--secondary.cre8-c-button--neutral {
-    background-color: var(--cre8-color-button-secondary-neutral-bg);
-    border-color: var(--cre8-color-button-secondary-neutral-border);
-    color: var(--cre8-color-button-secondary-neutral-content);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content);
-    border-radius: var(--cre8-border-radius-button);
-    border-width: var(--cre8-border-width-button-default);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-button-secondary-neutral-bg-hover);
-    border-color: var(--cre8-color-button-secondary-neutral-border-hover);
-    color: var(--cre8-color-button-secondary-neutral-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-hover);
-    &:focus {
-      @includefocus();
-    }
-  }
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    transition: none;
-    transform: none;
-    background-color: var(--cre8-color-button-secondary-neutral-bg-active);
-    border-color: var(--cre8-color-button-secondary-neutral-border-active);
-    color: var(--cre8-color-button-secondary-neutral-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-active);
-  }
-  &:focus-visible {
-    @includefocus();
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-neutral-border-disabled);
-    color: var(--cre8-color-button-secondary-neutral-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);
-    outline: none;
-    border-radius: var(--cre8-border-radius-button);
-    border-width: var(--cre8-border-width-button-default);
-    cursor: not-allowed;
-    &:hover,
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);
-      border-color: var(--cre8-color-button-secondary-neutral-border-disabled);
-      color: var(--cre8-color-button-secondary-neutral-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);
-    }
-  }
- }
-
-/**
- * Secondary button inverse
- */
- &.cre8-c-button--secondary.cre8-c-button--inverse {
+.cre8-c-button.cre8-c-button--secondary {
+  background-color: var(--cre8-color-button-secondary-bg);
+  border-color: var(--cre8-color-button-secondary-border);
+  color: var(--cre8-color-button-secondary-content);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content);
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+}
+.cre8-c-button.cre8-c-button--secondary:hover, .cre8-c-button.cre8-c-button--secondary:focus {
+  background-color: var(--cre8-color-button-secondary-bg-hover);
+  border-color: var(--cre8-color-button-secondary-border-hover);
+  color: var(--cre8-color-button-secondary-content-hover);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);
+}
+.cre8-c-button.cre8-c-button--secondary:hover:focus, .cre8-c-button.cre8-c-button--secondary:focus:focus {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--secondary:focus-visible, .cre8-c-button.cre8-c-button--secondary:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--loading {
+  transition: none;
+  transform: none;
+  background-color: var(--cre8-color-button-secondary-bg-active);
+  border-color: var(--cre8-color-button-secondary-border-active);
+  color: var(--cre8-color-button-secondary-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
+}
+.cre8-c-button.cre8-c-button--secondary:focus-visible {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--loading {
+  cursor: not-allowed;
+}
+.cre8-c-button.cre8-c-button--secondary:disabled {
+  box-shadow: none;
+  background-color: var(--cre8-color-button-secondary-bg-disabled);
+  border-color: var(--cre8-color-button-secondary-border-disabled);
+  color: var(--cre8-color-button-secondary-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);
+  outline: none;
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+  cursor: not-allowed;
+}
+.cre8-c-button.cre8-c-button--secondary:disabled:hover, .cre8-c-button.cre8-c-button--secondary:disabled:focus, .cre8-c-button.cre8-c-button--secondary:disabled:active, .cre8-c-button.cre8-c-button--secondary:disabled:focus-visible {
+  outline: none;
+  background-color: var(--cre8-color-button-secondary-bg-disabled);
+  border-color: var(--cre8-color-button-secondary-border-disabled);
+  color: var(--cre8-color-button-secondary-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);
+}
+.cre8-c-button {
+  /**
+  * Secondary button neutral
+  */
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral {
+  background-color: var(--cre8-color-button-secondary-neutral-bg);
+  border-color: var(--cre8-color-button-secondary-neutral-border);
+  color: var(--cre8-color-button-secondary-neutral-content);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content);
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:focus {
+  background-color: var(--cre8-color-button-secondary-neutral-bg-hover);
+  border-color: var(--cre8-color-button-secondary-neutral-border-hover);
+  color: var(--cre8-color-button-secondary-neutral-content-hover);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-hover);
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:hover:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:focus:focus {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:focus-visible, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--loading {
+  transition: none;
+  transform: none;
+  background-color: var(--cre8-color-button-secondary-neutral-bg-active);
+  border-color: var(--cre8-color-button-secondary-neutral-border-active);
+  color: var(--cre8-color-button-secondary-neutral-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-active);
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:focus-visible {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled {
+  box-shadow: none;
+  background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);
+  border-color: var(--cre8-color-button-secondary-neutral-border-disabled);
+  color: var(--cre8-color-button-secondary-neutral-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);
+  outline: none;
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+  cursor: not-allowed;
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled:focus-visible {
+  outline: none;
+  background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);
+  border-color: var(--cre8-color-button-secondary-neutral-border-disabled);
+  color: var(--cre8-color-button-secondary-neutral-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);
+}
+.cre8-c-button {
+  /**
+   * Secondary button inverse
+   */
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse {
   background-color: var(--cre8-color-button-secondary-inverse-bg);
   border-color: var(--cre8-color-button-secondary-inverse-border);
   color: var(--cre8-color-button-secondary-inverse-content);
   --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content);
   border-radius: var(--cre8-border-radius-button);
   border-width: var(--cre8-border-width-button-default);
-
-&:hover,
-&:focus {
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:focus {
   background-color: var(--cre8-color-button-secondary-inverse-bg-hover);
   border-color: var(--cre8-color-button-secondary-inverse-border-hover);
   color: var(--cre8-color-button-secondary-inverse-content-hover);
   --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-hover);
-  &:focus {
-    @includefocus();
-  }
 }
-&:focus-visible,
-&:active,
-&.cre8-c-button--loading {
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:hover:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:focus:focus {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse.cre8-c-button--loading {
   transition: none;
   transform: none;
   background-color: var(--cre8-color-button-secondary-inverse-bg-active);
@@ -321,11 +888,11 @@ color: var(--cre8-color-button-primary-inverse-content);
   color: var(--cre8-color-button-secondary-inverse-content-active);
   --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-active);
 }
-&:focus-visible {
-  @includefocus();
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:focus-visible {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
 }
-
-&:disabled {
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled {
   box-shadow: none;
   background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);
   border-color: var(--cre8-color-button-secondary-inverse-border-disabled);
@@ -335,43 +902,37 @@ color: var(--cre8-color-button-primary-inverse-content);
   border-radius: var(--cre8-border-radius-button);
   border-width: var(--cre8-border-width-button-default);
   cursor: not-allowed;
-  &:hover,
-  &:focus,
-  &:active,
-  &:focus-visible {
-    outline: none;
-    background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-inverse-border-disabled);
-    color: var(--cre8-color-button-secondary-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);
-  }
 }
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled:focus-visible {
+  outline: none;
+  background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);
+  border-color: var(--cre8-color-button-secondary-inverse-border-disabled);
+  color: var(--cre8-color-button-secondary-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);
 }
-
+.cre8-c-button {
   /**
- * Secondary button neutral inverse
- */
- &.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse {
+  * Secondary button neutral inverse
+  */
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse {
   background-color: var(--cre8-color-button-secondary-neutral-inverse-bg);
   border-color: var(--cre8-color-button-secondary-neutral-inverse-border);
   color: var(--cre8-color-button-secondary-neutral-inverse-content);
   --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content);
   border-radius: var(--cre8-border-radius-button);
   border-width: var(--cre8-border-width-button-default);
-
-&:hover,
-&:focus {
-  @includefocus();
+}
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:focus {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
   background-color: var(--cre8-color-button-secondary-neutral-bg-active);
   border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);
   outline-color: var(--cre8-color-button-secondary-neutral-inverse-outline);
   color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
   --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);
 }
-
-&:focus-visible,
-&:active,
-&.cre8-c-button--loading {
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse.cre8-c-button--loading {
   transition: none;
   transform: none;
   background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-active);
@@ -379,11 +940,11 @@ color: var(--cre8-color-button-primary-inverse-content);
   color: var(--cre8-color-button-secondary-neutral-inverse-content-active);
   --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);
 }
-&:focus-visible {
-  @includefocus();
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:focus-visible {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
 }
-
-&:disabled {
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled {
   box-shadow: none;
   background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);
   border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);
@@ -393,140 +954,127 @@ color: var(--cre8-color-button-primary-inverse-content);
   border-radius: var(--cre8-border-radius-button);
   border-width: var(--cre8-border-width-button-default);
   cursor: not-allowed;
-  &:hover,
-  &:focus,
-  &:active,
-  &:focus-visible {
-    outline: none;
-    background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);
-    border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);
-    color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
-  }
 }
+.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled:focus-visible {
+  outline: none;
+  background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);
+  border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);
+  color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);
 }
-
+.cre8-c-button {
   /**
- * Tertiary button
- */
-  &.cre8-c-button--tertiary {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-bg);
-    border-width: var(--cre8-border-width-button-default);
-    border-color: var(--cre8-color-button-tertiary-border);
-    color: var(--cre8-color-button-tertiary-content);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-content);
-    box-shadow: none;
-    &:hover,
-    &:focus {
-      border-radius: var(--cre8-border-radius-button);
-      background-color: var(--cre8-color-button-tertiary-bg-hover);
-      border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
-      border-color: var(--cre8-color-button-tertiary-border-hover);
-      color: var(--cre8-color-button-tertiary-content-hover);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-hover);
-      &:focus {
-        @includefocusTertiary();
-      }
-    }
-
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-bg-active);
-    border-color: var(--cre8-color-button-tertiary-border-active);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-tertiary-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-content-active);
-  }
-  &:focus-visible {
-    @includefocusTertiary();
-  }
-  &.cre8-c-button--loading {
-    cursor: not-allowed;
-  }
-  &:disabled {
-    background-color: var(--cre8-color-button-tertiary-bg-disabled);
-    border-color: transparent;
-    color: var(--cre8-color-button-tertiary-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
-    outline: none;
-    box-shadow: none;
-    cursor: not-allowed;
-
-    &:hover,
-    &:focus {
-      outline: none;
-      box-shadow: none;
-      background-color: var(--cre8-color-button-tertiary-bg-disabled);
-      color: var(--cre8-color-button-tertiary-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
-    }
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: none;
-      background-color: var(--cre8-color-button-tertiary-bg-disabled);
-      color: var(--cre8-color-button-tertiary-content-disabled);
-      --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
-    }
-  }
+  * Tertiary button
+  */
 }
-
- /**
- * Tertiary button neutral
- */
- &.cre8-c-button--tertiary.cre8-c-button--neutral {
+.cre8-c-button.cre8-c-button--tertiary {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-bg);
+  border-width: var(--cre8-border-width-button-default);
+  border-color: var(--cre8-color-button-tertiary-border);
+  color: var(--cre8-color-button-tertiary-content);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-content);
+  box-shadow: none;
+}
+.cre8-c-button.cre8-c-button--tertiary:hover, .cre8-c-button.cre8-c-button--tertiary:focus {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-bg-hover);
+  border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
+  border-color: var(--cre8-color-button-tertiary-border-hover);
+  color: var(--cre8-color-button-tertiary-content-hover);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-content-hover);
+}
+.cre8-c-button.cre8-c-button--tertiary:hover:focus, .cre8-c-button.cre8-c-button--tertiary:focus:focus {
+  outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--tertiary:focus-visible, .cre8-c-button.cre8-c-button--tertiary:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--loading {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-bg-active);
+  border-color: var(--cre8-color-button-tertiary-border-active);
+  border-width: var(--cre8-border-width-button-default);
+  color: var(--cre8-color-button-tertiary-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-content-active);
+}
+.cre8-c-button.cre8-c-button--tertiary:focus-visible {
+  outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--loading {
+  cursor: not-allowed;
+}
+.cre8-c-button.cre8-c-button--tertiary:disabled {
+  background-color: var(--cre8-color-button-tertiary-bg-disabled);
+  border-color: transparent;
+  color: var(--cre8-color-button-tertiary-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
+  outline: none;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.cre8-c-button.cre8-c-button--tertiary:disabled:hover, .cre8-c-button.cre8-c-button--tertiary:disabled:focus {
+  outline: none;
+  box-shadow: none;
+  background-color: var(--cre8-color-button-tertiary-bg-disabled);
+  color: var(--cre8-color-button-tertiary-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
+}
+.cre8-c-button.cre8-c-button--tertiary:disabled:active, .cre8-c-button.cre8-c-button--tertiary:disabled:focus-visible {
+  outline: none;
+  box-shadow: none;
+  background-color: var(--cre8-color-button-tertiary-bg-disabled);
+  color: var(--cre8-color-button-tertiary-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);
+}
+.cre8-c-button {
+  /**
+  * Tertiary button neutral
+  */
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral {
   background-color: var(--cre8-color-button-tertiary-neutral-bg);
   border-color: var(--cre8-color-button-tertiary-border);
   color: var(--cre8-color-button-tertiary-neutral-content);
   --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content);
   border-radius: var(--cre8-border-radius-button);
   border-width: var(--cre8-border-width-button-default);
-
-  &:hover,
-  &:focus {
-    background-color: var(--cre8-color-button-tertiary-neutral-bg-hover);
-    border-color: var(--cre8-color-button-tertiary-neutral-border-hover);
-    color: var(--cre8-color-button-tertiary-neutral-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-hover);
-    outline-color: var(--cre8-color-button-tertiary-neutral-outline);
-  }
-
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    transition: none;
-    transform: none;
-    background-color: var(--cre8-color-button-tertiary-neutral-bg-active);
-    border-color: var(--cre8-color-button-tertiary-neutral-border-active);
-    color: var(--cre8-color-button-tertiary-neutral-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-active);
-  }
-
-  &:focus-visible {
-    @includefocus();
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: var(--cre8-color-button-tertiary-neutral-bg-disabled);
-    border-color: var(--cre8-color-button-tertiary-neutral-border-disabled);
-    color: var(--cre8-color-button-tertiary-neutral-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-disabled);
-    outline: none;
-    border-radius: var(--cre8-border-radius-button);
-    border-width: var(--cre8-border-width-button-default);
-
-    cursor: not-allowed;
-  }
- }
-
-/**
- * Tertiary button inverse
- */
- &.cre8-c-button--tertiary.cre8-c-button--inverse {
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:hover, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:focus {
+  background-color: var(--cre8-color-button-tertiary-neutral-bg-hover);
+  border-color: var(--cre8-color-button-tertiary-neutral-border-hover);
+  color: var(--cre8-color-button-tertiary-neutral-content-hover);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-hover);
+  outline-color: var(--cre8-color-button-tertiary-neutral-outline);
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:focus-visible, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--loading {
+  transition: none;
+  transform: none;
+  background-color: var(--cre8-color-button-tertiary-neutral-bg-active);
+  border-color: var(--cre8-color-button-tertiary-neutral-border-active);
+  color: var(--cre8-color-button-tertiary-neutral-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-active);
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:focus-visible {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:disabled {
+  box-shadow: none;
+  background-color: var(--cre8-color-button-tertiary-neutral-bg-disabled);
+  border-color: var(--cre8-color-button-tertiary-neutral-border-disabled);
+  color: var(--cre8-color-button-tertiary-neutral-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-disabled);
+  outline: none;
+  border-radius: var(--cre8-border-radius-button);
+  border-width: var(--cre8-border-width-button-default);
+  cursor: not-allowed;
+}
+.cre8-c-button {
+  /**
+   * Tertiary button inverse
+   */
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse {
   border-radius: var(--cre8-border-radius-button);
   background-color: var(--cre8-color-button-tertiary-inverse-bg);
   border-width: var(--cre8-border-width-button-default);
@@ -534,21 +1082,17 @@ color: var(--cre8-color-button-primary-inverse-content);
   color: var(--cre8-color-button-tertiary-inverse-content);
   --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content);
   box-shadow: none;
-
-  &:hover,
-  &:focus {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-inverse-bg-hover);
-    border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
-    border-color: var(--cre8-color-button-tertiary-inverse-border-hover);
-    color: var(--cre8-color-button-tertiary-inverse-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-hover);
-    outline-color: var(--cre8-color-button-tertiary-inverse-outline);
-  }
-
-&:focus-visible,
-&:active,
-&.cre8-c-button--loading {
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:focus {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-inverse-bg-hover);
+  border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
+  border-color: var(--cre8-color-button-tertiary-inverse-border-hover);
+  color: var(--cre8-color-button-tertiary-inverse-content-hover);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-hover);
+  outline-color: var(--cre8-color-button-tertiary-inverse-outline);
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse.cre8-c-button--loading {
   border-radius: var(--cre8-border-radius-button);
   background-color: var(--cre8-color-button-tertiary-inverse-bg-active);
   border-color: var(--cre8-color-button-tertiary-inverse-border-active);
@@ -557,11 +1101,10 @@ color: var(--cre8-color-button-primary-inverse-content);
   --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-active);
   outline-color: var(--cre8-color-button-tertiary-inverse-outline);
 }
-
-&.cre8-c-button--loading {
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse.cre8-c-button--loading {
   cursor: not-allowed;
 }
-&:disabled {
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled {
   background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
   border-color: transparent;
   color: var(--cre8-color-button-tertiary-inverse-content-disabled);
@@ -569,128 +1112,112 @@ color: var(--cre8-color-button-primary-inverse-content);
   outline: none;
   box-shadow: none;
   cursor: not-allowed;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: none;
-    background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
-    color: var(--cre8-color-button-tertiary-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
-  }
-  &:active,
-  &:focus-visible {
-    outline: none;
-    box-shadow: none;
-    background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
-    color: var(--cre8-color-button-tertiary-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
-  }
 }
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled:hover, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled:focus {
+  outline: none;
+  box-shadow: none;
+  background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
+  color: var(--cre8-color-button-tertiary-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled:focus-visible {
+  outline: none;
+  box-shadow: none;
+  background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);
+  color: var(--cre8-color-button-tertiary-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);
 }
-
- /**
- * Tertiary Neutral button inverse
- */
- &.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse {
+.cre8-c-button {
+  /**
+  * Tertiary Neutral button inverse
+  */
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse {
   border-radius: var(--cre8-border-radius-button);
   background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg);
   border-width: var(--cre8-border-width-button-default);
   color: var(--cre8-color-button-tertiary-neutral-inverse-content);
   --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content);
   box-shadow: none;
-
-  &:hover,
-  &:focus {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-hover);
-    border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
-    border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-hover);
-    color: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);
-    outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);
-  }
-
-  &:focus-visible,
-  &:active,
-  &.cre8-c-button--loading {
-    border-radius: var(--cre8-border-radius-button);
-    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-active);
-    border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-active);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-tertiary-neutral-inverse-content-active);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-active);
-    outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);
-  }
-
-  &.cre8-c-button--loading {
-    cursor: not-allowed;
-  }
-
-  &:disabled {
-    background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-disabled);
-    border-color: transparent;
-    color: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);
-    --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);
-    outline: none;
-    box-shadow: none;
-    cursor: not-allowed;
-  }
- }
-
-  &.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text {
-    border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);
-    border-color: var(--cre8-color-button-secondary-border);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-secondary-content);
-    &:active,
-    &:focus-visible {
-      outline: none;
-    }
-    &.cre8-c-button--lg {
-      padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);
-    }
-    &.cre8-c-button--sm {
-      padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);
-    }
-  }
-
-  &.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret {
-    padding: var(--cre8-button-padding-vertical-medium);
-    border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);
-    height: 100%;
-    border-left: none !important ;
-    border-collapse: collapse;
-    background: var(--cre8-color-button-secondary-bg);
-    border-color: var(--cre8-color-button-secondary-border);
-    border-width: var(--cre8-border-width-button-default);
-    color: var(--cre8-color-button-secondary-content);
-    --cre8-icon-fill: var(--cre8-color-button-secondary-content);
-
-    &:hover,
-    &:focus {
-      background: var(--cre8-color-button-secondary-bg-hover);
-      border-color: var(--cre8-color-button-secondary-border-hover);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);
-      outline: none;
-      border-left: none;
-      border-collapse: collapse;
-    }
-    &:active,
-    &:focus-visible {
-      background: var(--cre8-color-button-secondary-bg-active);
-      border-color: var(--cre8-color-button-secondary-border-active);
-      --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
-      outline: none;
-      border-left: none;
-      border-collapse: collapse;
-    }
-  }
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:focus {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-hover);
+  border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);
+  border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-hover);
+  color: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);
+  outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse.cre8-c-button--loading {
+  border-radius: var(--cre8-border-radius-button);
+  background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-active);
+  border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-active);
+  border-width: var(--cre8-border-width-button-default);
+  color: var(--cre8-color-button-tertiary-neutral-inverse-content-active);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-active);
+  outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse.cre8-c-button--loading {
+  cursor: not-allowed;
+}
+.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:disabled {
+  background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-disabled);
+  border-color: transparent;
+  color: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);
+  --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);
+  outline: none;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text {
+  border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);
+  border-color: var(--cre8-color-button-secondary-border);
+  border-width: var(--cre8-border-width-button-default);
+  color: var(--cre8-color-button-secondary-content);
+}
+.cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text:active, .cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text:focus-visible {
+  outline: none;
+}
+.cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text.cre8-c-button--lg {
+  padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);
+}
+.cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text.cre8-c-button--sm {
+  padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);
+}
+.cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret {
+  padding: var(--cre8-button-padding-vertical-medium);
+  border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);
+  height: 100%;
+  border-left: none !important;
+  border-collapse: collapse;
+  background: var(--cre8-color-button-secondary-bg);
+  border-color: var(--cre8-color-button-secondary-border);
+  border-width: var(--cre8-border-width-button-default);
+  color: var(--cre8-color-button-secondary-content);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content);
+}
+.cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret:hover, .cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret:focus {
+  background: var(--cre8-color-button-secondary-bg-hover);
+  border-color: var(--cre8-color-button-secondary-border-hover);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);
+  outline: none;
+  border-left: none;
+  border-collapse: collapse;
+}
+.cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret:active, .cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret:focus-visible {
+  background: var(--cre8-color-button-secondary-bg-active);
+  border-color: var(--cre8-color-button-secondary-border-active);
+  --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
+  outline: none;
+  border-left: none;
+  border-collapse: collapse;
 }
 
 .cre8-c-button--lg {
   padding: var(--cre8-button-padding-vertical-large);
 }
+
 .cre8-c-button--sm {
   padding: var(--cre8-button-padding-vertical-small);
 }
@@ -712,7 +1239,12 @@ color: var(--cre8-color-button-primary-inverse-content);
  * Small button
  */
 .cre8-c-button--sm {
-  @include cre8-typography-label-small();
+  font-family: var(--cre8-typography-label-small-font-family);
+  font-size: var(--cre8-typography-label-small-font-size);
+  font-weight: var(--cre8-typography-label-small-font-weight);
+  line-height: var(--cre8-typography-label-small-line-height);
+  text-decoration: var(--cre8-typography-label-small-text-decoration);
+  text-transform: var(--cre8-typography-label-small-text-transform);
   padding-top: var(--cre8-button-padding-vertical-small);
   padding-right: var(--cre8-button-padding-horizontal-small);
   padding-bottom: var(--cre8-button-padding-vertical-small);
@@ -722,8 +1254,13 @@ color: var(--cre8-color-button-primary-inverse-content);
 /**
  * Small button sized for icon only
  */
- .cre8-c-button--sm.cre8-c-button--icon-only {
-  @include cre8-typography-label-small();
+.cre8-c-button--sm.cre8-c-button--icon-only {
+  font-family: var(--cre8-typography-label-small-font-family);
+  font-size: var(--cre8-typography-label-small-font-size);
+  font-weight: var(--cre8-typography-label-small-font-weight);
+  line-height: var(--cre8-typography-label-small-line-height);
+  text-decoration: var(--cre8-typography-label-small-text-decoration);
+  text-transform: var(--cre8-typography-label-small-text-transform);
   padding-top: var(--cre8-button-padding-vertical-small-icon-only);
   padding-right: var(--cre8-button-padding-horizontal-small-icon-only);
   padding-bottom: var(--cre8-button-padding-vertical-small-icon-only);
@@ -734,7 +1271,12 @@ color: var(--cre8-color-button-primary-inverse-content);
  * Large button
  */
 .cre8-c-button--lg {
-  @include cre8-typography-label-large();
+  font-family: var(--cre8-typography-label-large-font-family);
+  font-size: var(--cre8-typography-label-large-font-size);
+  font-weight: var(--cre8-typography-label-large-font-weight);
+  line-height: var(--cre8-typography-label-large-line-height);
+  text-decoration: var(--cre8-typography-label-large-text-decoration);
+  text-transform: var(--cre8-typography-label-large-text-transform);
   padding-top: var(--cre8-button-padding-vertical-large);
   padding-right: var(--cre8-button-padding-horizontal-large);
   padding-bottom: var(--cre8-button-padding-vertical-large);
@@ -744,8 +1286,13 @@ color: var(--cre8-color-button-primary-inverse-content);
 /**
  * Large button sized for icon only
  */
- .cre8-c-button--lg.cre8-c-button--icon-only {
-  @include cre8-typography-label-large();
+.cre8-c-button--lg.cre8-c-button--icon-only {
+  font-family: var(--cre8-typography-label-large-font-family);
+  font-size: var(--cre8-typography-label-large-font-size);
+  font-weight: var(--cre8-typography-label-large-font-weight);
+  line-height: var(--cre8-typography-label-large-line-height);
+  text-decoration: var(--cre8-typography-label-large-text-decoration);
+  text-transform: var(--cre8-typography-label-large-text-transform);
   padding-top: var(--cre8-button-padding-vertical-large-icon-only);
   padding-right: var(--cre8-button-padding-horizontal-large-icon-only);
   padding-bottom: var(--cre8-button-padding-vertical-large-icon-only);
@@ -760,11 +1307,9 @@ color: var(--cre8-color-button-primary-inverse-content);
   --cre8-icon-width: var(--cre8-icon-size-small);
 }
 
-.cre8-c-button--sm cre8-icon {
-  svg {
-    height: size(1.75);
-    width: size(1.75);
-  }
+.cre8-c-button--sm cre8-icon svg {
+  height: 0.875rem;
+  width: 0.875rem;
 }
 
 /**
@@ -775,38 +1320,37 @@ color: var(--cre8-color-button-primary-inverse-content);
   --cre8-icon-width: var(--cre8-icon-size-large);
 }
 
-.cre8-c-button--lg cre8-icon {
-  svg {
-    height: size(2.25);
-    width: size(2.25);
-  }
+.cre8-c-button--lg cre8-icon svg {
+  height: 1.125rem;
+  width: 1.125rem;
 }
 
 ::slotted(*) {
   margin-right: 0;
 }
+
 /**
  * Button icon directly before button text
  */
-
 cre8-icon-legacy + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: size(1);
+  margin-left: 0.5rem;
 }
 
 cre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: size(1);
+  margin-left: 0.5rem;
 }
 
 /**
    * Button icon directly after button text
    */
 .cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon-legacy {
-  margin-left: size(1);
+  margin-left: 0.5rem;
 }
 
 .cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
-  margin-left: size(1);
+  margin-left: 0.5rem;
 }
+
 /**
    * Button icon only
    */
@@ -829,12 +1373,20 @@ cre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
 }
 
 .cre8-c-button__text.cre8-u-is-vishidden {
-  @include visuallyHidden();
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 
 .cre8-c-button--primary.cre8-c-button--loading {
   --cre8-icon-fill: var(--cre8-color-content-knockout);
 }
+
 .cre8-c-button--secondary.cre8-c-button--loading,
 .cre8-c-button--tertiary.cre8-c-button--loading {
   --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);
@@ -852,16 +1404,29 @@ cre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {
   height: auto;
   max-height: fit-content;
   min-width: 0px;
-
-  @include visuallyHidden();
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 
 cre8-icon-legacy.cre8-u-is-vishidden {
-  @include visuallyHidden();
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 
 span.cre8-c-button__icon {
-  margin-left: size(1);
+  margin-left: 0.5rem;
   max-width: fit-content;
   min-width: 0px;
   width: auto;
@@ -874,12 +1439,10 @@ cre8-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-
-  svg {
-    height: size(2);
-    width: size(2);
-  }
 }
-`;
+cre8-icon svg {
+  height: 1rem;
+  width: 1rem;
+}`;
 export default styles;
 //# sourceMappingURL=button.styles.js.map