@axa-fr/design-system-apollo-css 1.0.3-alpha.144

package/dist/Button/ButtonApollo.css

@@ -0,0 +1 @@
+.af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary,.af-btn-client--secondary-inverse{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-radius:var(--radius-32);--button-shadow-color:var(--axa-blue-100);--button-padding:calc(12/var(--font-size-base)*1rem) calc(16/var(--font-size-base)*1rem);--button-line-height:calc(24/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-padding:calc(12/var(--font-size-base)*1rem) calc(24/var(--font-size-base)*1rem);--button-line-height:calc(32/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--axa-blue-120)}.af-btn-client:active{--button-bg-color-default:var(--axa-blue-80)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--axa-blue-65)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--neutral-50);--button-shadow-color:var(--neutral-50)}.af-btn-client--primary-business{--button-bg-color-default:var(--warning-100);--button-text-color-default:var(--white)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--warning-80)}.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible,.af-btn-client--primary-business:hover{--button-bg-color-default:var(--warning-120)}.af-btn-client--primary-inverse{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120)}.af-btn-client--ghost{--button-bg-color-default:#0000;--button-text-color-default:var(--axa-blue-100);--button-padding:0}.af-btn-client--ghost:active{--button-text-color-default:var(--axa-blue-80)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--axa-blue-120);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--secondary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-80)}.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-120)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-shadow-color:var(--white)}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80);--button-shadow-color:var(--neutral-5)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120);--button-shadow-color:var(--neutral-14)}.af-btn-client--tertiary{--button-bg-color-default:var(--axa-blue-8);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--tertiary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white)}.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible,.af-btn-client--tertiary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white)}

package/dist/Button/ButtonApollo.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/ButtonCommon.scss","../../src/Button/ButtonApollo.scss","../../src/Button/ButtonApollo.scss%23sass"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CAVA,QAAA,CCDF,kCAAA,CDUE,sCAAA,CAXA,YAAA,CAOA,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CCXF,6BDEE,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCFF,CDIE,kDAEE,6CAAA,CACA,kBCHJ,CDME,2DAEE,mBCLJ,CDOI,mFACE,YCLN,CDSE,mBACE,cAAA,CACA,iBCPJ,CDUE,sBACE,sCCRJ,CDUI,4FAGE,yBCVN,CDkBE,4DACE,qDCbJ,CCxCA,eACE,6CAAA,CACA,wCAAA,CACA,gCAAA,CACA,yCAAA,CACA,wFAAA,CAEA,wDAAA,CACA,sDD2CF,CCzCE,wBAVF,eAWI,wFAAA,CAEA,wDAAA,CACA,sDD4CF,CACF,CC1CE,qBACE,6CD4CJ,CCzCE,sBACE,4CD2CJ,CCxCE,kDAEE,yCDyCJ,CCtCE,2DAEE,0CAAA,CACA,6CAAA,CACA,uCDuCJ,CCpCE,iCACE,4CAAA,CACA,wCDsCJ,CCpCI,wCACE,2CDsCN,CCnCI,6HAGE,4CDmCN,CC/BE,gCACE,sCAAA,CACA,+CDiCJ,CC/BI,uCACE,0CAAA,CACA,8CDiCN,CC9BI,0HAGE,2CAAA,CACA,+CD8BN,CC1BE,sBACE,+BAAA,CACA,+CAAA,CACA,kBD4BJ,CC1BI,6BACE,8CD4BN,CCzBI,4FAGE,+CAAA,CACA,+BDyBN,CCtBI,yEAEE,+BDuBN,CCnBE,0BACE,sCAAA,CACA,+CDqBJ,CCnBI,iCACE,4CAAA,CACA,wCAAA,CACA,wCDqBN,CClBI,wGAGE,6CAAA,CACA,wCAAA,CACA,yCDkBN,CCdE,kCACE,6CAAA,CACA,wCAAA,CACA,kCDgBJ,CCdI,yCACE,0CAAA,CACA,8CAAA,CACA,sCDgBN,CCbI,gIAGE,2CAAA,CACA,+CAAA,CACA,uCDaN,CCTE,yBACE,2CAAA,CACA,+CDWJ,CCTI,gCACE,4CAAA,CDWN,wCACA,CCRI,qGAGE,6CAAA,CACA,wCDQN","file":"ButtonApollo.css","sourcesContent":["/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n  display: flex;\n  padding: var(--button-padding);\n  border: 0;\n  border-radius: var(--button-radius);\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  font-family: var(--font-family-base);\n  font-size: var(--button-font-size);\n  font-weight: 600;\n  line-height: var(--button-line-height);\n  color: var(--button-text-color-default);\n  background-color: var(--button-bg-color-default);\n  transition-duration: var(--transition-duration);\n  transition-property: width, height, border, color, background-color, outline,\n    box-shadow;\n  transition-timing-function: linear;\n  user-select: none;\n\n  &:focus-visible,\n  &:focus {\n    outline: 2px solid var(--button-outline-color);\n    outline-offset: 3px;\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    pointer-events: none;\n\n    & > [aria-live] {\n      margin: unset;\n    }\n  }\n\n  & > svg {\n    aspect-ratio: 1;\n    fill: currentcolor;\n  }\n\n  &--ghost {\n    gap: calc(4 / var(--font-size-base) * 1rem);\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      text-decoration: underline;\n    }\n  }\n\n  &--secondary {\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n  }\n\n  &--secondary-inverse {\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n  }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n  --button-bg-color-default: var(--axa-blue-100);\n  --button-text-color-default: var(--white);\n  --button-radius: var(--radius-32);\n  --button-shadow-color: var(--axa-blue-100);\n  --button-padding: calc(12 / var(--font-size-base) * 1rem)\n    calc(16 / var(--font-size-base) * 1rem);\n  --button-line-height: calc(24 / var(--font-size-base) * 1rem);\n  --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n  @media (width > #{breakpoints.$breakpoint-lg}) {\n    --button-padding: calc(12 / var(--font-size-base) * 1rem)\n      calc(24 / var(--font-size-base) * 1rem);\n    --button-line-height: calc(32 / var(--font-size-base) * 1rem);\n    --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n\n  &:hover {\n    --button-bg-color-default: var(--axa-blue-120);\n  }\n\n  &:active {\n    --button-bg-color-default: var(--axa-blue-80);\n  }\n\n  &:focus-visible,\n  &:focus {\n    --button-outline-color: var(--axa-blue-65);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    --button-bg-color-default: var(--neutral-5);\n    --button-text-color-default: var(--neutral-50);\n    --button-shadow-color: var(--neutral-50);\n  }\n\n  &--primary-business {\n    --button-bg-color-default: var(--warning-100);\n    --button-text-color-default: var(--white);\n\n    &:active {\n      --button-bg-color-default: var(--warning-80);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--warning-120);\n    }\n  }\n\n  &--primary-inverse {\n    --button-bg-color-default: var(--white);\n    --button-text-color-default: var(--axa-blue-100);\n\n    &:active {\n      --button-bg-color-default: var(--neutral-5);\n      --button-text-color-default: var(--axa-blue-80);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--neutral-14);\n      --button-text-color-default: var(--axa-blue-120);\n    }\n  }\n\n  &--ghost {\n    --button-bg-color-default: transparent;\n    --button-text-color-default: var(--axa-blue-100);\n    --button-padding: 0;\n\n    &:active {\n      --button-text-color-default: var(--axa-blue-80);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-text-color-default: var(--axa-blue-120);\n      --button-bg-color-default: transparent;\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      --button-bg-color-default: transparent;\n    }\n  }\n\n  &--secondary {\n    --button-bg-color-default: var(--white);\n    --button-text-color-default: var(--axa-blue-100);\n\n    &:active {\n      --button-bg-color-default: var(--axa-blue-80);\n      --button-text-color-default: var(--white);\n      --button-shadow-color: var(--axa-blue-80);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--axa-blue-120);\n      --button-text-color-default: var(--white);\n      --button-shadow-color: var(--axa-blue-120);\n    }\n  }\n\n  &--secondary-inverse {\n    --button-bg-color-default: var(--axa-blue-100);\n    --button-text-color-default: var(--white);\n    --button-shadow-color: var(--white);\n\n    &:active {\n      --button-bg-color-default: var(--neutral-5);\n      --button-text-color-default: var(--axa-blue-80);\n      --button-shadow-color: var(--neutral-5);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--neutral-14);\n      --button-text-color-default: var(--axa-blue-120);\n      --button-shadow-color: var(--neutral-14);\n    }\n  }\n\n  &--tertiary {\n    --button-bg-color-default: var(--axa-blue-8);\n    --button-text-color-default: var(--axa-blue-100);\n\n    &:active {\n      --button-bg-color-default: var(--axa-blue-80);\n      --button-text-color-default: var(--white);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--axa-blue-120);\n      --button-text-color-default: var(--white);\n    }\n  }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n  --button-bg-color-default: var(--axa-blue-100);\n  --button-text-color-default: var(--white);\n  --button-radius: var(--radius-32);\n  --button-shadow-color: var(--axa-blue-100);\n  --button-padding: calc(12 / var(--font-size-base) * 1rem)\n    calc(16 / var(--font-size-base) * 1rem);\n  --button-line-height: calc(24 / var(--font-size-base) * 1rem);\n  --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n  @media (width > #{breakpoints.$breakpoint-lg}) {\n    --button-padding: calc(12 / var(--font-size-base) * 1rem)\n      calc(24 / var(--font-size-base) * 1rem);\n    --button-line-height: calc(32 / var(--font-size-base) * 1rem);\n    --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n\n  &:hover {\n    --button-bg-color-default: var(--axa-blue-120);\n  }\n\n  &:active {\n    --button-bg-color-default: var(--axa-blue-80);\n  }\n\n  &:focus-visible,\n  &:focus {\n    --button-outline-color: var(--axa-blue-65);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    --button-bg-color-default: var(--neutral-5);\n    --button-text-color-default: var(--neutral-50);\n    --button-shadow-color: var(--neutral-50);\n  }\n\n  &--primary-business {\n    --button-bg-color-default: var(--warning-100);\n    --button-text-color-default: var(--white);\n\n    &:active {\n      --button-bg-color-default: var(--warning-80);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--warning-120);\n    }\n  }\n\n  &--primary-inverse {\n    --button-bg-color-default: var(--white);\n    --button-text-color-default: var(--axa-blue-100);\n\n    &:active {\n      --button-bg-color-default: var(--neutral-5);\n      --button-text-color-default: var(--axa-blue-80);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--neutral-14);\n      --button-text-color-default: var(--axa-blue-120);\n    }\n  }\n\n  &--ghost {\n    --button-bg-color-default: transparent;\n    --button-text-color-default: var(--axa-blue-100);\n    --button-padding: 0;\n\n    &:active {\n      --button-text-color-default: var(--axa-blue-80);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-text-color-default: var(--axa-blue-120);\n      --button-bg-color-default: transparent;\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      --button-bg-color-default: transparent;\n    }\n  }\n\n  &--secondary {\n    --button-bg-color-default: var(--white);\n    --button-text-color-default: var(--axa-blue-100);\n\n    &:active {\n      --button-bg-color-default: var(--axa-blue-80);\n      --button-text-color-default: var(--white);\n      --button-shadow-color: var(--axa-blue-80);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--axa-blue-120);\n      --button-text-color-default: var(--white);\n      --button-shadow-color: var(--axa-blue-120);\n    }\n  }\n\n  &--secondary-inverse {\n    --button-bg-color-default: var(--axa-blue-100);\n    --button-text-color-default: var(--white);\n    --button-shadow-color: var(--white);\n\n    &:active {\n      --button-bg-color-default: var(--neutral-5);\n      --button-text-color-default: var(--axa-blue-80);\n      --button-shadow-color: var(--neutral-5);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--neutral-14);\n      --button-text-color-default: var(--axa-blue-120);\n      --button-shadow-color: var(--neutral-14);\n    }\n  }\n\n  &--tertiary {\n    --button-bg-color-default: var(--axa-blue-8);\n    --button-text-color-default: var(--axa-blue-100);\n\n    &:active {\n      --button-bg-color-default: var(--axa-blue-80);\n      --button-text-color-default: var(--white);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--axa-blue-120);\n      --button-text-color-default: var(--white);\n    }\n  }\n}\n"]}

