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

@tmorrow/cre8-wc 2.3.6 → 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 (260) hide show

package/lib/components/checkbox-field/checkbox-field.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox-field.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field/checkbox-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAinBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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/------------------------------------\\\\\n #CHECKBOX-FIELD\n\\\\------------------------------------/\n:host {\n display: flex;\n}\n\n/* \n * 1) Fieldset used for checkbox items\n /\n.cre8-c-checkbox-field {\n border: none;\n padding: 0;\n margin: 0;\n}\n\n/* \n * Checkbox field legend\n /\n.cre8-c-checkbox-field__legend {\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 margin-bottom: 0.5rem;\n}\n\n/* \n * Checkbox list\n */\n.cre8-c-checkbox-field__list {\n display: flex;\n flex-direction: column;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"checkbox-field.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field/checkbox-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAinBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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/------------------------------------\\\\\n #CHECKBOX-FIELD\n\\\\------------------------------------/\n:host {\n display: flex;\n}\n\n/* \n * 1) Fieldset used for checkbox items\n /\n.cre8-c-checkbox-field {\n border: none;\n padding: 0;\n margin: 0;\n}\n\n/* \n * Checkbox field legend\n /\n.cre8-c-checkbox-field__legend {\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 margin-bottom: var(--cre8-spacing-8);\n}\n\n/* \n * Checkbox list\n */\n.cre8-c-checkbox-field__list {\n display: flex;\n flex-direction: column;\n}`;\nexport default styles;\n"]}

package/lib/components/checkbox-field-item/checkbox-field-item.styles.js CHANGED Viewed

@@ -715,7 +715,7 @@ span.ripple {
   display: flex;
   position: relative;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--cre8-spacing-8);
   min-height: 1.5rem;
   /**
   * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset
@@ -853,7 +853,7 @@ span.ripple {
  * Checkbox field item input
  */
 .cre8-c-checkbox-field-item__label {
-  margin-left: 2rem;
+  margin-left: var(--cre8-spacing-32);
   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);

