npm - @tmorrow/cre8-wc - Versions diffs - 2.3.5 → 2.3.9 - Mend

@tmorrow/cre8-wc 2.3.5 → 2.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (457) hide show

package/lib/components/danger-button/danger-button.styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 const styles = css `@charset "UTF-8";
 .cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
+  color: var(--cre8-color-content-knockout-brand);
 }
 .cre8-u-is-hidden {
@@ -74,23 +74,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-margin-sm {
-  margin: size(1) !important;
+  margin: 0.5rem !important;
 }
 .cre8-u-margin-md {
-  margin: size(2) !important;
+  margin: 1rem !important;
 }
 .cre8-u-margin-lg {
-  margin: size(3) !important;
+  margin: 1.5rem !important;
 }
 .cre8-u-margin-xl {
-  margin: size(4) !important;
+  margin: 2rem !important;
 }
 .cre8-u-margin-xxl {
-  margin: size(8) !important;
+  margin: 4rem !important;
 }
 .cre8-u-margin-top-none {
@@ -98,23 +98,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
+  margin-top: 0.5rem !important;
 }
 .cre8-u-margin-top-md {
-  margin-top: size(2) !important;
+  margin-top: 1rem !important;
 }
 .cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
+  margin-top: 1.5rem !important;
 }
 .cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
+  margin-top: 2rem !important;
 }
 .cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
+  margin-top: 4rem !important;
 }
 .cre8-u-margin-right-none {
@@ -122,23 +122,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
+  margin-right: 0.5rem !important;
 }
 .cre8-u-margin-right-md {
-  margin-right: size(2) !important;
+  margin-right: 1rem !important;
 }
 .cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
+  margin-right: 1.5rem !important;
 }
 .cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
+  margin-right: 2rem !important;
 }
 .cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
+  margin-right: 4rem !important;
 }
 .cre8-u-margin-bottom-none {
@@ -146,32 +146,32 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
+  margin-bottom: 0.5rem !important;
 }
 .cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
+  margin-bottom: 1rem !important;
 }
 .cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
+  margin-bottom: 1.5rem !important;
 }
 .cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 .cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
+  margin-bottom: 4rem !important;
 }
 .cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
+  margin-bottom: 2rem !important;
 }
 @media all and (min-width: 768px) {
   .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
+    margin-bottom: 4rem !important;
   }
 }
 .cre8-u-margin-left-none {
@@ -179,23 +179,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
+  margin-left: 0.5rem !important;
 }
 .cre8-u-margin-left-md {
-  margin-left: size(2) !important;
+  margin-left: 1rem !important;
 }
 .cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
+  margin-left: 1.5rem !important;
 }
 .cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
+  margin-left: 2rem !important;
 }
 .cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
+  margin-left: 4rem !important;
 }
 .cre8-u-padding-none {
@@ -203,23 +203,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-padding-sm {
-  padding: size(1) !important;
+  padding: 0.5rem !important;
 }
 .cre8-u-padding-md {
-  padding: size(2) !important;
+  padding: 1rem !important;
 }
 .cre8-u-padding-lg {
-  padding: size(3) !important;
+  padding: 1.5rem !important;
 }
 .cre8-u-padding-xl {
-  padding: size(4) !important;
+  padding: 2rem !important;
 }
 .cre8-u-padding-xxl {
-  padding: size(8) !important;
+  padding: 4rem !important;
 }
 .cre8-u-padding-top-none {
@@ -227,23 +227,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
+  padding-top: 0.5rem !important;
 }
 .cre8-u-padding-top-md {
-  padding-top: size(2) !important;
+  padding-top: 1rem !important;
 }
 .cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
+  padding-top: 1.5rem !important;
 }
 .cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
+  padding-top: 2rem !important;
 }
 .cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
+  padding-top: 4rem !important;
 }
 .cre8-u-padding-right-none {
@@ -251,23 +251,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
+  padding-right: 0.5rem !important;
 }
 .cre8-u-padding-right-md {
-  padding-right: size(2) !important;
+  padding-right: 1rem !important;
 }
 .cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
+  padding-right: 1.5rem !important;
 }
 .cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
+  padding-right: 2rem !important;
 }
 .cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
+  padding-right: 4rem !important;
 }
 .cre8-u-padding-bottom-none {
@@ -275,23 +275,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
+  padding-bottom: 0.5rem !important;
 }
 .cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
+  padding-bottom: 1rem !important;
 }
 .cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
+  padding-bottom: 1.5rem !important;
 }
 .cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
+  padding-bottom: 2rem !important;
 }
 .cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
+  padding-bottom: 4rem !important;
 }
 .cre8-u-padding-left-none {
@@ -299,23 +299,23 @@ const styles = css `@charset "UTF-8";
 }
 .cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