package/dist/Button/ButtonApollo.scss

@@ -0,0 +1,153 @@
+/* Apollo first and mobile first approch */
+
+@use "../common/breakpoints" as breakpoints;
+
+@use "./ButtonCommon";
+
+.af-btn-client {
+  --button-bg-color-default: var(--axa-blue-100);
+  --button-text-color-default: var(--white);
+  --button-radius: var(--radius-32);
+  --button-shadow-color: var(--axa-blue-100);
+  --button-padding: calc(12 / var(--font-size-base) * 1rem)
+    calc(16 / var(--font-size-base) * 1rem);
+  --button-line-height: calc(24 / var(--font-size-base) * 1rem);
+  --button-font-size: calc(16 / var(--font-size-base) * 1rem);
+
+  @media (width > #{breakpoints.$breakpoint-lg}) {
+    --button-padding: calc(12 / var(--font-size-base) * 1rem)
+      calc(24 / var(--font-size-base) * 1rem);
+    --button-line-height: calc(32 / var(--font-size-base) * 1rem);
+    --button-font-size: calc(18 / var(--font-size-base) * 1rem);
+  }
+
+  &:hover {
+    --button-bg-color-default: var(--axa-blue-120);
+  }
+
+  &:active {
+    --button-bg-color-default: var(--axa-blue-80);
+  }
+
+  &:focus-visible,
+  &:focus {
+    --button-outline-color: var(--axa-blue-65);
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    --button-bg-color-default: var(--neutral-5);
+    --button-text-color-default: var(--neutral-50);
+    --button-shadow-color: var(--neutral-50);
+  }
+
+  &--primary-business {
+    --button-bg-color-default: var(--warning-100);
+    --button-text-color-default: var(--white);
+
+    &:active {
+      --button-bg-color-default: var(--warning-80);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-bg-color-default: var(--warning-120);
+    }
+  }
+
+  &--primary-inverse {
+    --button-bg-color-default: var(--white);
+    --button-text-color-default: var(--axa-blue-100);
+
+    &:active {
+      --button-bg-color-default: var(--neutral-5);
+      --button-text-color-default: var(--axa-blue-80);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-bg-color-default: var(--neutral-14);
+      --button-text-color-default: var(--axa-blue-120);
+    }
+  }
+
+  &--ghost {
+    --button-bg-color-default: transparent;
+    --button-text-color-default: var(--axa-blue-100);
+    --button-padding: 0;
+
+    &:active {
+      --button-text-color-default: var(--axa-blue-80);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-text-color-default: var(--axa-blue-120);
+      --button-bg-color-default: transparent;
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      --button-bg-color-default: transparent;
+    }
+  }
+
+  &--secondary {
+    --button-bg-color-default: var(--white);
+    --button-text-color-default: var(--axa-blue-100);
+
+    &:active {
+      --button-bg-color-default: var(--axa-blue-80);
+      --button-text-color-default: var(--white);
+      --button-shadow-color: var(--axa-blue-80);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-bg-color-default: var(--axa-blue-120);
+      --button-text-color-default: var(--white);
+      --button-shadow-color: var(--axa-blue-120);
+    }
+  }
+
+  &--secondary-inverse {
+    --button-bg-color-default: var(--axa-blue-100);
+    --button-text-color-default: var(--white);
+    --button-shadow-color: var(--white);
+
+    &:active {
+      --button-bg-color-default: var(--neutral-5);
+      --button-text-color-default: var(--axa-blue-80);
+      --button-shadow-color: var(--neutral-5);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-bg-color-default: var(--neutral-14);
+      --button-text-color-default: var(--axa-blue-120);
+      --button-shadow-color: var(--neutral-14);
+    }
+  }
+
+  &--tertiary {
+    --button-bg-color-default: var(--axa-blue-8);
+    --button-text-color-default: var(--axa-blue-100);
+
+    &:active {
+      --button-bg-color-default: var(--axa-blue-80);
+      --button-text-color-default: var(--white);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-bg-color-default: var(--axa-blue-120);
+      --button-text-color-default: var(--white);
+    }
+  }
+}