package/lib/components/checkbox-field-item/checkbox-field-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox-field-item.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAs2BhB,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/\n #VISIBILITY UTILITIES\n/\n/ Completely remove from the flow and screen readers. /\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n/ Completely remove from the flow but leave available to screen readers. /\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/\n Hide element at sm breakpoint\n /\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n\n/\n Hide element at sm-2 breakpoint\n /\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n\n/\n Hide element at md breakpoint\n /\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n\n/\n Hide element at lg breakpoint\n /\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n\n/\n Hide element at xl breakpoint\n /\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n\n/\n Show element at sm breakpoint\n /\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n\n/\n Show element at sm-2 breakpoint\n /\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n\n/\n Show element at md breakpoint\n /\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n\n/\n Show element at lg breakpoint\n /\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n\n/\n Show element at xl breakpoint\n /\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n\n/------------------------------------\\\\\n #CHECKBOX-FIELD-ITEM\n\\\\------------------------------------/\n:host {\n display: inline-flex;\n flex-wrap: wrap;\n}\n\n/* \n * 1) Form field that is composed of a checkbox input, label, and an optional field note.\n /\n.cre8-c-checkbox-field-item {\n display: flex;\n position: relative;\n align-items: center;\n margin-bottom: 0.5rem;\n min-height: 1.5rem;\n /* \n * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset\n * 1) Remove margin bottom on last item\n /\n}\n:host(:last-child) .cre8-c-checkbox-field-item {\n margin-bottom: 0;\n / 1 /\n}\n\n/* \n * Checkbox field item input \n /\n.cre8-c-checkbox-field-item__input {\n opacity: 0;\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n height: 1.5rem;\n min-width: 1.5rem;\n margin: 0;\n z-index: 1;\n /* \n * Checkbox field item input error\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input {\n cursor: not-allowed;\n}\n\n/* \n * Checkbox field item custom checkbox container\n /\n.cre8-c-checkbox-field-item__custom-checkbox {\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: var(--cre8-border-radius-checkbox, var(--cre8-border-radius-small));\n border-width: var(--cre8-border-width-default);\n border-style: var(--cre8-border-style-default);\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-strong);\n /* \n * Checkbox field item custom checkbox focus visible custom outline\n /\n}\n.cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox within checkbox field with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox within checkbox field with disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox {\n cursor: not-allowed;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n}\n\n/\n Checkbox field item custom checkbox when item is checked\n /\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-brand-strong);\n /* \n * Checkbox field item custom checkbox when item is checked with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox when item is checked with disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-disabled);\n}\n\n/* \n * Checkbox field item checkmark icon\n /\n.cre8-c-checkbox-field-item__icon {\n display: none;\n color: var(--cre8-color-content-knockout);\n /* \n * Checkbox field item icon within checkbox field with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon {\n color: var(--cre8-color-content-error);\n}\n.cre8-c-checkbox-field-item__icon {\n /* \n * Checkbox field item icon within checkbox field disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon {\n color: var(--cre8-color-content-disabled);\n}\n.cre8-c-checkbox-field-item__icon {\n /\n Checkbox field item icon will display in the box if the input is checked\n /\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon {\n display: flex;\n}\n\n/* \n * Checkbox field item input \n /\n.cre8-c-checkbox-field-item__label {\n margin-left: 2rem;\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}\n\n/* \n * Checkbox field item field notes\n */\n.cre8-c-checkbox-field-item__field-note,\n.cre8-c-checkbox-field-item__field-note-success,\n.cre8-c-checkbox-field-item__field-note-error {\n flex-basis: 100%;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"checkbox-field-item.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAs2BhB,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/\n #VISIBILITY UTILITIES\n/\n/ Completely remove from the flow and screen readers. /\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n/ Completely remove from the flow but leave available to screen readers. /\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/\n Hide element at sm breakpoint\n /\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n\n/\n Hide element at sm-2 breakpoint\n /\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n\n/\n Hide element at md breakpoint\n /\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n\n/\n Hide element at lg breakpoint\n /\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n\n/\n Hide element at xl breakpoint\n /\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n\n/\n Show element at sm breakpoint\n /\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n\n/\n Show element at sm-2 breakpoint\n /\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n\n/\n Show element at md breakpoint\n /\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n\n/\n Show element at lg breakpoint\n /\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n\n/\n Show element at xl breakpoint\n /\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n\n/------------------------------------\\\\\n #CHECKBOX-FIELD-ITEM\n\\\\------------------------------------/\n:host {\n display: inline-flex;\n flex-wrap: wrap;\n}\n\n/* \n * 1) Form field that is composed of a checkbox input, label, and an optional field note.\n /\n.cre8-c-checkbox-field-item {\n display: flex;\n position: relative;\n align-items: center;\n margin-bottom: var(--cre8-spacing-8);\n min-height: 1.5rem;\n /* \n * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset\n * 1) Remove margin bottom on last item\n /\n}\n:host(:last-child) .cre8-c-checkbox-field-item {\n margin-bottom: 0;\n / 1 /\n}\n\n/* \n * Checkbox field item input \n /\n.cre8-c-checkbox-field-item__input {\n opacity: 0;\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n height: 1.5rem;\n min-width: 1.5rem;\n margin: 0;\n z-index: 1;\n /* \n * Checkbox field item input error\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input {\n cursor: not-allowed;\n}\n\n/* \n * Checkbox field item custom checkbox container\n /\n.cre8-c-checkbox-field-item__custom-checkbox {\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: var(--cre8-border-radius-checkbox, var(--cre8-border-radius-small));\n border-width: var(--cre8-border-width-default);\n border-style: var(--cre8-border-style-default);\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-strong);\n /* \n * Checkbox field item custom checkbox focus visible custom outline\n /\n}\n.cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox within checkbox field with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox within checkbox field with disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox {\n cursor: not-allowed;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n}\n\n/\n Checkbox field item custom checkbox when item is checked\n /\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-brand-strong);\n /* \n * Checkbox field item custom checkbox when item is checked with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox when item is checked with disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-disabled);\n}\n\n/* \n * Checkbox field item checkmark icon\n /\n.cre8-c-checkbox-field-item__icon {\n display: none;\n color: var(--cre8-color-content-knockout);\n /* \n * Checkbox field item icon within checkbox field with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon {\n color: var(--cre8-color-content-error);\n}\n.cre8-c-checkbox-field-item__icon {\n /* \n * Checkbox field item icon within checkbox field disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon {\n color: var(--cre8-color-content-disabled);\n}\n.cre8-c-checkbox-field-item__icon {\n /\n Checkbox field item icon will display in the box if the input is checked\n /\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon {\n display: flex;\n}\n\n/* \n * Checkbox field item input \n /\n.cre8-c-checkbox-field-item__label {\n margin-left: var(--cre8-spacing-32);\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}\n\n/* \n * Checkbox field item field notes\n */\n.cre8-c-checkbox-field-item__field-note,\n.cre8-c-checkbox-field-item__field-note-success,\n.cre8-c-checkbox-field-item__field-note-error {\n flex-basis: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/container-grid/container-grid.styles.js CHANGED Viewed