+  padding-left: 0.5rem !important;
 }
 .cre8-u-padding-left-md {
-  padding-left: size(2) !important;
+  padding-left: 1rem !important;
 }
 .cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
+  padding-left: 1.5rem !important;
 }
 .cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
+  padding-left: 2rem !important;
 }
 .cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
+  padding-left: 4rem !important;
 }
 .cre8-u-display-flex {
@@ -331,7 +331,6 @@ body {
   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;
@@ -339,7 +338,7 @@ body {
   padding: 0;
   margin: 0;
   color: var(--cre8-color-content-default);
-  background: var(--background-default);
+  background: var(--cre8-color-bg-default);
 }
 @media all and (min-width: 60rem) {
@@ -1028,7 +1027,7 @@ span.ripple {
  * Button icon directly before button text
  */
 cre8-icon + .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   display: inline-flex;
 }
@@ -1036,7 +1035,7 @@ cre8-icon + .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) {
    * Button icon directly after button text
    */
 .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) + cre8-icon {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   display: inline-flex;
 }
@@ -1113,7 +1112,7 @@ cre8-icon {
 }
 span.cre8-c-danger-button__icon {
-  margin-left: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
   max-width: fit-content;
   min-width: 0px;
   width: auto;

package/lib/components/danger-button/danger-button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"danger-button.styles.js","sourceRoot":"","sources":["../../../components/danger-button/danger-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAimChB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n:host {\n display: inline-flex;\n}\n\n:host([fullWidth]) {\n display: flex;\n}\n\n/\n 1) Danger Button or link that has functionality to it\n /\n/\n Primary button\n /\n.cre8-c-danger-button {\n font-family: var(--cre8-typography-label-default-font-family);\n font-size: var(--cre8-typography-label-default-font-size);\n font-weight: var(--cre8-typography-label-default-font-weight);\n line-height: var(--cre8-typography-label-default-line-height);\n text-decoration: var(--cre8-typography-label-default-text-decoration);\n text-transform: var(--cre8-typography-label-default-text-transform);\n width: var(--cre8-button-width, auto);\n height: var(--cre8-button-height, auto);\n min-width: var(--cre8-button-min-width, auto);\n min-height: var(--cre8-button-min-height, auto);\n justify-content: center;\n text-align: center;\n margin-top: var(--cre8-button-margin-top, 0);\n margin-bottom: var(--cre8-button-margin-bottom, 0);\n margin-left: var(--cre8-button-margin-left, 0);\n margin-right: var(--cre8-button-margin-right, 0);\n display: inline-flex;\n align-items: center;\n border-width: var(--cre8-border-width-button-default);\n box-shadow: var(--cre8-shadow-button);\n padding-top: var(--cre8-button-padding-vertical-medium);\n padding-right: var(--cre8-button-padding-horizontal-medium);\n padding-bottom: var(--cre8-button-padding-vertical-medium);\n padding-left: var(--cre8-button-padding-horizontal-medium);\n margin: 0;\n cursor: pointer;\n border-style: var(--cre8-border-style-default);\n transition: revert;\n transform: revert;\n white-space: nowrap;\n}\n.cre8-c-danger-button:hover, .cre8-c-danger-button:focus, .cre8-c-danger-button:active, .cre8-c-danger-button:focus-visible {\n border-style: var(--cre8-border-style-default);\n box-shadow: none;\n transform: revert;\n transition: revert;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary {\n background: var(--cre8-color-button-primary-danger-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-primary-danger-border);\n border-radius: var(--cre8-border-radius-button);\n box-shadow: var(--cre8-shadow-button);\n color: var(--cre8-color-button-primary-danger-content);\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:hover, .cre8-c-danger-button.cre8-c-danger-button--primary:focus {\n box-shadow: none;\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-hover);\n color: var(--cre8-color-button-primary-danger-content-hover);\n border-color: var(--cre8-color-button-primary-danger-border-hover);\n background: var(--cre8-color-button-primary-danger-bg-hover);\n text-decoration: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--primary:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:active, .cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n box-shadow: none;\n color: var(--cre8-color-button-primary-danger-content-active);\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);\n border-color: var(--cre8-color-button-primary-danger-border-active);\n background-color: var(--cre8-color-button-primary-danger-bg-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary {\n /\n Disabled primary and secondary button\n /\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-primary-danger-bg-disabled);\n border-color: var(--cre8-color-button-primary-danger-border-disabled);\n color: var(--cre8-color-button-primary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);\n cursor: not-allowed;\n outline: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-primary-danger-bg-disabled);\n border-color: var(--cre8-color-button-primary-danger-border-disabled);\n color: var(--cre8-color-button-primary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted {\n background-color: var(--cre8-color-button-primary-danger-inverse-bg);\n border-color: var(--cre8-color-button-primary-danger-inverse-border);\n color: var(--cre8-color-button-primary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus {\n background-color: var(--cre8-color-button-primary-danger-inverse-bg-hover);\n border-color: var(--cre8-color-button-primary-danger-inverse-border-hover);\n color: var(--cre8-color-button-primary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus {\n outline-color: var(--cre8-color-button-primary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active {\n background-color: var(--cre8-color-button-primary-danger-inverse-bg-active);\n border-color: var(--cre8-color-button-primary-danger-inverse-border-active);\n color: var(--cre8-color-button-primary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:disabled {\n outline: none;\n cursor: not-allowed;\n background-color: var(--cre8-color-button-primary-danger-inverse-bg-disabled);\n border-color: var(--cre8-color-button-primary-danger-inverse-border-disabled);\n color: var(--cre8-color-button-primary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button {\n /\n Secondary button\n * The icon button shares the styles of the standard secondary button\n /\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary {\n background-color: var(--cre8-color-button-secondary-danger-bg);\n border-color: var(--cre8-color-button-secondary-danger-border);\n color: var(--cre8-color-button-secondary-danger-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary:focus {\n background-color: var(--cre8-color-button-secondary-danger-bg-hover);\n border-color: var(--cre8-color-button-secondary-danger-border-hover);\n color: var(--cre8-color-button-secondary-danger-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--secondary:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:active, .cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-danger-bg-active);\n border-color: var(--cre8-color-button-secondary-danger-border-active);\n color: var(--cre8-color-button-secondary-danger-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-danger-bg-disabled);\n border-color: var(--cre8-color-button-secondary-danger-border-disabled);\n color: var(--cre8-color-button-secondary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-danger-bg-disabled);\n border-color: var(--cre8-color-button-secondary-danger-border-disabled);\n color: var(--cre8-color-button-secondary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted {\n background-color: var(--cre8-color-button-secondary-danger-inverse-bg);\n border-color: var(--cre8-color-button-secondary-danger-inverse-border);\n color: var(--cre8-color-button-secondary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus {\n background-color: var(--cre8-color-button-secondary-danger-inverse-bg-hover);\n border-color: var(--cre8-color-button-secondary-danger-inverse-border-hover);\n color: var(--cre8-color-button-secondary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus {\n outline-color: var(--cre8-color-button-secondary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active {\n background-color: var(--cre8-color-button-secondary-danger-inverse-bg-active);\n border-color: var(--cre8-color-button-secondary-danger-inverse-border-active);\n color: var(--cre8-color-button-secondary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:disabled {\n outline: none;\n cursor: not-allowed;\n background-color: var(--cre8-color-button-secondary-danger-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-danger-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button {\n /\n Tertiary button\n /\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-danger-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-tertiary-danger-border);\n color: var(--cre8-color-button-tertiary-danger-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content);\n box-shadow: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary:focus {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-danger-bg-hover);\n border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n border-color: var(--cre8-color-button-tertiary-danger-border-hover);\n color: var(--cre8-color-button-tertiary-danger-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--tertiary:focus:focus {\n outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:active, .cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-danger-bg-active);\n border-color: var(--cre8-color-button-tertiary-danger-border-active);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-danger-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus-visible {\n outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled {\n background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n border-color: transparent;\n color: var(--cre8-color-button-tertiary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n outline: none;\n box-shadow: none;\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n color: var(--cre8-color-button-tertiary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus-visible {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n color: var(--cre8-color-button-tertiary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted {\n background-color: var(--cre8-color-button-tertiary-danger-inverse-bg);\n border-color: var(--cre8-color-button-tertiary-danger-inverse-border);\n color: var(--cre8-color-button-tertiary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus {\n background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-hover);\n border-color: var(--cre8-color-button-tertiary-danger-inverse-border-hover);\n color: var(--cre8-color-button-tertiary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus {\n outline-color: var(--cre8-color-button-tertiary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active {\n background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-active);\n border-color: var(--cre8-color-button-tertiary-danger-inverse-border-active);\n color: var(--cre8-color-button-tertiary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:disabled {\n outline: none;\n cursor: not-allowed;\n background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-disabled);\n border-color: var(--cre8-color-button-tertiary-danger-inverse-border-disabled);\n color: var(--cre8-color-button-tertiary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text {\n border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);\n border-color: var(--cre8-color-button-secondary-danger-border);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-secondary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:active, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:focus-visible {\n outline: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--lg {\n padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--sm {\n padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret {\n padding: var(--cre8-button-padding-vertical-medium);\n border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);\n height: 100%;\n border-left: none !important;\n border-collapse: collapse;\n background: var(--cre8-color-button-secondary-danger-bg);\n border-color: var(--cre8-color-button-secondary-danger-border);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-secondary-danger-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:hover, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus {\n background: var(--cre8-color-button-secondary-danger-bg-hover);\n border-color: var(--cre8-color-button-secondary-danger-border-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);\n outline: none;\n border-left: none;\n border-collapse: collapse;\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:active, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus-visible {\n background: var(--cre8-color-button-secondary-danger-bg-active);\n border-color: var(--cre8-color-button-secondary-danger-border-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n outline: none;\n border-left: none;\n border-collapse: collapse;\n}\n\n.cre8-c-danger-button--lg {\n padding: var(--cre8-button-padding-vertical-large);\n}\n\n.cre8-c-danger-button--sm {\n padding: var(--cre8-button-padding-vertical-small);\n}\n\n.cre8-c-danger-button--icon-only {\n padding: var(--cre8-button-padding-vertical-small);\n color: var(--cre8-icon-fill, currentColor);\n}\n\n/\n Full-width button\n /\n.cre8-c-danger-button--full-width {\n width: 100%;\n display: flex;\n}\n\n/\n Small button\n /\n.cre8-c-danger-button--sm {\n font-family: var(--cre8-typography-label-small-font-family);\n font-size: var(--cre8-typography-label-small-font-size);\n font-weight: var(--cre8-typography-label-small-font-weight);\n line-height: var(--cre8-typography-label-small-line-height);\n text-decoration: var(--cre8-typography-label-small-text-decoration);\n text-transform: var(--cre8-typography-label-small-text-transform);\n padding-top: var(--cre8-button-padding-vertical-small);\n padding-right: var(--cre8-button-padding-horizontal-small);\n padding-bottom: var(--cre8-button-padding-vertical-small);\n padding-left: var(--cre8-button-padding-horizontal-small);\n}\n\n/\n Large button\n /\n.cre8-c-danger-button--lg {\n font-family: var(--cre8-typography-label-large-font-family);\n font-size: var(--cre8-typography-label-large-font-size);\n font-weight: var(--cre8-typography-label-large-font-weight);\n line-height: var(--cre8-typography-label-large-line-height);\n text-decoration: var(--cre8-typography-label-large-text-decoration);\n text-transform: var(--cre8-typography-label-large-text-transform);\n padding-top: var(--cre8-button-padding-vertical-large);\n padding-right: var(--cre8-button-padding-horizontal-large);\n padding-bottom: var(--cre8-button-padding-vertical-large);\n padding-left: var(--cre8-button-padding-horizontal-large);\n}\n\n/\n Icon within small button\n /\n.cre8-c-danger-button--sm cre8-icon {\n --cre8-icon-height: var(--cre8-icon-size-small);\n --cre8-icon-width: var(--cre8-icon-size-small);\n /\n Button text directly after button icon within small button\n /\n}\n\n/\n Icon within large button\n /\n.cre8-c-danger-button--lg cre8-icon {\n --cre8-icon-height: var(--cre8-icon-size-large);\n --cre8-icon-width: var(--cre8-icon-size-large);\n}\n\n::slotted() {\n margin-right: 0;\n}\n\n/*\n Button icon directly before button text\n /\ncre8-icon + .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) {\n margin-left: 0.5rem;\n display: inline-flex;\n}\n\n/\n Button icon directly after button text\n /\n.cre8-c-danger-button__text:not(.cre8-u-is-vishidden) + cre8-icon {\n margin-left: 0.5rem;\n display: inline-flex;\n}\n\n/\n Button icon only\n /\n.cre8-c-danger-button:has(.cre8-c-danger-button__text.cre8-u-is-vishidden) + cre8-icon {\n border-radius: var(--cre8-border-radius-button);\n}\n\n.cre8-c-danger-button__text.cre8-u-is-vishidden + cre8-icon {\n margin-left: 0px;\n margin-right: 0px;\n display: flex;\n}\n\n.cre8-c-danger-button__text.cre8-u-is-vishidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-content-knockout);\n}\n\n.cre8-c-danger-button--secondary.cre8-c-danger-button--loading,\n.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n\n/\n Aria live span\n */\n.cre8-u-is-vishidden {\n --cre8-icon-height: 0px;\n --cre8-icon-width: 0px;\n max-width: fit-content;\n min-width: 0px;\n width: auto;\n height: auto;\n max-height: fit-content;\n min-width: 0px;\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\ncre8-icon.cre8-u-is-vishidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\ncre8-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nspan.cre8-c-danger-button__icon {\n margin-left: 0.5rem;\n max-width: fit-content;\n min-width: 0px;\n width: auto;\n height: auto;\n max-height: fit-content;\n min-width: 0px;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"danger-button.styles.js","sourceRoot":"","sources":["../../../components/danger-button/danger-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgmChB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n color: var(--cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: 0.5rem !important;\n}\n\n.cre8-u-margin-md {\n margin: 1rem !important;\n}\n\n.cre8-u-margin-lg {\n margin: 1.5rem !important;\n}\n\n.cre8-u-margin-xl {\n margin: 2rem !important;\n}\n\n.cre8-u-margin-xxl {\n margin: 4rem !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: 0.5rem !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: 1rem !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: 1.5rem !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: 2rem !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: 4rem !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: 0.5rem !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: 1rem !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: 1.5rem !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: 2rem !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: 4rem !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: 0.5rem !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: 1rem !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: 1.5rem !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: 2rem !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: 4rem !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 2rem !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: 4rem !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: 0.5rem !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: 1rem !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: 1.5rem !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: 2rem !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: 4rem !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: 0.5rem !important;\n}\n\n.cre8-u-padding-md {\n padding: 1rem !important;\n}\n\n.cre8-u-padding-lg {\n padding: 1.5rem !important;\n}\n\n.cre8-u-padding-xl {\n padding: 2rem !important;\n}\n\n.cre8-u-padding-xxl {\n padding: 4rem !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: 0.5rem !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: 1rem !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: 1.5rem !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: 2rem !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: 4rem !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: 0.5rem !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: 1rem !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: 1.5rem !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: 2rem !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: 4rem !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: 0.5rem !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: 1rem !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: 1.5rem !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: 2rem !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: 4rem !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: 0.5rem !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: 1rem !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: 1.5rem !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: 2rem !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: 4rem !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--cre8-color-bg-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n --cre8-l-max-width: 82.5rem;\n / 1 /\n --cre8-l-linelength-width: 42rem;\n / 1 /\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n:host {\n display: inline-flex;\n}\n\n:host([fullWidth]) {\n display: flex;\n}\n\n/\n 1) Danger Button or link that has functionality to it\n /\n/\n Primary button\n /\n.cre8-c-danger-button {\n font-family: var(--cre8-typography-label-default-font-family);\n font-size: var(--cre8-typography-label-default-font-size);\n font-weight: var(--cre8-typography-label-default-font-weight);\n line-height: var(--cre8-typography-label-default-line-height);\n text-decoration: var(--cre8-typography-label-default-text-decoration);\n text-transform: var(--cre8-typography-label-default-text-transform);\n width: var(--cre8-button-width, auto);\n height: var(--cre8-button-height, auto);\n min-width: var(--cre8-button-min-width, auto);\n min-height: var(--cre8-button-min-height, auto);\n justify-content: center;\n text-align: center;\n margin-top: var(--cre8-button-margin-top, 0);\n margin-bottom: var(--cre8-button-margin-bottom, 0);\n margin-left: var(--cre8-button-margin-left, 0);\n margin-right: var(--cre8-button-margin-right, 0);\n display: inline-flex;\n align-items: center;\n border-width: var(--cre8-border-width-button-default);\n box-shadow: var(--cre8-shadow-button);\n padding-top: var(--cre8-button-padding-vertical-medium);\n padding-right: var(--cre8-button-padding-horizontal-medium);\n padding-bottom: var(--cre8-button-padding-vertical-medium);\n padding-left: var(--cre8-button-padding-horizontal-medium);\n margin: 0;\n cursor: pointer;\n border-style: var(--cre8-border-style-default);\n transition: revert;\n transform: revert;\n white-space: nowrap;\n}\n.cre8-c-danger-button:hover, .cre8-c-danger-button:focus, .cre8-c-danger-button:active, .cre8-c-danger-button:focus-visible {\n border-style: var(--cre8-border-style-default);\n box-shadow: none;\n transform: revert;\n transition: revert;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary {\n background: var(--cre8-color-button-primary-danger-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-primary-danger-border);\n border-radius: var(--cre8-border-radius-button);\n box-shadow: var(--cre8-shadow-button);\n color: var(--cre8-color-button-primary-danger-content);\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:hover, .cre8-c-danger-button.cre8-c-danger-button--primary:focus {\n box-shadow: none;\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-hover);\n color: var(--cre8-color-button-primary-danger-content-hover);\n border-color: var(--cre8-color-button-primary-danger-border-hover);\n background: var(--cre8-color-button-primary-danger-bg-hover);\n text-decoration: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--primary:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:active, .cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n box-shadow: none;\n color: var(--cre8-color-button-primary-danger-content-active);\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);\n border-color: var(--cre8-color-button-primary-danger-border-active);\n background-color: var(--cre8-color-button-primary-danger-bg-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary {\n /\n Disabled primary and secondary button\n /\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-primary-danger-bg-disabled);\n border-color: var(--cre8-color-button-primary-danger-border-disabled);\n color: var(--cre8-color-button-primary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);\n cursor: not-allowed;\n outline: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-primary-danger-bg-disabled);\n border-color: var(--cre8-color-button-primary-danger-border-disabled);\n color: var(--cre8-color-button-primary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted {\n background-color: var(--cre8-color-button-primary-danger-inverse-bg);\n border-color: var(--cre8-color-button-primary-danger-inverse-border);\n color: var(--cre8-color-button-primary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus {\n background-color: var(--cre8-color-button-primary-danger-inverse-bg-hover);\n border-color: var(--cre8-color-button-primary-danger-inverse-border-hover);\n color: var(--cre8-color-button-primary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus {\n outline-color: var(--cre8-color-button-primary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active {\n background-color: var(--cre8-color-button-primary-danger-inverse-bg-active);\n border-color: var(--cre8-color-button-primary-danger-inverse-border-active);\n color: var(--cre8-color-button-primary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:disabled {\n outline: none;\n cursor: not-allowed;\n background-color: var(--cre8-color-button-primary-danger-inverse-bg-disabled);\n border-color: var(--cre8-color-button-primary-danger-inverse-border-disabled);\n color: var(--cre8-color-button-primary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button {\n /\n Secondary button\n * The icon button shares the styles of the standard secondary button\n /\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary {\n background-color: var(--cre8-color-button-secondary-danger-bg);\n border-color: var(--cre8-color-button-secondary-danger-border);\n color: var(--cre8-color-button-secondary-danger-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary:focus {\n background-color: var(--cre8-color-button-secondary-danger-bg-hover);\n border-color: var(--cre8-color-button-secondary-danger-border-hover);\n color: var(--cre8-color-button-secondary-danger-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--secondary:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:active, .cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-danger-bg-active);\n border-color: var(--cre8-color-button-secondary-danger-border-active);\n color: var(--cre8-color-button-secondary-danger-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-danger-bg-disabled);\n border-color: var(--cre8-color-button-secondary-danger-border-disabled);\n color: var(--cre8-color-button-secondary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-danger-bg-disabled);\n border-color: var(--cre8-color-button-secondary-danger-border-disabled);\n color: var(--cre8-color-button-secondary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted {\n background-color: var(--cre8-color-button-secondary-danger-inverse-bg);\n border-color: var(--cre8-color-button-secondary-danger-inverse-border);\n color: var(--cre8-color-button-secondary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus {\n background-color: var(--cre8-color-button-secondary-danger-inverse-bg-hover);\n border-color: var(--cre8-color-button-secondary-danger-inverse-border-hover);\n color: var(--cre8-color-button-secondary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus {\n outline-color: var(--cre8-color-button-secondary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active {\n background-color: var(--cre8-color-button-secondary-danger-inverse-bg-active);\n border-color: var(--cre8-color-button-secondary-danger-inverse-border-active);\n color: var(--cre8-color-button-secondary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:disabled {\n outline: none;\n cursor: not-allowed;\n background-color: var(--cre8-color-button-secondary-danger-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-danger-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button {\n /\n Tertiary button\n /\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-danger-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-tertiary-danger-border);\n color: var(--cre8-color-button-tertiary-danger-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content);\n box-shadow: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary:focus {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-danger-bg-hover);\n border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n border-color: var(--cre8-color-button-tertiary-danger-border-hover);\n color: var(--cre8-color-button-tertiary-danger-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--tertiary:focus:focus {\n outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:active, .cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-danger-bg-active);\n border-color: var(--cre8-color-button-tertiary-danger-border-active);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-danger-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus-visible {\n outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled {\n background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n border-color: transparent;\n color: var(--cre8-color-button-tertiary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n outline: none;\n box-shadow: none;\n cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n color: var(--cre8-color-button-tertiary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus-visible {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n color: var(--cre8-color-button-tertiary-danger-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted {\n background-color: var(--cre8-color-button-tertiary-danger-inverse-bg);\n border-color: var(--cre8-color-button-tertiary-danger-inverse-border);\n color: var(--cre8-color-button-tertiary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus {\n background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-hover);\n border-color: var(--cre8-color-button-tertiary-danger-inverse-border-hover);\n color: var(--cre8-color-button-tertiary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus {\n outline-color: var(--cre8-color-button-tertiary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active {\n background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-active);\n border-color: var(--cre8-color-button-tertiary-danger-inverse-border-active);\n color: var(--cre8-color-button-tertiary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:disabled {\n outline: none;\n cursor: not-allowed;\n background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-disabled);\n border-color: var(--cre8-color-button-tertiary-danger-inverse-border-disabled);\n color: var(--cre8-color-button-tertiary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text {\n border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);\n border-color: var(--cre8-color-button-secondary-danger-border);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-secondary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:active, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:focus-visible {\n outline: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--lg {\n padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--sm {\n padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret {\n padding: var(--cre8-button-padding-vertical-medium);\n border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);\n height: 100%;\n border-left: none !important;\n border-collapse: collapse;\n background: var(--cre8-color-button-secondary-danger-bg);\n border-color: var(--cre8-color-button-secondary-danger-border);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-secondary-danger-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:hover, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus {\n background: var(--cre8-color-button-secondary-danger-bg-hover);\n border-color: var(--cre8-color-button-secondary-danger-border-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);\n outline: none;\n border-left: none;\n border-collapse: collapse;\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:active, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus-visible {\n background: var(--cre8-color-button-secondary-danger-bg-active);\n border-color: var(--cre8-color-button-secondary-danger-border-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n outline: none;\n border-left: none;\n border-collapse: collapse;\n}\n\n.cre8-c-danger-button--lg {\n padding: var(--cre8-button-padding-vertical-large);\n}\n\n.cre8-c-danger-button--sm {\n padding: var(--cre8-button-padding-vertical-small);\n}\n\n.cre8-c-danger-button--icon-only {\n padding: var(--cre8-button-padding-vertical-small);\n color: var(--cre8-icon-fill, currentColor);\n}\n\n/\n Full-width button\n /\n.cre8-c-danger-button--full-width {\n width: 100%;\n display: flex;\n}\n\n/\n Small button\n /\n.cre8-c-danger-button--sm {\n font-family: var(--cre8-typography-label-small-font-family);\n font-size: var(--cre8-typography-label-small-font-size);\n font-weight: var(--cre8-typography-label-small-font-weight);\n line-height: var(--cre8-typography-label-small-line-height);\n text-decoration: var(--cre8-typography-label-small-text-decoration);\n text-transform: var(--cre8-typography-label-small-text-transform);\n padding-top: var(--cre8-button-padding-vertical-small);\n padding-right: var(--cre8-button-padding-horizontal-small);\n padding-bottom: var(--cre8-button-padding-vertical-small);\n padding-left: var(--cre8-button-padding-horizontal-small);\n}\n\n/\n Large button\n /\n.cre8-c-danger-button--lg {\n font-family: var(--cre8-typography-label-large-font-family);\n font-size: var(--cre8-typography-label-large-font-size);\n font-weight: var(--cre8-typography-label-large-font-weight);\n line-height: var(--cre8-typography-label-large-line-height);\n text-decoration: var(--cre8-typography-label-large-text-decoration);\n text-transform: var(--cre8-typography-label-large-text-transform);\n padding-top: var(--cre8-button-padding-vertical-large);\n padding-right: var(--cre8-button-padding-horizontal-large);\n padding-bottom: var(--cre8-button-padding-vertical-large);\n padding-left: var(--cre8-button-padding-horizontal-large);\n}\n\n/\n Icon within small button\n /\n.cre8-c-danger-button--sm cre8-icon {\n --cre8-icon-height: var(--cre8-icon-size-small);\n --cre8-icon-width: var(--cre8-icon-size-small);\n /\n Button text directly after button icon within small button\n /\n}\n\n/\n Icon within large button\n /\n.cre8-c-danger-button--lg cre8-icon {\n --cre8-icon-height: var(--cre8-icon-size-large);\n --cre8-icon-width: var(--cre8-icon-size-large);\n}\n\n::slotted() {\n margin-right: 0;\n}\n\n/*\n Button icon directly before button text\n /\ncre8-icon + .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) {\n margin-left: var(--cre8-spacing-8);\n display: inline-flex;\n}\n\n/\n Button icon directly after button text\n /\n.cre8-c-danger-button__text:not(.cre8-u-is-vishidden) + cre8-icon {\n margin-left: var(--cre8-spacing-8);\n display: inline-flex;\n}\n\n/\n Button icon only\n /\n.cre8-c-danger-button:has(.cre8-c-danger-button__text.cre8-u-is-vishidden) + cre8-icon {\n border-radius: var(--cre8-border-radius-button);\n}\n\n.cre8-c-danger-button__text.cre8-u-is-vishidden + cre8-icon {\n margin-left: 0px;\n margin-right: 0px;\n display: flex;\n}\n\n.cre8-c-danger-button__text.cre8-u-is-vishidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-content-knockout);\n}\n\n.cre8-c-danger-button--secondary.cre8-c-danger-button--loading,\n.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n\n/\n Aria live span\n */\n.cre8-u-is-vishidden {\n --cre8-icon-height: 0px;\n --cre8-icon-width: 0px;\n max-width: fit-content;\n min-width: 0px;\n width: auto;\n height: auto;\n max-height: fit-content;\n min-width: 0px;\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\ncre8-icon.cre8-u-is-vishidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\ncre8-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nspan.cre8-c-danger-button__icon {\n margin-left: var(--cre8-spacing-8);\n max-width: fit-content;\n min-width: 0px;\n width: auto;\n height: auto;\n max-height: fit-content;\n min-width: 0px;\n}`;\nexport default styles;\n"]}

package/lib/components/date-picker/calendar/calendar.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../../components/date-picker/calendar/calendar.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,~~yBAqrBV~~,CAAC;AACH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../../components/date-picker/calendar/calendar.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAorBV,CAAC;AACH,eAAe,MAAM,CAAC"}