package/dist/Button/ButtonCommon.css

@@ -0,0 +1 @@
+.af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary,.af-btn-client--secondary-inverse{box-shadow:0 0 0 2px var(--button-shadow-color) inset}

package/dist/Button/ButtonCommon.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/ButtonCommon.scss%23sass","../../src/Button/ButtonCommon.scss"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CCbF,QAAA,CDIE,kCAAA,CAQA,sCAAA,CCdF,YAAA,CDUE,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCHF,CDKE,kDAEE,6CAAA,CACA,kBCJJ,CDOE,2DAEE,mBCNJ,CDQI,mFACE,YCNN,CDUE,mBACE,cAAA,CACA,iBCRJ,CDWE,sBACE,sCCTJ,CDWI,4FAGE,yBCXN,CDmBE,4DACE,qDCdJ","file":"ButtonCommon.css","sourcesContent":["/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n  display: flex;\n  padding: var(--button-padding);\n  border: 0;\n  border-radius: var(--button-radius);\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  font-family: var(--font-family-base);\n  font-size: var(--button-font-size);\n  font-weight: 600;\n  line-height: var(--button-line-height);\n  color: var(--button-text-color-default);\n  background-color: var(--button-bg-color-default);\n  transition-duration: var(--transition-duration);\n  transition-property: width, height, border, color, background-color, outline,\n    box-shadow;\n  transition-timing-function: linear;\n  user-select: none;\n\n  &:focus-visible,\n  &:focus {\n    outline: 2px solid var(--button-outline-color);\n    outline-offset: 3px;\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    pointer-events: none;\n\n    & > [aria-live] {\n      margin: unset;\n    }\n  }\n\n  & > svg {\n    aspect-ratio: 1;\n    fill: currentcolor;\n  }\n\n  &--ghost {\n    gap: calc(4 / var(--font-size-base) * 1rem);\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      text-decoration: underline;\n    }\n  }\n\n  &--secondary {\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n  }\n\n  &--secondary-inverse {\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n  }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n  display: flex;\n  padding: var(--button-padding);\n  border: 0;\n  border-radius: var(--button-radius);\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  font-family: var(--font-family-base);\n  font-size: var(--button-font-size);\n  font-weight: 600;\n  line-height: var(--button-line-height);\n  color: var(--button-text-color-default);\n  background-color: var(--button-bg-color-default);\n  transition-duration: var(--transition-duration);\n  transition-property: width, height, border, color, background-color, outline,\n    box-shadow;\n  transition-timing-function: linear;\n  user-select: none;\n\n  &:focus-visible,\n  &:focus {\n    outline: 2px solid var(--button-outline-color);\n    outline-offset: 3px;\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    pointer-events: none;\n\n    & > [aria-live] {\n      margin: unset;\n    }\n  }\n\n  & > svg {\n    aspect-ratio: 1;\n    fill: currentcolor;\n  }\n\n  &--ghost {\n    gap: calc(4 / var(--font-size-base) * 1rem);\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      text-decoration: underline;\n    }\n  }\n\n  &--secondary {\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n  }\n\n  &--secondary-inverse {\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n  }\n}\n"]}

package/dist/Button/ButtonCommon.scss