@@ -764,7 +764,7 @@ span.ripple {
  */
 ::slotted(cre8-grid-item) {
   display: block;
-  padding: 0.75rem;
+  padding: var(--cre8-padding-8);
   /**
   * Slotted grid item within grid with no gap between items
   */
@@ -778,7 +778,7 @@ span.ripple {
   */
 }
 .cre8-c-container-grid--gap-sm > ::slotted(cre8-grid-item) {
-  padding: 0.25rem;
+  padding: var(--cre8-padding-4);
 }
 ::slotted(cre8-grid-item) {
   /**
@@ -786,7 +786,7 @@ span.ripple {
   */
 }
 .cre8-c-container-grid--gap-lg > ::slotted(cre8-grid-item) {
-  padding: 1rem;
+  padding: var(--cre8-padding-16);
 }
 ::slotted(cre8-grid-item) {
   /**

package/lib/components/container-grid/container-grid.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"container-grid.styles.js","sourceRoot":"","sources":["../../../components/container-grid/container-grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAi7BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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/\n 1) Same layout vocabulary as \\`cre8-grid\\` - stacked to N-across patterns -\n * but keyed to this element's own rendered width via \\`@container\\` instead\n * of the viewport via \\`@media\\`. Establishes its own containment context, so\n * it breaks into columns based on the space it is actually given: inside a\n * narrow sidebar on a wide viewport, or a wide main column on a narrow one.\n /\n.cre8-c-container-grid {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: -0.75rem;\n}\n\n/\n Grid with no gap in between items\n /\n.cre8-c-container-grid--gap-none {\n margin: 0;\n}\n\n/\n Small gap grid\n * 1) Spacing between grid items is smaller than default\n /\n.cre8-c-container-grid--gap-sm {\n margin: -0.25rem;\n}\n\n/\n Large gap grid\n * 1) Spacing between grid items is larger than default\n /\n.cre8-c-container-grid--gap-lg {\n margin: -1rem;\n}\n\n/\n Side by Side Grid\n * 1) Grid that stays 2 items per row regardless of its own width\n /\n.cre8-c-container-grid--side-by-side {\n flex-direction: row;\n}\n\n/\n 2up grid\n * 1) Stacked items when this element is narrow, 2 items per row once it has\n * enough of its own width to fit them\n /\n@container (min-width: 768px) {\n .cre8-c-container-grid--2up {\n flex-direction: row;\n }\n}\n.cre8-c-container-grid--2up {\n /\n 2up grid that breaks faster\n * 1) Grid that breaks from 1 to 2up at a smaller container width than the default\n /\n}\n@container (min-width: 560px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-faster {\n flex-direction: row;\n }\n}\n.cre8-c-container-grid--2up {\n /\n 2up grid that breaks slower\n * 1) Grid that breaks from 1 to 2up at a larger container width than the default\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower {\n flex-direction: column;\n }\n}\n@container (min-width: 1400px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower {\n flex-direction: row;\n }\n}\n\n/\n 3up grid\n * 1) Stacked items when narrow, 3 items per row once this element is wide enough\n /\n@container (min-width: 768px) {\n .cre8-c-container-grid--3up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 3up grid\n * 1) Stacked items when narrow, 3 items per row once this element is wide enough\n /\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-3up {\n flex-direction: row;\n }\n}\n.cre8-c-container-grid--1-3up {\n /\n 1 to 3 up grid that breaks faster\n * 1) Grid that breaks from 1 to 3up at a smaller container width than the default\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-faster {\n flex-direction: row;\n }\n}\n.cre8-c-container-grid--1-3up {\n /\n 1 to 3up grid that breaks slower\n * 1) Grid that breaks from 1 to 3up at a larger container width than the default\n /\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower {\n flex-direction: column;\n }\n}\n@container (min-width: 1200px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower {\n flex-direction: row;\n }\n}\n\n/\n 1 to 2 to 4up grid\n * 1) Stacked when narrow, 2 items per row at medium container widths, 4 items\n * per row once this element is wide enough\n /\n@container (min-width: 560px) {\n .cre8-c-container-grid--1-2-4up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 4up grid\n * 1) Stacked when narrow, 4 items per row once this element is wide enough\n /\n@container (min-width: 768px) {\n .cre8-c-container-grid--1-4up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 2 to 4up grid\n * 1) Stacked when narrow, 2 items per row at small/medium container widths,\n * 3 items per row at medium widths, and 4 items per row once wide enough\n /\n@container (min-width: 560px) {\n .cre8-c-container-grid--4up {\n flex-direction: row;\n }\n}\n\n/\n Slotted grid item within 4up Grid\n /\n.cre8-c-container-grid--2-4-6up {\n flex-direction: row;\n}\n\n/\n Slotted grid item\n /\n::slotted(cre8-grid-item) {\n display: block;\n padding: 0.75rem;\n /\n Slotted grid item within grid with no gap between items\n /\n}\n.cre8-c-container-grid--gap-none > ::slotted(cre8-grid-item) {\n padding: 0;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within grid with small gap between items\n /\n}\n.cre8-c-container-grid--gap-sm > ::slotted(cre8-grid-item) {\n padding: 0.25rem;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within grid with large gap between items\n /\n}\n.cre8-c-container-grid--gap-lg > ::slotted(cre8-grid-item) {\n padding: 1rem;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within side by side grid\n * 1) Grid that stays 2 items per row regardless of its own width\n /\n}\n.cre8-c-container-grid--side-by-side > ::slotted(cre8-grid-item) {\n width: 50%;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up Grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--2up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break faster (small to large container widths) Grid\n /\n}\n@container (min-width: 560px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-faster > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break slower (small to large container widths) Grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 100%;\n }\n}\n@container (min-width: 1400px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 3up Grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--3up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--3up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-3up Grid\n /\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-3up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1 to 3up break faster (small to large container widths) grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-faster > ::slotted(cre8-grid-item) {\n width: 33.33%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break slower (small to large container widths) Grid\n /\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 100%;\n }\n}\n@container (min-width: 1200px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 33.33%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-2-4up Grid\n /\n}\n@container (min-width: 560px) {\n .cre8-c-container-grid--1-2-4up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-2-4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-2-4up Grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--1-4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 4up Grid\n /\n}\n@container (min-width: 560px) {\n .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 4up Grid\n */\n}\n.cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 50%;\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n@container (min-width: 1200px) {\n .cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 16.66%;\n }\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"container-grid.styles.js","sourceRoot":"","sources":["../../../components/container-grid/container-grid.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAi7BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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/\n 1) Same layout vocabulary as \\`cre8-grid\\` - stacked to N-across patterns -\n * but keyed to this element's own rendered width via \\`@container\\` instead\n * of the viewport via \\`@media\\`. Establishes its own containment context, so\n * it breaks into columns based on the space it is actually given: inside a\n * narrow sidebar on a wide viewport, or a wide main column on a narrow one.\n /\n.cre8-c-container-grid {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: -0.75rem;\n}\n\n/\n Grid with no gap in between items\n /\n.cre8-c-container-grid--gap-none {\n margin: 0;\n}\n\n/\n Small gap grid\n * 1) Spacing between grid items is smaller than default\n /\n.cre8-c-container-grid--gap-sm {\n margin: -0.25rem;\n}\n\n/\n Large gap grid\n * 1) Spacing between grid items is larger than default\n /\n.cre8-c-container-grid--gap-lg {\n margin: -1rem;\n}\n\n/\n Side by Side Grid\n * 1) Grid that stays 2 items per row regardless of its own width\n /\n.cre8-c-container-grid--side-by-side {\n flex-direction: row;\n}\n\n/\n 2up grid\n * 1) Stacked items when this element is narrow, 2 items per row once it has\n * enough of its own width to fit them\n /\n@container (min-width: 768px) {\n .cre8-c-container-grid--2up {\n flex-direction: row;\n }\n}\n.cre8-c-container-grid--2up {\n /\n 2up grid that breaks faster\n * 1) Grid that breaks from 1 to 2up at a smaller container width than the default\n /\n}\n@container (min-width: 560px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-faster {\n flex-direction: row;\n }\n}\n.cre8-c-container-grid--2up {\n /\n 2up grid that breaks slower\n * 1) Grid that breaks from 1 to 2up at a larger container width than the default\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower {\n flex-direction: column;\n }\n}\n@container (min-width: 1400px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower {\n flex-direction: row;\n }\n}\n\n/\n 3up grid\n * 1) Stacked items when narrow, 3 items per row once this element is wide enough\n /\n@container (min-width: 768px) {\n .cre8-c-container-grid--3up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 3up grid\n * 1) Stacked items when narrow, 3 items per row once this element is wide enough\n /\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-3up {\n flex-direction: row;\n }\n}\n.cre8-c-container-grid--1-3up {\n /\n 1 to 3 up grid that breaks faster\n * 1) Grid that breaks from 1 to 3up at a smaller container width than the default\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-faster {\n flex-direction: row;\n }\n}\n.cre8-c-container-grid--1-3up {\n /\n 1 to 3up grid that breaks slower\n * 1) Grid that breaks from 1 to 3up at a larger container width than the default\n /\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower {\n flex-direction: column;\n }\n}\n@container (min-width: 1200px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower {\n flex-direction: row;\n }\n}\n\n/\n 1 to 2 to 4up grid\n * 1) Stacked when narrow, 2 items per row at medium container widths, 4 items\n * per row once this element is wide enough\n /\n@container (min-width: 560px) {\n .cre8-c-container-grid--1-2-4up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 4up grid\n * 1) Stacked when narrow, 4 items per row once this element is wide enough\n /\n@container (min-width: 768px) {\n .cre8-c-container-grid--1-4up {\n flex-direction: row;\n }\n}\n\n/\n 1 to 2 to 4up grid\n * 1) Stacked when narrow, 2 items per row at small/medium container widths,\n * 3 items per row at medium widths, and 4 items per row once wide enough\n /\n@container (min-width: 560px) {\n .cre8-c-container-grid--4up {\n flex-direction: row;\n }\n}\n\n/\n Slotted grid item within 4up Grid\n /\n.cre8-c-container-grid--2-4-6up {\n flex-direction: row;\n}\n\n/\n Slotted grid item\n /\n::slotted(cre8-grid-item) {\n display: block;\n padding: var(--cre8-padding-8);\n /\n Slotted grid item within grid with no gap between items\n /\n}\n.cre8-c-container-grid--gap-none > ::slotted(cre8-grid-item) {\n padding: 0;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within grid with small gap between items\n /\n}\n.cre8-c-container-grid--gap-sm > ::slotted(cre8-grid-item) {\n padding: var(--cre8-padding-4);\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within grid with large gap between items\n /\n}\n.cre8-c-container-grid--gap-lg > ::slotted(cre8-grid-item) {\n padding: var(--cre8-padding-16);\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within side by side grid\n * 1) Grid that stays 2 items per row regardless of its own width\n /\n}\n.cre8-c-container-grid--side-by-side > ::slotted(cre8-grid-item) {\n width: 50%;\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up Grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--2up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break faster (small to large container widths) Grid\n /\n}\n@container (min-width: 560px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-faster > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break slower (small to large container widths) Grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 100%;\n }\n}\n@container (min-width: 1400px) {\n .cre8-c-container-grid--2up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 3up Grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--3up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--3up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-3up Grid\n /\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-3up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1 to 3up break faster (small to large container widths) grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-faster > ::slotted(cre8-grid-item) {\n width: 33.33%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 2up break slower (small to large container widths) Grid\n /\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 100%;\n }\n}\n@container (min-width: 1200px) {\n .cre8-c-container-grid--1-3up.cre8-c-container-grid--break-slower > ::slotted(cre8-grid-item) {\n width: 33.33%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-2-4up Grid\n /\n}\n@container (min-width: 560px) {\n .cre8-c-container-grid--1-2-4up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--1-2-4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 1-2-4up Grid\n /\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--1-4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 4up Grid\n /\n}\n@container (min-width: 560px) {\n .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {\n width: 50%;\n }\n}\n@container (min-width: 768px) {\n .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {\n width: 33.3333%;\n }\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--4up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n::slotted(cre8-grid-item) {\n /\n Slotted grid item within 4up Grid\n */\n}\n.cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 50%;\n}\n@container (min-width: 960px) {\n .cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 25%;\n }\n}\n@container (min-width: 1200px) {\n .cre8-c-container-grid--2-4-6up > ::slotted(cre8-grid-item) {\n width: 16.66%;\n }\n}`;\nexport default styles;\n"]}

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

@@ -1027,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;
 }
