@tmorrow/cre8-wc 1.2.7 → 2.0.1

package/lib/components/select-tile/select-tile.styles.js

@@ -1,4 +1,1058 @@
 import { css } from 'lit';
-const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-select-tile{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;height:100%;width:100%;padding:1rem;gap:1rem;border-color:var(--cre8-color-border-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);border-style:solid;background:var(--cre8-color-bg-default)}.cre8-c-select-tile:hover,.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible,.cre8-c-select-tile:active{background:var(--cre8-color-bg-default-hover);border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile.cre8-c-select-tile--error{border-color:var(--cre8-color-border-error);background:var(--cre8-color-bg-error)}.cre8-c-select-tile.cre8-c-select-tile--success{border-color:var(--cre8-color-border-success);background:var(--cre8-color-bg-success)}.cre8-c-select-tile.cre8-c-select-tile--disabled{border-color:var(--cre8-color-border-disabled);background:var(--cre8-color-bg-disabled);cursor:not-allowed}input:checked+.cre8-c-select-tile{border-width:2px;border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile__input{display:none}.cre8-c-select-tile--horizontal{flex-direction:row;align-items:center;justify-content:center}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm{flex-direction:column}.cre8-c-select-tile--vertical-at-sm .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm-2{flex-direction:column}.cre8-c-select-tile--vertical-at-sm-2 .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 768px){.cre8-c-select-tile--vertical-at-md{flex-direction:column}.cre8-c-select-tile--vertical-at-md .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 960px){.cre8-c-select-tile--vertical-at-lg{flex-direction:column}.cre8-c-select-tile--vertical-at-lg .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1200px){.cre8-c-select-tile--vertical-at-xl{flex-direction:column}.cre8-c-select-tile--vertical-at-xl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1400px){.cre8-c-select-tile--vertical-at-xxl{flex-direction:column}.cre8-c-select-tile--vertical-at-xxl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}.cre8-c-select-tile--bare{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none}.cre8-c-select-tile--horizontal-bare{flex-direction:row;border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none;align-items:center;justify-content:center}.cre8-c-select-tile--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-select-tile__header{display:block;flex:none}.cre8-c-select-tile__body{display:block;flex:1 1 auto}.cre8-c-select-tile--bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-select-tile__body .cre8-c-select-tile__body_body{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform)}.cre8-c-select-tile__footer{display:flex;flex:none}.cre8-c-select-tile--bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-left,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-left{order:-1}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-none,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-none{display:none}.cre8-c-select-tile__custom-radio{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-default)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-strong);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-select-tile__custom-radio-top-right{position:absolute;top:0.5rem;right:0.5rem}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__icon{display:flex}.cre8-c-select-tile__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__inner-circle{flex:none;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle{background:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle{display:flex}.cre8-c-select-tile__custom-checkbox{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-small);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-checkbox{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.cre8-c-select-tile--error input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default)}.cre8-c-select-tile--disabled input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-select-tile__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-select-tile--error .cre8-c-select-tile__icon{color:var(--cre8-color-content-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__icon{color:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon{display:flex}`;
+const styles = css `.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
+}
+
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
+}
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
+}
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
+}
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
+.cre8-u-padding-bottom-xl {
+  padding-bottom: size(4) !important;
+}
+
+.cre8-u-padding-bottom-xxl {
+  padding-bottom: size(8) !important;
+}
+
+.cre8-u-padding-left-none {
+  padding-left: 0 !important;
+}
+
+.cre8-u-padding-left-sm {
+  padding-left: size(1) !important;
+}
+
+.cre8-u-padding-left-md {
+  padding-left: size(2) !important;
+}
+
+.cre8-u-padding-left-lg {
+  padding-left: size(3) !important;
+}
+
+.cre8-u-padding-left-xl {
+  padding-left: size(4) !important;
+}
+
+.cre8-u-padding-left-xxl {
+  padding-left: size(8) !important;
+}
+
+.cre8-u-display-flex {
+  display: flex !important;
+}
+
+.cre8-u-display-block {
+  display: block !important;
+}
+
+body {
+  font-family: var(--cre8-typography-body-default-font-family);
+  font-size: var(--cre8-typography-body-default-font-size);
+  font-weight: var(--cre8-typography-body-default-font-weight);
+  line-height: var(--cre8-typography-body-default-line-height);
+  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  color: var(--cre8-color-content-default);
+  background: var(--background-default);
+}
+
+@media all and (min-width: 60rem) {
+  .page-container {
+    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
+  }
+}
+.band__inner {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media all and (min-width: 60rem) {
+  .band__inner {
+    margin-right: 0;
+  }
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+:host {
+  --cre8-z-index-1: 1;
+  --cre8-z-index-50: 50;
+  --cre8-z-index-100: 100;
+  --cre8-z-index-200: 200;
+  --cre8-z-index-1030: 1030;
+  --cre8-anim-fade-quick: 0.35s;
+  --cre8-anim-ease: ease;
+}
+
+@keyframes fadeIn {
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slideInFwd {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideOutRight {
+  100% {
+    width: 272px;
+    height: 272px;
+  }
+}
+@keyframes slideUp {
+  100% {
+    transform: translateY(0);
+  }
+}
+@media (width >= 481px) {
+  @keyframes slideInFwd {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 417px;
+      height: 417px;
+    }
+  }
+}
+@media (width >= 48rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 330px;
+      height: 330px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 330px;
+      height: 330px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 60rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 460px;
+      height: 460px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 460px;
+      height: 460px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 75rem) {
+  @keyframes slideInFwd {
+    100% {
+      width: 592px;
+      height: 591px;
+    }
+  }
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 45px));
+    }
+  }
+}
+@media (width >= 87.5rem) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 120px));
+    }
+  }
+}
+@media (width >= 2200px) {
+  @keyframes slideOutRight {
+    100% {
+      width: 592px;
+      height: 591px;
+      transform: translateX(calc(100vw - 592px));
+    }
+  }
+}
+span.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple 600ms linear;
+  background-color: var(--ripple-bg-color);
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 1;
+  }
+}
+:root {
+  --size-base-unit: 0.5rem;
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+:host {
+  display: inline-flex;
+}
+
+.cre8-c-select-tile-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-color: var(--cre8-color-border-default);
+  border-width: var(--cre8-border-width-default);
+  border-radius: var(--cre8-border-radius-container);
+  border-style: solid;
+}
+
+.cre8-c-select-tile {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding: 1rem;
+  gap: 1rem;
+  background: var(--cre8-color-bg-default);
+}
+.cre8-c-select-tile:hover, .cre8-c-select-tile:focus, .cre8-c-select-tile:focus-visible, .cre8-c-select-tile:active {
+  background: var(--cre8-color-bg-default-hover);
+  border-color: var(--cre8-color-border-brand);
+}
+.cre8-c-select-tile:focus, .cre8-c-select-tile:focus-visible {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-select-tile.cre8-c-select-tile--error {
+  border-color: var(--cre8-color-border-error);
+  background: var(--cre8-color-bg-error);
+}
+.cre8-c-select-tile.cre8-c-select-tile--success {
+  border-color: var(--cre8-color-border-success);
+  background: var(--cre8-color-bg-success);
+}
+.cre8-c-select-tile.cre8-c-select-tile--disabled {
+  border-color: var(--cre8-color-border-disabled);
+  background: var(--cre8-color-bg-disabled);
+  cursor: not-allowed;
+}
+
+input:checked + .cre8-c-select-tile {
+  border-width: 2px;
+  border-color: var(--cre8-color-border-brand);
+}
+
+.cre8-c-select-tile__input {
+  display: none;
+}
+
+/**
+ * Horizontal select-tile
+ * 1) Organized block with flex-direction set to row so that header => footer appears
+ * from left to right rather than top to bottom
+ */
+.cre8-c-select-tile--horizontal {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+@media all and (max-width: 560px) {
+  .cre8-c-select-tile--vertical-at-sm {
+    flex-direction: column;
+  }
+  .cre8-c-select-tile--vertical-at-sm .cre8-c-select-tile__custom-radio {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+@media all and (max-width: 560px) {
+  .cre8-c-select-tile--vertical-at-sm-2 {
+    flex-direction: column;
+  }
+  .cre8-c-select-tile--vertical-at-sm-2 .cre8-c-select-tile__custom-radio {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+@media all and (max-width: 768px) {
+  .cre8-c-select-tile--vertical-at-md {
+    flex-direction: column;
+  }
+  .cre8-c-select-tile--vertical-at-md .cre8-c-select-tile__custom-radio {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+@media all and (max-width: 960px) {
+  .cre8-c-select-tile--vertical-at-lg {
+    flex-direction: column;
+  }
+  .cre8-c-select-tile--vertical-at-lg .cre8-c-select-tile__custom-radio {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+@media all and (max-width: 1200px) {
+  .cre8-c-select-tile--vertical-at-xl {
+    flex-direction: column;
+  }
+  .cre8-c-select-tile--vertical-at-xl .cre8-c-select-tile__custom-radio {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+@media all and (max-width: 1400px) {
+  .cre8-c-select-tile--vertical-at-xxl {
+    flex-direction: column;
+  }
+  .cre8-c-select-tile--vertical-at-xxl .cre8-c-select-tile__custom-radio {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+}
+
+/**
+ * Bare select-tile
+ * 1) Organized block without a border, background, or padding
+ */
+.cre8-c-select-tile--bare {
+  border: var(--cre8-border-width-none);
+  padding: var(--cre8-spacing-0);
+  box-shadow: none;
+}
+
+/**
+ * Horizontal-bare select-tile
+ * 1) Organized block with flex-direction set to row so that header => footer appears
+ * from left to right rather than top to bottom without a border, background, or padding
+ */
+.cre8-c-select-tile--horizontal-bare {
+  flex-direction: row;
+  border: var(--cre8-border-width-none);
+  padding: var(--cre8-spacing-0);
+  box-shadow: none;
+  align-items: center;
+  justify-content: center;
+}
+
+/**
+ * Center aligned select-tile
+ * 1) Center content and text within the select-tile
+ */
+.cre8-c-select-tile--align-center {
+  text-align: center;
+  /* 1 */
+  align-items: center;
+  /* 1 */
+  justify-content: center;
+  /* 1 */
+}
+
+/**
+ * Slotted image within a select-tile
+ * 1) Make the image full width
+ */
+::slotted(img) {
+  width: 100%;
+}
+
+/**
+ * Select tile header
+ * 1) Remove flex so that body always takes up remaining space
+ */
+.cre8-c-select-tile__header {
+  display: block;
+  flex: none;
+  /* 1 */
+}
+
+/**
+ * Select Tile body
+ * 1) Flex applied to always fill the remaining space of the select-tile
+ */
+.cre8-c-select-tile__body {
+  display: block;
+  flex: 1 1 auto;
+  /* 1 */
+  /**
+  * Select Tile body within bare select-tile
+  * 1) Remove padding
+  */
+}
+.cre8-c-select-tile--bare .cre8-c-select-tile__body {
+  padding: var(--cre8-spacing-0);
+}
+.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__body {
+  padding: var(--cre8-spacing-0);
+}
+.cre8-c-select-tile__body .cre8-c-select-tile__body_title {
+  font-family: var(--cre8-typography-title-default-mobile-font-family);
+  font-size: var(--cre8-typography-title-default-mobile-font-size);
+  font-weight: var(--cre8-typography-title-default-mobile-font-weight);
+  line-height: var(--cre8-typography-title-default-mobile-line-height);
+  text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);
+  text-transform: var(--cre8-typography-title-default-mobile-text-transform);
+}
+@media all and (min-width: 768px) {
+  .cre8-c-select-tile__body .cre8-c-select-tile__body_title {
+    font-family: var(--cre8-typography-title-default-font-family);
+    font-size: var(--cre8-typography-title-default-font-size);
+    font-weight: var(--cre8-typography-title-default-font-weight);
+    line-height: var(--cre8-typography-title-default-line-height);
+    text-decoration: var(--cre8-typography-title-default-text-decoration);
+    text-transform: var(--cre8-typography-title-default-text-transform);
+  }
+}
+.cre8-c-select-tile__body .cre8-c-select-tile__body_body {
+  font-family: var(--cre8-typography-body-default-font-family);
+  font-size: var(--cre8-typography-body-default-font-size);
+  font-weight: var(--cre8-typography-body-default-font-weight);
+  line-height: var(--cre8-typography-body-default-line-height);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+}
+
+/**
+ * Select Tile footer
+ * 1) Remove flex so that body always takes up remaining space
+ */
+.cre8-c-select-tile__footer {
+  display: flex;
+  flex: none;
+  /* 1 */
+}
+.cre8-c-select-tile--bare .cre8-c-select-tile__footer {
+  padding: var(--cre8-spacing-0);
+}
+.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__footer {
+  padding: var(--cre8-spacing-0);
+}
+
+.cre8-c-select-tile__custom-radio,
+.cre8-c-select-tile__custom-checkbox {
+  /**
+   * Render the checkmark/radio button on the left instead of the right.
+   * Since it is only visual and the "checked" state is also set via aria,
+   * there are hopefully no a11y issues with using order here.
+   */
+}
+.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-left,
+.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-left {
+  order: -1;
+}
+.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-none,
+.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-none {
+  display: none;
+}
+
+/**
+* Radio field item custom radio container
+*/
+.cre8-c-select-tile__custom-radio {
+  display: flex;
+  flex: none;
+  height: 1.5rem;
+  width: 1.5rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--cre8-border-radius-round);
+  border-width: var(--cre8-border-width-default);
+  border-style: var(--cre8-border-style-default);
+  background-color: var(--cre8-color-bg-default);
+  border-color: var(--cre8-color-border-default);
+  /**
+  * Radio field item custom radio focus visible  custom outline
+  */
+}
+.cre8-c-select-tile__input:focus-visible + .cre8-c-select-tile__custom-radio {
+  border-color: var(--cre8-color-border-strong);
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible + .cre8-c-select-tile__custom-radio {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);
+  outline-offset: 0.125rem;
+  border-color: var(--cre8-color-border-error);
+}
+.cre8-c-select-tile__custom-radio {
+  /**
+  * Radio field item custom radio within radio field with error
+  */
+}
+.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio {
+  border-color: var(--cre8-color-border-error);
+}
+.cre8-c-select-tile__custom-radio {
+  /**
+  * Radio field item custom radio within radio field disabled
+  */
+}
+.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-radio {
+  cursor: not-allowed;
+  background-color: var(--cre8-color-bg-disabled);
+  border-color: var(--cre8-color-border-disabled);
+}
+
+.cre8-c-select-tile__custom-radio-top-right {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+/**
+ * Check radio variant
+ */
+.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__icon {
+  display: flex;
+}
+
+/**
+ * Radio field item inner circle
+ */
+.cre8-c-select-tile__inner-circle {
+  display: none;
+  cursor: pointer;
+  height: 0.75rem;
+  width: 0.75rem;
+  background: var(--cre8-color-content-brand);
+  border-radius: var(--cre8-border-radius-round);
+  /** Check radio variant */
+}
+.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__inner-circle {
+  flex: none;
+  height: 1.5rem;
+  width: 1.5rem;
+  align-items: center;
+  justify-content: center;
+}
+.cre8-c-select-tile__inner-circle {
+  /**
+  * Radio field item inner circle error
+  */
+}
+.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle {
+  background: var(--cre8-color-bg-error-strong);
+}
+.cre8-c-select-tile__inner-circle {
+  /**
+  * Radio field item inner circle disabled
+  */
+}
+.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle {
+  background: var(--cre8-color-content-disabled);
+}
+.cre8-c-select-tile__inner-circle {
+  /**
+  * Radio field item inner circle will display if the input is checked
+  */
+}
+input:checked ~ * .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle {
+  display: flex;
+}
+
+/**
+ * Checkbox field item custom checkbox container
+ */
+.cre8-c-select-tile__custom-checkbox {
+  display: flex;
+  flex: none;
+  height: 1.5rem;
+  width: 1.5rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--cre8-border-radius-small);
+  border-width: var(--cre8-border-width-default);
+  border-style: var(--cre8-border-style-default);
+  background-color: var(--cre8-color-bg-default);
+  border-color: var(--cre8-color-border-strong);
+  /**
+  * Checkbox field item custom checkbox focus visible  custom outline
+  */
+}
+.cre8-c-select-tile__input:focus-visible + .cre8-c-select-tile__custom-checkbox {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
+  outline-offset: 0.125rem;
+}
+.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible + .cre8-c-select-tile__custom-checkbox {
+  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);
+  outline-offset: 0.125rem;
+}
+.cre8-c-select-tile__custom-checkbox {
+  /**
+  * Checkbox field item custom checkbox within checkbox field with error
+  */
+}
+.cre8-c-select-tile--error .cre8-c-select-tile__custom-checkbox {
+  background-color: var(--cre8-color-bg-default);
+  border-color: var(--cre8-color-border-error);
+}
+.cre8-c-select-tile__custom-checkbox {
+  /**
+  * Checkbox field item custom checkbox within checkbox field with disabled
+  */
+}
+.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-checkbox {
+  cursor: not-allowed;
+  background-color: var(--cre8-color-bg-disabled);
+  border-color: var(--cre8-color-border-disabled);
+}
+
+/**
+  * Checkbox field item custom checkbox when item is checked
+  */
+input:checked ~ * .cre8-c-select-tile__custom-checkbox {
+  background-color: var(--cre8-color-bg-brand-strong);
+  /**
+  * Checkbox field item custom checkbox when item is checked with error
+  */
+}
+.cre8-c-select-tile--error input:checked ~ * .cre8-c-select-tile__custom-checkbox {
+  background-color: var(--cre8-color-bg-default);
+}
+input:checked ~ * .cre8-c-select-tile__custom-checkbox {
+  /**
+  * Checkbox field item custom checkbox when item is checked with disabled
+  */
+}
+.cre8-c-select-tile--disabled input:checked ~ * .cre8-c-select-tile__custom-checkbox {
+  background-color: var(--cre8-color-bg-disabled);
+}
+
+/**
+ * Checkbox field item checkmark icon
+ */
+.cre8-c-select-tile__icon {
+  display: none;
+  color: var(--cre8-color-content-knockout);
+  /**
+  * Checkbox field item icon within checkbox field with error
+  */
+}
+.cre8-c-select-tile--error .cre8-c-select-tile__icon {
+  color: var(--cre8-color-content-error);
+}
+.cre8-c-select-tile__icon {
+  /**
+  * Checkbox field item icon within checkbox field disabled
+  */
+}
+.cre8-c-select-tile--disabled .cre8-c-select-tile__icon {
+  color: var(--cre8-color-content-disabled);
+}
+.cre8-c-select-tile__icon {
+  /**
+  * Checkbox field item icon will display in the box if the input is checked
+  */
+}
+input:checked ~ * .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon {
+  display: flex;
+}`;
 export default styles;
 //# sourceMappingURL=select-tile.styles.js.map