@@ -0,0 +1,62 @@
+/* Apollo first and mobile first approch */
+
+@use "../common/breakpoints" as breakpoints;
+
+.af-btn-client {
+  display: flex;
+  padding: var(--button-padding);
+  border: 0;
+  border-radius: var(--button-radius);
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  font-family: var(--font-family-base);
+  font-size: var(--button-font-size);
+  font-weight: 600;
+  line-height: var(--button-line-height);
+  color: var(--button-text-color-default);
+  background-color: var(--button-bg-color-default);
+  transition-duration: var(--transition-duration);
+  transition-property: width, height, border, color, background-color, outline,
+    box-shadow;
+  transition-timing-function: linear;
+  user-select: none;
+
+  &:focus-visible,
+  &:focus {
+    outline: 2px solid var(--button-outline-color);
+    outline-offset: 3px;
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    pointer-events: none;
+
+    & > [aria-live] {
+      margin: unset;
+    }
+  }
+
+  & > svg {
+    aspect-ratio: 1;
+    fill: currentcolor;
+  }
+
+  &--ghost {
+    gap: calc(4 / var(--font-size-base) * 1rem);
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      text-decoration: underline;
+    }
+  }
+
+  &--secondary {
+    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;
+  }
+
+  &--secondary-inverse {
+    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;
+  }
+}

package/dist/Button/ButtonLF.css