@@ -1035,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;
 }
@@ -1112,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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: 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/divider/divider.styles.js CHANGED Viewed

@@ -598,8 +598,8 @@ span.ripple {
  */
 .cre8-c-divider {
   background-color: var(--cre8-color-border-default);
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: var(--cre8-spacing-8);
+  margin-bottom: var(--cre8-spacing-8);
 }
 .cre8-c-divider--horizontal {
@@ -612,8 +612,8 @@ span.ripple {
   height: 100%;
   margin-top: 0;
   margin-bottom: 0;
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+  margin-left: var(--cre8-spacing-8);
+  margin-right: var(--cre8-spacing-8);
 }
 /**

package/lib/components/divider/divider.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../components/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAknBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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: flex;\n}\n\n/\n Divider Element\n /\n.cre8-c-divider {\n background-color: var(--cre8-color-border-default);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.cre8-c-divider--horizontal {\n width: 100%;\n height: var(--cre8-border-width-default);\n}\n\n.cre8-c-divider--vertical {\n width: var(--cre8-border-width-default);\n height: 100%;\n margin-top: 0;\n margin-bottom: 0;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n/\n Divider colors\n*/\n.cre8-c-divider--brand {\n background-color: var(--cre8-color-border-brand);\n}\n\n.cre8-c-divider--knockout {\n background-color: var(--cre8-color-border-knockout);\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../components/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAknBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.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: flex;\n}\n\n/\n Divider Element\n /\n.cre8-c-divider {\n background-color: var(--cre8-color-border-default);\n margin-top: var(--cre8-spacing-8);\n margin-bottom: var(--cre8-spacing-8);\n}\n\n.cre8-c-divider--horizontal {\n width: 100%;\n height: var(--cre8-border-width-default);\n}\n\n.cre8-c-divider--vertical {\n width: var(--cre8-border-width-default);\n height: 100%;\n margin-top: 0;\n margin-bottom: 0;\n margin-left: var(--cre8-spacing-8);\n margin-right: var(--cre8-spacing-8);\n}\n\n/\n Divider colors\n*/\n.cre8-c-divider--brand {\n background-color: var(--cre8-color-border-brand);\n}\n\n.cre8-c-divider--knockout {\n background-color: var(--cre8-color-border-knockout);\n}`;\nexport default styles;\n"]}