@@ -0,0 +1 @@
+.af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-radius:var(--radius-8);--button-shadow-color:var(--color-axa);--button-padding:calc(16/var(--font-size-base)*1rem) calc(61.5/var(--font-size-base)*1rem);--button-line-height:calc(20/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-line-height:calc(22.5/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--color-blue-1)}.af-btn-client:active,.af-btn-client:focus,.af-btn-client:focus-visible{--button-bg-color-default:var(--color-btn-light)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--color-blue-3)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--color-gray-300);--button-text-color-default:var(--color-gray-500);--button-shadow-color:var(--color-gray-500)}.af-btn-client--primary-business{--button-bg-color-default:var(--color-btn-business)}.af-btn-client--primary-business:active,.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible{--button-bg-color-default:var(--color-btn-business-light)}.af-btn-client--primary-business:hover{--button-bg-color-default:var(--color-btn-business-dark)}.af-btn-client--primary-inverse{--button-text-color-default:var(--color-axa);--button-bg-color-default:var(--color-white)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-btn-business-light)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1)}.af-btn-client--ghost{--button-text-color-default:var(--color-axa);--button-bg-color-default:#0000;--button-padding:0}@media (width > 1279px){.af-btn-client--ghost{--button-font-size:calc(16/var(--font-size-base)*1rem)}}.af-btn-client--ghost:active{--button-text-color-default:var(--color-btn-light)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--color-blue-1);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-axa);--button-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--button-shadow-color) inset}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1);box-shadow:0 0 0 2px var(--color-blue-1) inset}.af-btn-client--secondary:active{--button-bg-color-default:var(--color-blue-2)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-shadow-color:var(--color-white);box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--color-gray-200);--button-text-color-default:var(--color-btn-light);--button-shadow-color:var(--color-gray-200)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--color-gray-400);--button-text-color-default:var(--color-blue-1);--button-shadow-color:var(--color-gray-400)}.af-btn-client--tertiary{--button-bg-color-default:var(--color-btn-tertiary-bg);--button-text-color-default:var(--color-axa)}.af-btn-client--tertiary:hover{--button-bg-color-default:var(--color-btn-tertiary-bg-darker)}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible{--button-bg-color-default:var(--color-btn-tertiary-bg-lighter);--button-text-color-default:var(--color-axa)}

package/dist/Button/ButtonLF.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Button/ButtonCommon.scss","../../src/Button/ButtonLF.scss","../../src/Button/ButtonLF.scss%23sass"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CCbF,QAAA,CDIE,kCAAA,CAQA,sCAAA,CCdF,YAAA,CDUE,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCHF,CDKE,kDAEE,6CAAA,CACA,kBCJJ,CDOE,2DAEE,mBCNJ,CDQI,mFACE,YCNN,CDUE,mBACE,cAAA,CACA,iBCRJ,CDWE,sBACE,sCCTJ,CDWI,4FAGE,yBCXN,CDeE,0BACE,qDCbJ,CCtCA,eACE,0CAAA,CACA,8CAAA,CACA,+BAAA,CACA,sCAAA,CACA,0FAAA,CAEA,wDAAA,CACA,sDD4CF,CC1CE,wBAVF,eAWI,0DAAA,CACA,sDD6CF,CACF,CC3CE,qBACE,6CD6CJ,CC1CE,wEAGE,gDD0CJ,CCvCE,kDAEE,0CDwCJ,CCrCE,2DAEE,+CAAA,CACA,iDAAA,CACA,2CDsCJ,CCnCE,iCACE,mDDqCJ,CCnCI,8HAGE,yDDmCN,CChCI,uCACE,wDDkCN,CC9BE,gCACE,4CAAA,CACA,4CDgCJ,CC9BI,uCACE,4CAAA,CACA,2DDgCN,CC7BI,0HAGE,4CAAA,CACA,+CD6BN,CCzBE,sBACE,4CAAA,CACA,+BAAA,CACA,kBD2BJ,CCzBI,wBALF,sBAMI,sDD4BJ,CACF,CC1BI,6BACE,kDD4BN,CCzBI,4FAGE,+CAAA,CACA,+BDyBN,CCtBI,yEAEE,+BDuBN,CCnBE,0BACE,4CAAA,CACA,4CAAA,CACA,sCAAA,CAEA,qDDoBJ,CClBI,yIAIE,4CAAA,CACA,+CAAA,CAEA,8CDgBN,CCbI,iCACE,6CDeN,CCXE,kCACE,0CAAA,CACA,8CAAA,CACA,wCAAA,CAEA,qDDYJ,CCVI,yCACE,+CAAA,CACA,kDAAA,CACA,2CDYN,CCTI,gIAGE,+CAAA,CACA,+CAAA,CACA,2CDSN,CCLE,yBACE,sDAAA,CACA,4CDOJ,CCLI,+BACE,6DDON,CCJI,sGAGE,8DAAA,CDIN,4CACA","file":"ButtonLF.css","sourcesContent":["/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n  display: flex;\n  padding: var(--button-padding);\n  border: 0;\n  border-radius: var(--button-radius);\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  font-family: var(--font-family-base);\n  font-size: var(--button-font-size);\n  font-weight: 600;\n  line-height: var(--button-line-height);\n  color: var(--button-text-color-default);\n  background-color: var(--button-bg-color-default);\n  transition-duration: var(--transition-duration);\n  transition-property: width, height, border, color, background-color, outline,\n    box-shadow;\n  transition-timing-function: linear;\n  user-select: none;\n\n  &:focus-visible,\n  &:focus {\n    outline: 2px solid var(--button-outline-color);\n    outline-offset: 3px;\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    pointer-events: none;\n\n    & > [aria-live] {\n      margin: unset;\n    }\n  }\n\n  & > svg {\n    aspect-ratio: 1;\n    fill: currentcolor;\n  }\n\n  &--ghost {\n    gap: calc(4 / var(--font-size-base) * 1rem);\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      text-decoration: underline;\n    }\n  }\n\n  &--secondary {\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n  }\n\n  &--secondary-inverse {\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n  }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n  --button-bg-color-default: var(--color-axa);\n  --button-text-color-default: var(--color-white);\n  --button-radius: var(--radius-8);\n  --button-shadow-color: var(--color-axa);\n  --button-padding: calc(16 / var(--font-size-base) * 1rem)\n    calc(61.5 / var(--font-size-base) * 1rem);\n  --button-line-height: calc(20 / var(--font-size-base) * 1rem);\n  --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n  @media (width > #{breakpoints.$breakpoint-lg}) {\n    --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);\n    --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n\n  &:hover {\n    --button-bg-color-default: var(--color-blue-1);\n  }\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    --button-bg-color-default: var(--color-btn-light);\n  }\n\n  &:focus,\n  &:focus-visible {\n    --button-outline-color: var(--color-blue-3);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    --button-bg-color-default: var(--color-gray-300);\n    --button-text-color-default: var(--color-gray-500);\n    --button-shadow-color: var(--color-gray-500);\n  }\n\n  &--primary-business {\n    --button-bg-color-default: var(--color-btn-business);\n\n    &:active,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--color-btn-business-light);\n    }\n\n    &:hover {\n      --button-bg-color-default: var(--color-btn-business-dark);\n    }\n  }\n\n  &--primary-inverse {\n    --button-text-color-default: var(--color-axa);\n    --button-bg-color-default: var(--color-white);\n\n    &:active {\n      --button-bg-color-default: var(--color-white);\n      --button-text-color-default: var(--color-btn-business-light);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--color-white);\n      --button-text-color-default: var(--color-blue-1);\n    }\n  }\n\n  &--ghost {\n    --button-text-color-default: var(--color-axa);\n    --button-bg-color-default: transparent;\n    --button-padding: 0;\n\n    @media (width > #{breakpoints.$breakpoint-lg}) {\n      --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n\n    &:active {\n      --button-text-color-default: var(--color-btn-light);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-text-color-default: var(--color-blue-1);\n      --button-bg-color-default: transparent;\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      --button-bg-color-default: transparent;\n    }\n  }\n\n  &--secondary {\n    --button-bg-color-default: var(--color-white);\n    --button-text-color-default: var(--color-axa);\n    --button-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--button-shadow-color) inset;\n\n    &:hover,\n    &:focus,\n    &:focus-visible,\n    &:active {\n      --button-bg-color-default: var(--color-white);\n      --button-text-color-default: var(--color-blue-1);\n\n      box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n    }\n\n    &:active {\n      --button-bg-color-default: var(--color-blue-2);\n    }\n  }\n\n  &--secondary-inverse {\n    --button-bg-color-default: var(--color-axa);\n    --button-text-color-default: var(--color-white);\n    --button-shadow-color: var(--color-white);\n\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n\n    &:active {\n      --button-bg-color-default: var(--color-gray-200);\n      --button-text-color-default: var(--color-btn-light);\n      --button-shadow-color: var(--color-gray-200);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--color-gray-400);\n      --button-text-color-default: var(--color-blue-1);\n      --button-shadow-color: var(--color-gray-400);\n    }\n  }\n\n  &--tertiary {\n    --button-bg-color-default: var(--color-btn-tertiary-bg);\n    --button-text-color-default: var(--color-axa);\n\n    &:hover {\n      --button-bg-color-default: var(--color-btn-tertiary-bg-darker);\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n      --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n      --button-text-color-default: var(--color-axa);\n    }\n  }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n  --button-bg-color-default: var(--color-axa);\n  --button-text-color-default: var(--color-white);\n  --button-radius: var(--radius-8);\n  --button-shadow-color: var(--color-axa);\n  --button-padding: calc(16 / var(--font-size-base) * 1rem)\n    calc(61.5 / var(--font-size-base) * 1rem);\n  --button-line-height: calc(20 / var(--font-size-base) * 1rem);\n  --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n  @media (width > #{breakpoints.$breakpoint-lg}) {\n    --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);\n    --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n\n  &:hover {\n    --button-bg-color-default: var(--color-blue-1);\n  }\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    --button-bg-color-default: var(--color-btn-light);\n  }\n\n  &:focus,\n  &:focus-visible {\n    --button-outline-color: var(--color-blue-3);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    --button-bg-color-default: var(--color-gray-300);\n    --button-text-color-default: var(--color-gray-500);\n    --button-shadow-color: var(--color-gray-500);\n  }\n\n  &--primary-business {\n    --button-bg-color-default: var(--color-btn-business);\n\n    &:active,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--color-btn-business-light);\n    }\n\n    &:hover {\n      --button-bg-color-default: var(--color-btn-business-dark);\n    }\n  }\n\n  &--primary-inverse {\n    --button-text-color-default: var(--color-axa);\n    --button-bg-color-default: var(--color-white);\n\n    &:active {\n      --button-bg-color-default: var(--color-white);\n      --button-text-color-default: var(--color-btn-business-light);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--color-white);\n      --button-text-color-default: var(--color-blue-1);\n    }\n  }\n\n  &--ghost {\n    --button-text-color-default: var(--color-axa);\n    --button-bg-color-default: transparent;\n    --button-padding: 0;\n\n    @media (width > #{breakpoints.$breakpoint-lg}) {\n      --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n\n    &:active {\n      --button-text-color-default: var(--color-btn-light);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-text-color-default: var(--color-blue-1);\n      --button-bg-color-default: transparent;\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      --button-bg-color-default: transparent;\n    }\n  }\n\n  &--secondary {\n    --button-bg-color-default: var(--color-white);\n    --button-text-color-default: var(--color-axa);\n    --button-shadow-color: var(--color-axa);\n\n    box-shadow: 0 0 0 1px var(--button-shadow-color) inset;\n\n    &:hover,\n    &:focus,\n    &:focus-visible,\n    &:active {\n      --button-bg-color-default: var(--color-white);\n      --button-text-color-default: var(--color-blue-1);\n\n      box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n    }\n\n    &:active {\n      --button-bg-color-default: var(--color-blue-2);\n    }\n  }\n\n  &--secondary-inverse {\n    --button-bg-color-default: var(--color-axa);\n    --button-text-color-default: var(--color-white);\n    --button-shadow-color: var(--color-white);\n\n    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n\n    &:active {\n      --button-bg-color-default: var(--color-gray-200);\n      --button-text-color-default: var(--color-btn-light);\n      --button-shadow-color: var(--color-gray-200);\n    }\n\n    &:hover,\n    &:focus,\n    &:focus-visible {\n      --button-bg-color-default: var(--color-gray-400);\n      --button-text-color-default: var(--color-blue-1);\n      --button-shadow-color: var(--color-gray-400);\n    }\n  }\n\n  &--tertiary {\n    --button-bg-color-default: var(--color-btn-tertiary-bg);\n    --button-text-color-default: var(--color-axa);\n\n    &:hover {\n      --button-bg-color-default: var(--color-btn-tertiary-bg-darker);\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n      --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n      --button-text-color-default: var(--color-axa);\n    }\n  }\n}\n"]}

package/dist/Button/ButtonLF.scss

@@ -0,0 +1,158 @@
+@use "../common/breakpoints" as breakpoints;
+
+@use "./ButtonCommon";
+
+.af-btn-client {
+  --button-bg-color-default: var(--color-axa);
+  --button-text-color-default: var(--color-white);
+  --button-radius: var(--radius-8);
+  --button-shadow-color: var(--color-axa);
+  --button-padding: calc(16 / var(--font-size-base) * 1rem)
+    calc(61.5 / var(--font-size-base) * 1rem);
+  --button-line-height: calc(20 / var(--font-size-base) * 1rem);
+  --button-font-size: calc(16 / var(--font-size-base) * 1rem);
+
+  @media (width > #{breakpoints.$breakpoint-lg}) {
+    --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);
+    --button-font-size: calc(18 / var(--font-size-base) * 1rem);
+  }
+
+  &:hover {
+    --button-bg-color-default: var(--color-blue-1);
+  }
+
+  &:active,
+  &:focus,
+  &:focus-visible {
+    --button-bg-color-default: var(--color-btn-light);
+  }
+
+  &:focus,
+  &:focus-visible {
+    --button-outline-color: var(--color-blue-3);
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    --button-bg-color-default: var(--color-gray-300);
+    --button-text-color-default: var(--color-gray-500);
+    --button-shadow-color: var(--color-gray-500);
+  }
+
+  &--primary-business {
+    --button-bg-color-default: var(--color-btn-business);
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      --button-bg-color-default: var(--color-btn-business-light);
+    }
+
+    &:hover {
+      --button-bg-color-default: var(--color-btn-business-dark);
+    }
+  }
+
+  &--primary-inverse {
+    --button-text-color-default: var(--color-axa);
+    --button-bg-color-default: var(--color-white);
+
+    &:active {
+      --button-bg-color-default: var(--color-white);
+      --button-text-color-default: var(--color-btn-business-light);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-bg-color-default: var(--color-white);
+      --button-text-color-default: var(--color-blue-1);
+    }
+  }
+
+  &--ghost {
+    --button-text-color-default: var(--color-axa);
+    --button-bg-color-default: transparent;
+    --button-padding: 0;
+
+    @media (width > #{breakpoints.$breakpoint-lg}) {
+      --button-font-size: calc(16 / var(--font-size-base) * 1rem);
+    }
+
+    &:active {
+      --button-text-color-default: var(--color-btn-light);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-text-color-default: var(--color-blue-1);
+      --button-bg-color-default: transparent;
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      --button-bg-color-default: transparent;
+    }
+  }
+
+  &--secondary {
+    --button-bg-color-default: var(--color-white);
+    --button-text-color-default: var(--color-axa);
+    --button-shadow-color: var(--color-axa);
+
+    box-shadow: 0 0 0 1px var(--button-shadow-color) inset;
+
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:active {
+      --button-bg-color-default: var(--color-white);
+      --button-text-color-default: var(--color-blue-1);
+
+      box-shadow: 0 0 0 2px var(--color-blue-1) inset;
+    }
+
+    &:active {
+      --button-bg-color-default: var(--color-blue-2);
+    }
+  }
+
+  &--secondary-inverse {
+    --button-bg-color-default: var(--color-axa);
+    --button-text-color-default: var(--color-white);
+    --button-shadow-color: var(--color-white);
+
+    box-shadow: 0 0 0 2px var(--button-shadow-color) inset;
+
+    &:active {
+      --button-bg-color-default: var(--color-gray-200);
+      --button-text-color-default: var(--color-btn-light);
+      --button-shadow-color: var(--color-gray-200);
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible {
+      --button-bg-color-default: var(--color-gray-400);
+      --button-text-color-default: var(--color-blue-1);
+      --button-shadow-color: var(--color-gray-400);
+    }
+  }
+
+  &--tertiary {
+    --button-bg-color-default: var(--color-btn-tertiary-bg);
+    --button-text-color-default: var(--color-axa);
+
+    &:hover {
+      --button-bg-color-default: var(--color-btn-tertiary-bg-darker);
+    }
+
+    &:focus,
+    &:focus-visible,
+    &:active {
+      --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);
+      --button-text-color-default: var(--color-axa);
+    }
+  }
+}

package/dist/Form/ItemMessage/ItemMessageApollo.css

@@ -0,0 +1 @@
+.af-item-message{--item-message-font-size:calc(14/var(--font-size-base)*1rem);align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-item-message__icon{color:var(--item-message-color);width:var(--item-message-icon-size);fill:currentcolor}.af-item-message__message{color:var(--item-message-color);font-family:var(--font-family-base);font-size:var(--item-message-font-size);line-height:1.25em}@media (width > 1023px){.af-item-message{--item-message-font-size:calc(16/var(--font-size-base)*1rem)}}.af-item-message{--item-message-color:var(--red-alert-100);--item-message-icon-size:calc(20/var(--font-size-base)*1rem)}.af-item-message--success{--item-message-color:var(--green-100)}@media (width > 1023px){.af-item-message{--item-message-icon-size:calc(24/var(--font-size-base)*1rem)}}

package/dist/Form/ItemMessage/ItemMessageApollo.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Form/ItemMessage/ItemMessageCommon.scss","../../../src/Form/ItemMessage/ItemMessageApollo.scss","../../../src/Form/ItemMessage/ItemMessageApollo.scss%23sass"],"names":[],"mappings":"AAEA,iBACE,4DAAA,CAGA,kBAAA,CCJF,YAAA,CAEA,sCACA,CDIE,uBAEE,+BAAA,CADA,mCAAA,CAEA,iBCFJ,CDKE,0BCAF,+BAAA,CDCI,mCAAA,CACA,uCAAA,CACA,kBCFJ,CDME,wBApBF,iBAqBI,4DCHF,CACF,CCjBA,iBACE,yCAAA,CACA,4DDoBF,CClBE,0BACE,qCDoBJ,CCjBE,wBARF,iBASI,4DDoBF,CACF","file":"ItemMessageApollo.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-message {\n  --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n  display: flex;\n  align-items: center;\n  gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &__icon {\n    width: var(--item-message-icon-size);\n    color: var(--item-message-color);\n    fill: currentcolor;\n  }\n\n  &__message {\n    font-family: var(--font-family-base);\n    font-size: var(--item-message-font-size);\n    line-height: 1.25em;\n    color: var(--item-message-color);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemMessageCommon\";\n\n.af-item-message {\n  --item-message-color: var(--red-alert-100);\n  --item-message-icon-size: calc(20 / var(--font-size-base) * 1rem);\n\n  &--success {\n    --item-message-color: var(--green-100);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --item-message-icon-size: calc(24 / var(--font-size-base) * 1rem);\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemMessageCommon\";\n\n.af-item-message {\n  --item-message-color: var(--red-alert-100);\n  --item-message-icon-size: calc(20 / var(--font-size-base) * 1rem);\n\n  &--success {\n    --item-message-color: var(--green-100);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --item-message-icon-size: calc(24 / var(--font-size-base) * 1rem);\n  }\n}\n"]}

package/dist/Form/ItemMessage/ItemMessageApollo.scss

@@ -0,0 +1,16 @@
+@use "../../common/breakpoints" as breakpoints;
+
+@use "./ItemMessageCommon";
+
+.af-item-message {
+  --item-message-color: var(--red-alert-100);
+  --item-message-icon-size: calc(20 / var(--font-size-base) * 1rem);
+
+  &--success {
+    --item-message-color: var(--green-100);
+  }
+
+  @media (width > #{breakpoints.$breakpoint-md}) {
+    --item-message-icon-size: calc(24 / var(--font-size-base) * 1rem);
+  }
+}

package/dist/Form/ItemMessage/ItemMessageCommon.css

@@ -0,0 +1 @@
+.af-item-message{--item-message-font-size:calc(14/var(--font-size-base)*1rem);align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-item-message__icon{color:var(--item-message-color);width:var(--item-message-icon-size);fill:currentcolor}.af-item-message__message{color:var(--item-message-color);font-family:var(--font-family-base);font-size:var(--item-message-font-size);line-height:1.25em}@media (width > 1023px){.af-item-message{--item-message-font-size:calc(16/var(--font-size-base)*1rem)}}

package/dist/Form/ItemMessage/ItemMessageCommon.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Form/ItemMessage/ItemMessageCommon.scss%23sass","../../../src/Form/ItemMessage/ItemMessageCommon.scss"],"names":[],"mappings":"AAEA,iBACE,4DAAA,CAGA,kBAAA,CCJF,YAAA,CDKE,sCCFF,CDIE,uBAEE,+BAAA,CADA,mCAAA,CAEA,iBCFJ,CDKE,0BAIE,+BAAA,CAHA,mCAAA,CACA,uCAAA,CACA,kBCFJ,CDME,wBApBF,iBAqBI,4DCHF,CACF","file":"ItemMessageCommon.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-message {\n  --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n  display: flex;\n  align-items: center;\n  gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &__icon {\n    width: var(--item-message-icon-size);\n    color: var(--item-message-color);\n    fill: currentcolor;\n  }\n\n  &__message {\n    font-family: var(--font-family-base);\n    font-size: var(--item-message-font-size);\n    line-height: 1.25em;\n    color: var(--item-message-color);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-message {\n  --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n  display: flex;\n  align-items: center;\n  gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &__icon {\n    width: var(--item-message-icon-size);\n    color: var(--item-message-color);\n    fill: currentcolor;\n  }\n\n  &__message {\n    font-family: var(--font-family-base);\n    font-size: var(--item-message-font-size);\n    line-height: 1.25em;\n    color: var(--item-message-color);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);\n  }\n}\n"]}

package/dist/Form/ItemMessage/ItemMessageCommon.scss

@@ -0,0 +1,26 @@
+@use "../../common/breakpoints" as breakpoints;
+
+.af-item-message {
+  --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);
+
+  display: flex;
+  align-items: center;
+  gap: calc(8 / var(--font-size-base) * 1rem);
+
+  &__icon {
+    width: var(--item-message-icon-size);
+    color: var(--item-message-color);
+    fill: currentcolor;
+  }
+
+  &__message {
+    font-family: var(--font-family-base);
+    font-size: var(--item-message-font-size);
+    line-height: 1.25em;
+    color: var(--item-message-color);
+  }
+
+  @media (width > #{breakpoints.$breakpoint-md}) {
+    --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);
+  }
+}

package/dist/Form/ItemMessage/ItemMessageLF.css

@@ -0,0 +1 @@
+.af-item-message{--item-message-font-size:calc(14/var(--font-size-base)*1rem);align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-item-message__icon{color:var(--item-message-color);width:var(--item-message-icon-size);fill:currentcolor}.af-item-message__message{color:var(--item-message-color);font-family:var(--font-family-base);font-size:var(--item-message-font-size);line-height:1.25em}@media (width > 1023px){.af-item-message{--item-message-font-size:calc(16/var(--font-size-base)*1rem)}}.af-item-message{--item-message-color:var(--color-red-700);--item-message-icon-size:calc(16/var(--font-size-base)*1rem)}.af-item-message--success{--item-message-color:var(--color-green-600)}

package/dist/Form/ItemMessage/ItemMessageLF.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Form/ItemMessage/ItemMessageCommon.scss","../../../src/Form/ItemMessage/ItemMessageLF.scss","../../../src/Form/ItemMessage/ItemMessageLF.scss%23sass"],"names":[],"mappings":"AAEA,iBACE,4DAAA,CAGA,kBAAA,CCJF,YAAA,CAEA,sCACA,CDIE,uBAEE,+BAAA,CADA,mCAAA,CAEA,iBCFJ,CDKE,0BAIE,+BAAA,CAHA,mCAAA,CACA,uCAAA,CACA,kBCFJ,CDME,wBApBF,iBAqBI,4DCHF,CACF,CCjBA,iBACE,yCAAA,CACA,4DDoBF,CClBE,0BACE,2CDoBJ","file":"ItemMessageLF.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-item-message {\n  --item-message-font-size: calc(14 / var(--font-size-base) * 1rem);\n\n  display: flex;\n  align-items: center;\n  gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &__icon {\n    width: var(--item-message-icon-size);\n    color: var(--item-message-color);\n    fill: currentcolor;\n  }\n\n  &__message {\n    font-family: var(--font-family-base);\n    font-size: var(--item-message-font-size);\n    line-height: 1.25em;\n    color: var(--item-message-color);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --item-message-font-size: calc(16 / var(--font-size-base) * 1rem);\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemMessageCommon\";\n\n.af-item-message {\n  --item-message-color: var(--color-red-700);\n  --item-message-icon-size: calc(16 / var(--font-size-base) * 1rem);\n\n  &--success {\n    --item-message-color: var(--color-green-600);\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemMessageCommon\";\n\n.af-item-message {\n  --item-message-color: var(--color-red-700);\n  --item-message-icon-size: calc(16 / var(--font-size-base) * 1rem);\n\n  &--success {\n    --item-message-color: var(--color-green-600);\n  }\n}\n"]}

package/dist/Form/ItemMessage/ItemMessageLF.scss

@@ -0,0 +1,12 @@
+@use "../../common/breakpoints" as breakpoints;
+
+@use "./ItemMessageCommon";
+
+.af-item-message {
+  --item-message-color: var(--color-red-700);
+  --item-message-icon-size: calc(16 / var(--font-size-base) * 1rem);
+
+  &--success {
+    --item-message-color: var(--color-green-600);
+  }
+}

package/dist/Grid/DebugGrid.css

@@ -0,0 +1 @@
+.af-checkbox-select--debuggrid label:has(>[name=debuggrid]){background-color:var(--white);bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}

package/dist/Grid/DebugGrid.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Grid/DebugGrid.scss%23sass","../../src/Grid/DebugGrid.scss"],"names":[],"mappings":"AAEA,4DAME,6BAAA,CAHA,QAAA,CAEA,WAAA,CADA,MAAA,CAHA,cAAA,CCDF,SAKA,CDIA,YAGE,YAAA,CAEA,WAAA,CAEA,uBAAA,CADA,UAAA,CALA,cAAA,CCDF,KAAA,CDIE,UCEF,CDGE,kBACE,0BAAA,CACA,uBAAA,CAGA,WAAA,CADA,iBCDJ,CDII,yBAUE,qDAAA,CAGA,mBAAA,CAPA,+BAAA,CADA,WAAA,CAFA,SAAA,CAFA,iBAAA,CAMA,iBAAA,CACA,sBAAA,CANA,OAAA,CASA,0BAAA,CACA,+BAAA,CARA,UAAA,CAKA,wBCEN,CDKI,wBAIE,qCAAA,CAHA,YAAA,CAEA,kBAAA,CADA,WAAA,CAGA,0CCHN,CDKM,wCACE,aCHR,CDOI,uBAnCF,kBAoCI,gCAAA,CACA,uBCJJ,CDMI,wCACE,aCJN,CACF,CDOI,wBA5CF,kBA6CI,gCAAA,CACA,uBCJJ,CDMI,yCACE,aCJN,CACF,CDOI,wBArDF,kBAsDI,sCAAA,CACA,uBCJJ,CACF,CDMI,wBA1DF,kBA2DI,wCAAA,CACA,uBCHJ,CACF,CDSI,+CACE,aCNN","file":"DebugGrid.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-checkbox-select--debuggrid label:has(> [name=\"debuggrid\"]) {\n  position: fixed;\n  z-index: 2;\n  bottom: 0;\n  left: 0;\n  height: auto;\n  background-color: var(--white);\n}\n\n.debug-grid {\n  position: fixed;\n  top: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n  mix-blend-mode: multiply;\n\n  .grid {\n    --name: \"small: 0 to 667px\";\n    --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n    position: relative;\n    height: 100%;\n\n    &::before {\n      position: absolute;\n      top: 50%;\n      left: 0.5vw;\n      width: 100%;\n      height: 100%;\n      font-size: clamp(0.5rem, 4vw, 3rem);\n      text-align: center;\n      text-orientation: mixed;\n      writing-mode: vertical-rl;\n      color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n      transform: translate(0, -50%);\n      transition: color 300ms linear 200ms;\n      content: var(--name);\n    }\n\n    .cols {\n      display: none;\n      height: 100%;\n      grid-column: span 1;\n      background-color: var(--color-bg-cols);\n      transition: background-color 300ms linear 200ms;\n\n      &:nth-child(-n + 4) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --name: \"medium: 668px to 1023px\";\n      --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n      .cols:nth-child(-n + 8) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      --name: \"large: 1024px to 1279px\";\n      --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n      .cols:nth-child(-n + 12) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-lg}) {\n      --name: \"extra large: 1280px to 1599px\";\n      --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n    }\n\n    @media (width > #{breakpoints.$breakpoint-xl}) {\n      --name: \"extra large: 1600px to infinity\";\n      --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n    }\n  }\n}\n\nbody {\n  &:has([name=\"debuggrid\"]:checked) {\n    .debug-grid {\n      display: block;\n    }\n  }\n}\n","@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-checkbox-select--debuggrid label:has(> [name=\"debuggrid\"]) {\n  position: fixed;\n  z-index: 2;\n  bottom: 0;\n  left: 0;\n  height: auto;\n  background-color: var(--white);\n}\n\n.debug-grid {\n  position: fixed;\n  top: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n  mix-blend-mode: multiply;\n\n  .grid {\n    --name: \"small: 0 to 667px\";\n    --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n    position: relative;\n    height: 100%;\n\n    &::before {\n      position: absolute;\n      top: 50%;\n      left: 0.5vw;\n      width: 100%;\n      height: 100%;\n      font-size: clamp(0.5rem, 4vw, 3rem);\n      text-align: center;\n      text-orientation: mixed;\n      writing-mode: vertical-rl;\n      color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n      transform: translate(0, -50%);\n      transition: color 300ms linear 200ms;\n      content: var(--name);\n    }\n\n    .cols {\n      display: none;\n      height: 100%;\n      grid-column: span 1;\n      background-color: var(--color-bg-cols);\n      transition: background-color 300ms linear 200ms;\n\n      &:nth-child(-n + 4) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --name: \"medium: 668px to 1023px\";\n      --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n      .cols:nth-child(-n + 8) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      --name: \"large: 1024px to 1279px\";\n      --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n      .cols:nth-child(-n + 12) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-lg}) {\n      --name: \"extra large: 1280px to 1599px\";\n      --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n    }\n\n    @media (width > #{breakpoints.$breakpoint-xl}) {\n      --name: \"extra large: 1600px to infinity\";\n      --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n    }\n  }\n}\n\nbody {\n  &:has([name=\"debuggrid\"]:checked) {\n    .debug-grid {\n      display: block;\n    }\n  }\n}\n"]}