@axa-fr/design-system-apollo-css 1.0.3-alpha.205 → 1.0.3-alpha.207

package/dist/Link/LinkApollo.css

@@ -0,0 +1 @@
+.af-link{align-items:center;color:var(--link-text-color-default);display:inline-flex;font-size:calc(var(--link-font-size)/var(--font-size-base)*1rem);font-weight:var(--link-font-weight);gap:.25rem;height:fit-content;text-decoration:underline;text-underline-offset:var(--underline-offset);width:fit-content;fill:var(--link-text-color-default)}.af-link svg{aspect-ratio:1;height:1.25rem;width:1.25rem;fill:currentcolor}.af-link--openInNewTab{font-weight:600}.af-link--default{line-height:var(--link-line-height);text-decoration:none}.af-link--default:hover{color:var(--link-text-color-1);text-decoration:underline}.af-link--default:active,.af-link--default:focus{color:var(--link-color-outline);text-decoration:underline}.af-link--underline{line-height:var(--link-line-height)}.af-link--underline:hover{color:var(--link-text-color-1)}.af-link--underline:active,.af-link--underline:focus{color:var(--link-color-outline)}.af-link--inverse{color:var(--link-text-color-inverse);line-height:var(--link-line-height);text-decoration:none}.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{line-height:var(--link-line-height);text-decoration:underline}.af-link:active,.af-link:focus,.af-link:hover{fill:var(--link-text-color-1)}.af-link:focus-visible{outline:2px solid var(--link-color-outline);outline-offset:3px}.af-link{--link-font-weight:600;--link-text-color-default:var(--axa-blue-100);--underline-offset:25%;--link-font-size:14}@media (width > 1023px){.af-link{--link-font-size:16}}.af-link--default{--link-line-height:125%}@media (width > 1023px){.af-link--default{--link-line-height:calc(var(24)/var(--font-size-base)*1rem)}}.af-link--default:hover{--link-text-color-1:var(--axa-blue-120)}.af-link--default:active,.af-link--default:focus{--link-color-outline:var(--axa-blue-80)}.af-link--underline{--link-line-height:calc(var(20)/var(--font-size-base)*1rem)}@media (width > 1023px){.af-link--underline{--link-line-height:calc(var(24)/var(--font-size-base)*1rem)}}.af-link--underline:hover{--link-text-color-1:var(--axa-blue-120)}.af-link--underline:active,.af-link--underline:focus{--link-color-outline:var(--axa-blue-80)}.af-link--inverse{--link-text-color-inverse:var(--white);--link-line-height:125%}.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{--link-line-height:calc(var(20)/var(--font-size-base)*1rem)}@media (width > 1023px){.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{--link-line-height:calc(var(24)/var(--font-size-base)*1rem)}}

package/dist/Link/LinkApollo.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Link/LinkCommon.scss","../../src/Link/LinkApollo.scss","../../src/Link/LinkApollo.scss%23sass"],"names":[],"mappings":"AAEA,SCEA,kBAAA,CDQE,oCAAA,CATA,mBAAA,CAKA,gEAAA,CACA,mCAAA,CAFA,UAAA,CAFA,kBAAA,CAKA,yBAAA,CACA,6CAAA,CCTF,iBDEE,CASA,mCCDF,CDGE,aAGE,cAAA,CADA,cAAA,CADA,aAAA,CAGA,iBCDJ,CDIE,uBACE,eCFJ,CDKE,kBACE,mCAAA,CACA,oBCHJ,CDKI,wBAEE,8BAAA,CADA,yBCFN,CDMI,iDAGE,+BAAA,CADA,yBCJN,CDSE,oBACE,mCCPJ,CDSI,0BACE,8BCPN,CDUI,qDAEE,+BCTN,CDaE,kBAGE,oCAAA,CAFA,mCAAA,CACA,oBCVJ,CDaI,yEAGE,mCAAA,CACA,yBCbN,CDiBE,8CAGE,6BCjBJ,CDoBE,uBACE,2CAAA,CACA,kBClBJ,CCtDA,SACE,sBAAA,CACA,6CAAA,CACA,sBAAA,CACA,mBDyDF,CCxDE,wBALF,SAMI,mBD2DF,CACF,CCzDE,kBACE,uBD2DJ,CC1DI,wBAFF,kBAGI,2DD6DJ,CACF,CC3DI,wBACE,uCD6DN,CC1DI,iDAEE,uCD2DN,CCvDE,oBACE,2DDyDJ,CCxDI,wBAFF,oBAGI,2DD2DJ,CACF,CCzDI,0BACE,uCD2DN,CCxDI,qDAEE,uCDyDN,CCrDE,kBACE,sCAAA,CACA,uBDuDJ,CCrDI,yEAGE,2DDqDN,CCpDM,wBAJF,yEAKI,2DDuDN,CACF","file":"LinkApollo.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\r\n\r\n.af-link {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  font-size: calc(var(--link-font-size) / var(--font-size-base) * 1rem);\r\n  font-weight: var(--link-font-weight);\r\n  text-decoration: underline;\r\n  text-underline-offset: var(--underline-offset);\r\n  color: var(--link-text-color-default);\r\n  fill: var(--link-text-color-default);\r\n\r\n  svg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n    aspect-ratio: 1;\r\n    fill: currentcolor;\r\n  }\r\n\r\n  &--openInNewTab {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &--default {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      text-decoration: underline;\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    line-height: var(--link-line-height);\r\n\r\n    &:hover {\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n    color: var(--link-text-color-inverse);\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      line-height: var(--link-line-height);\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    fill: var(--link-text-color-1);\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid var(--link-color-outline);\r\n    outline-offset: 3px;\r\n  }\r\n}\r\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n@use \"./LinkCommon\";\r\n\r\n.af-link {\r\n  --link-font-weight: 600;\r\n  --link-text-color-default: var(--axa-blue-100);\r\n  --underline-offset: 25%;\r\n  --link-font-size: 14;\r\n  @media (width > #{breakpoints.$breakpoint-md}) {\r\n    --link-font-size: 16;\r\n  }\r\n\r\n  &--default {\r\n    --link-line-height: 125%;\r\n    @media (width > #{breakpoints.$breakpoint-md}) {\r\n      --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--axa-blue-120);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--axa-blue-80);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    --link-line-height: calc(var(20) / var(--font-size-base) * 1rem);\r\n    @media (width > #{breakpoints.$breakpoint-md}) {\r\n      --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--axa-blue-120);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--axa-blue-80);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    --link-text-color-inverse: var(--white);\r\n    --link-line-height: 125%;\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      --link-line-height: calc(var(20) / var(--font-size-base) * 1rem);\r\n      @media (width > #{breakpoints.$breakpoint-md}) {\r\n        --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n      }\r\n    }\r\n  }\r\n}\r\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n@use \"./LinkCommon\";\r\n\r\n.af-link {\r\n  --link-font-weight: 600;\r\n  --link-text-color-default: var(--axa-blue-100);\r\n  --underline-offset: 25%;\r\n  --link-font-size: 14;\r\n  @media (width > #{breakpoints.$breakpoint-md}) {\r\n    --link-font-size: 16;\r\n  }\r\n\r\n  &--default {\r\n    --link-line-height: 125%;\r\n    @media (width > #{breakpoints.$breakpoint-md}) {\r\n      --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--axa-blue-120);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--axa-blue-80);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    --link-line-height: calc(var(20) / var(--font-size-base) * 1rem);\r\n    @media (width > #{breakpoints.$breakpoint-md}) {\r\n      --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--axa-blue-120);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--axa-blue-80);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    --link-text-color-inverse: var(--white);\r\n    --link-line-height: 125%;\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      --link-line-height: calc(var(20) / var(--font-size-base) * 1rem);\r\n      @media (width > #{breakpoints.$breakpoint-md}) {\r\n        --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n      }\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/Link/LinkApollo.scss

@@ -0,0 +1,59 @@
+@use "../common/breakpoints" as breakpoints;
+
+@use "./LinkCommon";
+
+.af-link {
+  --link-font-weight: 600;
+  --link-text-color-default: var(--axa-blue-100);
+  --underline-offset: 25%;
+  --link-font-size: 14;
+  @media (width > #{breakpoints.$breakpoint-md}) {
+    --link-font-size: 16;
+  }
+
+  &--default {
+    --link-line-height: 125%;
+    @media (width > #{breakpoints.$breakpoint-md}) {
+      --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);
+    }
+
+    &:hover {
+      --link-text-color-1: var(--axa-blue-120);
+    }
+
+    &:active,
+    &:focus {
+      --link-color-outline: var(--axa-blue-80);
+    }
+  }
+
+  &--underline {
+    --link-line-height: calc(var(20) / var(--font-size-base) * 1rem);
+    @media (width > #{breakpoints.$breakpoint-md}) {
+      --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);
+    }
+
+    &:hover {
+      --link-text-color-1: var(--axa-blue-120);
+    }
+
+    &:active,
+    &:focus {
+      --link-color-outline: var(--axa-blue-80);
+    }
+  }
+
+  &--inverse {
+    --link-text-color-inverse: var(--white);
+    --link-line-height: 125%;
+
+    &:hover,
+    &:active,
+    &:focus {
+      --link-line-height: calc(var(20) / var(--font-size-base) * 1rem);
+      @media (width > #{breakpoints.$breakpoint-md}) {
+        --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);
+      }
+    }
+  }
+}

package/dist/Link/LinkCommon.css

@@ -0,0 +1 @@
+.af-link{align-items:center;color:var(--link-text-color-default);display:inline-flex;font-size:calc(var(--link-font-size)/var(--font-size-base)*1rem);font-weight:var(--link-font-weight);gap:.25rem;height:fit-content;text-decoration:underline;text-underline-offset:var(--underline-offset);width:fit-content;fill:var(--link-text-color-default)}.af-link svg{aspect-ratio:1;height:1.25rem;width:1.25rem;fill:currentcolor}.af-link--openInNewTab{font-weight:600}.af-link--default{line-height:var(--link-line-height);text-decoration:none}.af-link--default:hover{color:var(--link-text-color-1);text-decoration:underline}.af-link--default:active,.af-link--default:focus{color:var(--link-color-outline);text-decoration:underline}.af-link--underline{line-height:var(--link-line-height)}.af-link--underline:hover{color:var(--link-text-color-1)}.af-link--underline:active,.af-link--underline:focus{color:var(--link-color-outline)}.af-link--inverse{color:var(--link-text-color-inverse);line-height:var(--link-line-height);text-decoration:none}.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{line-height:var(--link-line-height);text-decoration:underline}.af-link:active,.af-link:focus,.af-link:hover{fill:var(--link-text-color-1)}.af-link:focus-visible{outline:2px solid var(--link-color-outline);outline-offset:3px}

package/dist/Link/LinkCommon.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Link/LinkCommon.scss%23sass","../../src/Link/LinkCommon.scss"],"names":[],"mappings":"AAEA,SAIE,kBAAA,CAMA,oCAAA,CATA,mBAAA,CAKA,gEAAA,CACA,mCAAA,CAFA,UAAA,CAFA,kBAAA,CAKA,yBAAA,CACA,6CAAA,CCTF,iBAAA,CDWE,mCCDF,CDGE,aAGE,cAAA,CADA,cAAA,CADA,aAAA,CAGA,iBCDJ,CDIE,uBACE,eCFJ,CDKE,kBACE,mCAAA,CACA,oBCHJ,CDKI,wBAEE,8BAAA,CADA,yBCFN,CDMI,iDAGE,+BAAA,CADA,yBCJN,CDSE,oBACE,mCCPJ,CDSI,0BACE,8BCPN,CDUI,qDAEE,+BCTN,CDaE,kBAGE,oCAAA,CAFA,mCAAA,CACA,oBCVJ,CDaI,yEAGE,mCAAA,CACA,yBCbN,CDiBE,8CAGE,6BCjBJ,CDoBE,uBACE,2CAAA,CACA,kBClBJ","file":"LinkCommon.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\r\n\r\n.af-link {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  font-size: calc(var(--link-font-size) / var(--font-size-base) * 1rem);\r\n  font-weight: var(--link-font-weight);\r\n  text-decoration: underline;\r\n  text-underline-offset: var(--underline-offset);\r\n  color: var(--link-text-color-default);\r\n  fill: var(--link-text-color-default);\r\n\r\n  svg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n    aspect-ratio: 1;\r\n    fill: currentcolor;\r\n  }\r\n\r\n  &--openInNewTab {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &--default {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      text-decoration: underline;\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    line-height: var(--link-line-height);\r\n\r\n    &:hover {\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n    color: var(--link-text-color-inverse);\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      line-height: var(--link-line-height);\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    fill: var(--link-text-color-1);\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid var(--link-color-outline);\r\n    outline-offset: 3px;\r\n  }\r\n}\r\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n.af-link {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  font-size: calc(var(--link-font-size) / var(--font-size-base) * 1rem);\r\n  font-weight: var(--link-font-weight);\r\n  text-decoration: underline;\r\n  text-underline-offset: var(--underline-offset);\r\n  color: var(--link-text-color-default);\r\n  fill: var(--link-text-color-default);\r\n\r\n  svg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n    aspect-ratio: 1;\r\n    fill: currentcolor;\r\n  }\r\n\r\n  &--openInNewTab {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &--default {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      text-decoration: underline;\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    line-height: var(--link-line-height);\r\n\r\n    &:hover {\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n    color: var(--link-text-color-inverse);\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      line-height: var(--link-line-height);\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    fill: var(--link-text-color-1);\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid var(--link-color-outline);\r\n    outline-offset: 3px;\r\n  }\r\n}\r\n"]}

package/dist/Link/LinkCommon.scss

@@ -0,0 +1,79 @@
+@use "../common/breakpoints" as breakpoints;
+
+.af-link {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: calc(var(--link-font-size) / var(--font-size-base) * 1rem);
+  font-weight: var(--link-font-weight);
+  text-decoration: underline;
+  text-underline-offset: var(--underline-offset);
+  color: var(--link-text-color-default);
+  fill: var(--link-text-color-default);
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    aspect-ratio: 1;
+    fill: currentcolor;
+  }
+
+  &--openInNewTab {
+    font-weight: 600;
+  }
+
+  &--default {
+    line-height: var(--link-line-height);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      color: var(--link-text-color-1);
+    }
+
+    &:active,
+    &:focus {
+      text-decoration: underline;
+      color: var(--link-color-outline);
+    }
+  }
+
+  &--underline {
+    line-height: var(--link-line-height);
+
+    &:hover {
+      color: var(--link-text-color-1);
+    }
+
+    &:active,
+    &:focus {
+      color: var(--link-color-outline);
+    }
+  }
+
+  &--inverse {
+    line-height: var(--link-line-height);
+    text-decoration: none;
+    color: var(--link-text-color-inverse);
+
+    &:hover,
+    &:active,
+    &:focus {
+      line-height: var(--link-line-height);
+      text-decoration: underline;
+    }
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    fill: var(--link-text-color-1);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--link-color-outline);
+    outline-offset: 3px;
+  }
+}

package/dist/Link/LinkLF.css

@@ -0,0 +1 @@
+.af-link{align-items:center;color:var(--link-text-color-default);display:inline-flex;font-size:calc(var(--link-font-size)/var(--font-size-base)*1rem);font-weight:var(--link-font-weight);gap:.25rem;height:fit-content;text-decoration:underline;text-underline-offset:var(--underline-offset);width:fit-content;fill:var(--link-text-color-default)}.af-link svg{aspect-ratio:1;height:1.25rem;width:1.25rem;fill:currentcolor}.af-link--openInNewTab{font-weight:600}.af-link--default{line-height:var(--link-line-height);text-decoration:none}.af-link--default:hover{color:var(--link-text-color-1);text-decoration:underline}.af-link--default:active,.af-link--default:focus{color:var(--link-color-outline);text-decoration:underline}.af-link--underline{line-height:var(--link-line-height)}.af-link--underline:hover{color:var(--link-text-color-1)}.af-link--underline:active,.af-link--underline:focus{color:var(--link-color-outline)}.af-link--inverse{color:var(--link-text-color-inverse);line-height:var(--link-line-height);text-decoration:none}.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{line-height:var(--link-line-height);text-decoration:underline}.af-link:active,.af-link:focus,.af-link:hover{fill:var(--link-text-color-1)}.af-link:focus-visible{outline:2px solid var(--link-color-outline);outline-offset:3px}.af-link{--link-font-weight:400;--link-text-color-default:var(--color-axa);--underline-offset:0%;--link-font-size:16}@media (width > 1023px){.af-link{--link-font-size:18}}.af-link--default{--link-line-height:125%}.af-link--default:hover{--link-text-color-1:var(--color-blue-1)}.af-link--default:active,.af-link--default:focus{--link-color-outline:var(--color-btn-light)}.af-link--underline{--link-line-height:125%}.af-link--underline:hover{--link-text-color-1:var(--color-blue-1)}.af-link--underline:active,.af-link--underline:focus{--link-color-outline:var(--color-btn-light)}.af-link--inverse{--link-text-color-inverse:var(--color-white)}.af-link--inverse,.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{--link-line-height:125%}

package/dist/Link/LinkLF.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Link/LinkCommon.scss","../../src/Link/LinkLF.scss","../../src/Link/LinkLF.scss%23sass"],"names":[],"mappings":"AAEA,SCEA,kBAAA,CDQE,oCAAA,CATA,mBAAA,CAKA,gEAAA,CACA,mCAAA,CAFA,UAAA,CAFA,kBAAA,CAKA,yBAAA,CACA,6CAAA,CCTF,iBDEE,CASA,mCCDF,CDGE,aAGE,cAAA,CADA,cAAA,CADA,aAAA,CAGA,iBCDJ,CDIE,uBACE,eCFJ,CDKE,kBACE,mCAAA,CACA,oBCHJ,CDKI,wBAEE,8BAAA,CADA,yBCFN,CDMI,iDAGE,+BAAA,CADA,yBCJN,CDSE,oBACE,mCCPJ,CDSI,0BACE,8BCPN,CDUI,qDAEE,+BCTN,CDaE,kBAGE,oCAAA,CAFA,mCAAA,CACA,oBCVJ,CDaI,yECXJ,mCAAA,CDeM,yBCbN,CDiBE,8CAGE,6BCjBJ,CDoBE,uBACE,2CAAA,CACA,kBClBJ,CCtDA,SACE,sBAAA,CACA,0CAAA,CACA,qBAAA,CACA,mBDyDF,CCxDE,wBALF,SAMI,mBD2DF,CACF,CCzDE,kBACE,uBD2DJ,CCzDI,wBACE,uCD2DN,CCxDI,iDAEE,2CDyDN,CCrDE,oBACE,uBDuDJ,CCrDI,0BACE,uCDuDN,CCpDI,qDAEE,2CDqDN,CCjDE,kBACE,4CDoDJ,CCjDI,2FAFA,uBDsDJ","file":"LinkLF.css","sourcesContent":["@use \"../common/breakpoints\" as breakpoints;\r\n\r\n.af-link {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  font-size: calc(var(--link-font-size) / var(--font-size-base) * 1rem);\r\n  font-weight: var(--link-font-weight);\r\n  text-decoration: underline;\r\n  text-underline-offset: var(--underline-offset);\r\n  color: var(--link-text-color-default);\r\n  fill: var(--link-text-color-default);\r\n\r\n  svg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n    aspect-ratio: 1;\r\n    fill: currentcolor;\r\n  }\r\n\r\n  &--openInNewTab {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &--default {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      text-decoration: underline;\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    line-height: var(--link-line-height);\r\n\r\n    &:hover {\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n    color: var(--link-text-color-inverse);\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      line-height: var(--link-line-height);\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    fill: var(--link-text-color-1);\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid var(--link-color-outline);\r\n    outline-offset: 3px;\r\n  }\r\n}\r\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n@use \"./LinkCommon\";\r\n\r\n.af-link {\r\n  --link-font-weight: 400;\r\n  --link-text-color-default: var(--color-axa);\r\n  --underline-offset: 0%;\r\n  --link-font-size: 16;\r\n  @media (width > #{breakpoints.$breakpoint-md}) {\r\n    --link-font-size: 18;\r\n  }\r\n\r\n  &--default {\r\n    --link-line-height: 125%;\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--color-blue-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--color-btn-light);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    --link-line-height: 125%;\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--color-blue-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--color-btn-light);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    --link-text-color-inverse: var(--color-white);\r\n    --link-line-height: 125%;\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      --link-line-height: 125%;\r\n    }\r\n  }\r\n}\r\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n@use \"./LinkCommon\";\r\n\r\n.af-link {\r\n  --link-font-weight: 400;\r\n  --link-text-color-default: var(--color-axa);\r\n  --underline-offset: 0%;\r\n  --link-font-size: 16;\r\n  @media (width > #{breakpoints.$breakpoint-md}) {\r\n    --link-font-size: 18;\r\n  }\r\n\r\n  &--default {\r\n    --link-line-height: 125%;\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--color-blue-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--color-btn-light);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    --link-line-height: 125%;\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--color-blue-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--color-btn-light);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    --link-text-color-inverse: var(--color-white);\r\n    --link-line-height: 125%;\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      --link-line-height: 125%;\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/Link/LinkLF.scss

@@ -0,0 +1,50 @@
+@use "../common/breakpoints" as breakpoints;
+
+@use "./LinkCommon";
+
+.af-link {
+  --link-font-weight: 400;
+  --link-text-color-default: var(--color-axa);
+  --underline-offset: 0%;
+  --link-font-size: 16;
+  @media (width > #{breakpoints.$breakpoint-md}) {
+    --link-font-size: 18;
+  }
+
+  &--default {
+    --link-line-height: 125%;
+
+    &:hover {
+      --link-text-color-1: var(--color-blue-1);
+    }
+
+    &:active,
+    &:focus {
+      --link-color-outline: var(--color-btn-light);
+    }
+  }
+
+  &--underline {
+    --link-line-height: 125%;
+
+    &:hover {
+      --link-text-color-1: var(--color-blue-1);
+    }
+
+    &:active,
+    &:focus {
+      --link-color-outline: var(--color-btn-light);
+    }
+  }
+
+  &--inverse {
+    --link-text-color-inverse: var(--color-white);
+    --link-line-height: 125%;
+
+    &:hover,
+    &:active,
+    &:focus {
+      --link-line-height: 125%;
+    }
+  }
+}

package/dist/apollo.css

@@ -1 +1 @@
-.grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}.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}.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);line-height:1.25em}.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)}.af-spinner{--spinner-size:40;--spinner-border-size:3;align-items:center;animation:spin 2s linear infinite;border:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-color);border-radius:50%;border-top:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);container-type:inline-size;display:flex;flex-direction:column;height:calc(var(--spinner-size)*1px);justify-content:center;margin:auto;width:calc(var(--spinner-size)*1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.af-spinner{--spinner-border-color:var(--axa-blue-100-20);--spinner-border-top-color:var(--axa-blue-100);border-left:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);height:calc(var(--spinner-size)*1px - 8px);width:calc(var(--spinner-size)*1px - 8px)}.af-spinner--gray{--spinner-border-color:var(--neutral-50-20);--spinner-border-top-color:var(--neutral-100)}.af-spinner--white{--spinner-border-color:var(--white-20);--spinner-border-top-color:var(--white)}.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)}}.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--neutral-80)}.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-helper{--input-helper-color:var(--neutral-80)}.af-form__input-variant{--input-border-color:var(--axa-blue-65);--input-border-radius:var(--radius-8);--input-bg-color:var(--white);--input-text-color:var(--neutral-80);--input-text-icon-color:var(--axa-blue-100)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--axa-blue-65)}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){--input-border-color:var(--axa-blue-100);--input-text-placeholder-color:var(--neutral-80)}.af-form__input-variant:has(>input[class*="--error"]){--input-border-color:var(--red-alert-100)}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){--input-border-color:var(--neutral-50);--input-text-color:var(--neutral-50);--input-bg-color:var(--neutral-5);--input-text-icon-color:var(--neutral-50)}.af-form__input-variant:has(>input:disabled)+.af-form__input-helper,.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)+.af-form__input-helper{--input-helper-color:var(--neutral-50)}.af-icon{background-color:var(--icon-background-color);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content;--icon-background-color:#0000;--icon-size:calc(24/var(--font-size-base)*1rem)}.af-icon svg{height:var(--icon-size);width:var(--icon-size);fill:var(--icon-fill)}.af-icon--large svg{--icon-size:calc(40/var(--font-size-base)*1rem)}.af-icon--large.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--medium svg{--icon-size:calc(32/var(--font-size-base)*1rem)}.af-icon--medium.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--small svg{--icon-width:calc(24/var(--font-size-base)*1rem)}.af-icon--extra-small svg{--icon-size:calc(16/var(--font-size-base)*1rem)}.af-icon--extra-small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--secondary.af-icon--has-background{outline-style:solid;outline-width:1px}.af-icon{--icon-border-radius:var(--radius-100)}.af-icon--small.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--primary{--icon-fill:var(--axa-blue-100)}.af-icon--primary.af-icon--has-background{--icon-fill:var(--white);--icon-background-color:var(--axa-blue-100)}.af-icon--secondary{--icon-fill:var(--white)}.af-icon--secondary.af-icon--has-background{--icon-fill:var(--axa-blue-100);--icon-background-color:var(--axa-blue-4);--icon-outline-color:var(--axa-blue-4)}.af-icon--tertiary{--icon-fill:var(--neutral-50)}.af-icon--tertiary.af-icon--has-background{--icon-background-color:var(--axa-blue-4)}.af-divider{border:0;border-top:1px solid var(--divider-border-color);margin:0;--divider-border-color:var(--axa-blue-20)}.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-within,:focus-visible,:focus,:active) .af-toggle__root{outline:2px solid var(--toggle-focus-outline-color);outline-offset:2px}.af-toggle:has(:hover,:active){cursor:pointer}.af-toggle__handle{background-color:var(--toggle-handle-color);border-radius:var(--radius-100);height:var(--toggle-handle-size);transform:translateX(var(--toggle-handle-position)) scale(var(--toggle-handle-scale));transition:.2s;width:var(--toggle-handle-size)}.af-toggle input[type=checkbox]{height:1px;position:absolute;width:1px;clip:rect(0,0,0,0)}.af-toggle{--toggle-bg-color:var(--neutral-50);--toggle-border-color:var(--neutral-50);--toggle-focus-outline-color:var(--axa-blue-100);--toggle-border-size:1px;--toggle-border-radius:var(--radius-100);--toggle-padding:2px;--toggle-width:42px;--toggle-height:24px;--toggle-handle-color:var(--white);--toggle-handle-size:20px;--toggle-handle-scale:1;--toggle-handle-position:0}.af-toggle:has(:checked){--toggle-bg-color:var(--axa-blue-100);--toggle-border-color:var(--axa-blue-100)}.af-toggle:has(:checked) .af-toggle__handle{--toggle-handle-position:calc(var(--toggle-width) - var(--toggle-handle-size) - var(--toggle-padding)*2 - var(--toggle-border-size))}.af-toggle:has(:disabled){--toggle-bg-color:var(--neutral-25);--toggle-border-color:var(--neutral-25)}
+.grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}.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}.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);line-height:1.25em}.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)}.af-spinner{--spinner-size:40;--spinner-border-size:3;align-items:center;animation:spin 2s linear infinite;border:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-color);border-radius:50%;border-top:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);container-type:inline-size;display:flex;flex-direction:column;height:calc(var(--spinner-size)*1px);justify-content:center;margin:auto;width:calc(var(--spinner-size)*1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.af-spinner{--spinner-border-color:var(--axa-blue-100-20);--spinner-border-top-color:var(--axa-blue-100);border-left:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);height:calc(var(--spinner-size)*1px - 8px);width:calc(var(--spinner-size)*1px - 8px)}.af-spinner--gray{--spinner-border-color:var(--neutral-50-20);--spinner-border-top-color:var(--neutral-100)}.af-spinner--white{--spinner-border-color:var(--white-20);--spinner-border-top-color:var(--white)}.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)}}.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--neutral-80)}.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-helper{--input-helper-color:var(--neutral-80)}.af-form__input-variant{--input-border-color:var(--axa-blue-65);--input-border-radius:var(--radius-8);--input-bg-color:var(--white);--input-text-color:var(--neutral-80);--input-text-icon-color:var(--axa-blue-100)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--axa-blue-65)}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){--input-border-color:var(--axa-blue-100);--input-text-placeholder-color:var(--neutral-80)}.af-form__input-variant:has(>input[class*="--error"]){--input-border-color:var(--red-alert-100)}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){--input-border-color:var(--neutral-50);--input-text-color:var(--neutral-50);--input-bg-color:var(--neutral-5);--input-text-icon-color:var(--neutral-50)}.af-form__input-variant:has(>input:disabled)+.af-form__input-helper,.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)+.af-form__input-helper{--input-helper-color:var(--neutral-50)}.af-icon{background-color:var(--icon-background-color);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content;--icon-background-color:#0000;--icon-size:calc(24/var(--font-size-base)*1rem)}.af-icon svg{height:var(--icon-size);width:var(--icon-size);fill:var(--icon-fill)}.af-icon--large svg{--icon-size:calc(40/var(--font-size-base)*1rem)}.af-icon--large.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--medium svg{--icon-size:calc(32/var(--font-size-base)*1rem)}.af-icon--medium.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--small svg{--icon-width:calc(24/var(--font-size-base)*1rem)}.af-icon--extra-small svg{--icon-size:calc(16/var(--font-size-base)*1rem)}.af-icon--extra-small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--secondary.af-icon--has-background{outline-style:solid;outline-width:1px}.af-icon{--icon-border-radius:var(--radius-100)}.af-icon--small.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--primary{--icon-fill:var(--axa-blue-100)}.af-icon--primary.af-icon--has-background{--icon-fill:var(--white);--icon-background-color:var(--axa-blue-100)}.af-icon--secondary{--icon-fill:var(--white)}.af-icon--secondary.af-icon--has-background{--icon-fill:var(--axa-blue-100);--icon-background-color:var(--axa-blue-4);--icon-outline-color:var(--axa-blue-4)}.af-icon--tertiary{--icon-fill:var(--neutral-50)}.af-icon--tertiary.af-icon--has-background{--icon-background-color:var(--axa-blue-4)}.af-divider{border:0;border-top:1px solid var(--divider-border-color);margin:0;--divider-border-color:var(--axa-blue-20)}.af-link{align-items:center;color:var(--link-text-color-default);display:inline-flex;font-size:calc(var(--link-font-size)/var(--font-size-base)*1rem);font-weight:var(--link-font-weight);gap:.25rem;height:fit-content;text-decoration:underline;text-underline-offset:var(--underline-offset);width:fit-content;fill:var(--link-text-color-default)}.af-link svg{aspect-ratio:1;height:1.25rem;width:1.25rem;fill:currentcolor}.af-link--openInNewTab{font-weight:600}.af-link--default{line-height:var(--link-line-height);text-decoration:none}.af-link--default:hover{color:var(--link-text-color-1);text-decoration:underline}.af-link--default:active,.af-link--default:focus{color:var(--link-color-outline);text-decoration:underline}.af-link--underline{line-height:var(--link-line-height)}.af-link--underline:hover{color:var(--link-text-color-1)}.af-link--underline:active,.af-link--underline:focus{color:var(--link-color-outline)}.af-link--inverse{color:var(--link-text-color-inverse);line-height:var(--link-line-height);text-decoration:none}.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{line-height:var(--link-line-height);text-decoration:underline}.af-link:active,.af-link:focus,.af-link:hover{fill:var(--link-text-color-1)}.af-link:focus-visible{outline:2px solid var(--link-color-outline);outline-offset:3px}.af-link{--link-font-weight:600;--link-text-color-default:var(--axa-blue-100);--underline-offset:25%;--link-font-size:14}@media (width > 1023px){.af-link{--link-font-size:16}}.af-link--default{--link-line-height:125%}@media (width > 1023px){.af-link--default{--link-line-height:calc(var(24)/var(--font-size-base)*1rem)}}.af-link--default:hover{--link-text-color-1:var(--axa-blue-120)}.af-link--default:active,.af-link--default:focus{--link-color-outline:var(--axa-blue-80)}.af-link--underline{--link-line-height:calc(var(20)/var(--font-size-base)*1rem)}@media (width > 1023px){.af-link--underline{--link-line-height:calc(var(24)/var(--font-size-base)*1rem)}}.af-link--underline:hover{--link-text-color-1:var(--axa-blue-120)}.af-link--underline:active,.af-link--underline:focus{--link-color-outline:var(--axa-blue-80)}.af-link--inverse{--link-text-color-inverse:var(--white);--link-line-height:125%}.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{--link-line-height:calc(var(20)/var(--font-size-base)*1rem)}@media (width > 1023px){.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{--link-line-height:calc(var(24)/var(--font-size-base)*1rem)}}.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-within,:focus-visible,:focus,:active) .af-toggle__root{outline:2px solid var(--toggle-focus-outline-color);outline-offset:2px}.af-toggle:has(:hover,:active){cursor:pointer}.af-toggle__handle{background-color:var(--toggle-handle-color);border-radius:var(--radius-100);height:var(--toggle-handle-size);transform:translateX(var(--toggle-handle-position)) scale(var(--toggle-handle-scale));transition:.2s;width:var(--toggle-handle-size)}.af-toggle input[type=checkbox]{height:1px;position:absolute;width:1px;clip:rect(0,0,0,0)}.af-toggle{--toggle-bg-color:var(--neutral-50);--toggle-border-color:var(--neutral-50);--toggle-focus-outline-color:var(--axa-blue-100);--toggle-border-size:1px;--toggle-border-radius:var(--radius-100);--toggle-padding:2px;--toggle-width:42px;--toggle-height:24px;--toggle-handle-color:var(--white);--toggle-handle-size:20px;--toggle-handle-scale:1;--toggle-handle-position:0}.af-toggle:has(:checked){--toggle-bg-color:var(--axa-blue-100);--toggle-border-color:var(--axa-blue-100)}.af-toggle:has(:checked) .af-toggle__handle{--toggle-handle-position:calc(var(--toggle-width) - var(--toggle-handle-size) - var(--toggle-padding)*2 - var(--toggle-border-size))}.af-toggle:has(:disabled){--toggle-bg-color:var(--neutral-25);--toggle-border-color:var(--neutral-25)}

package/dist/apollo.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Grid/Grid.scss","../src/apollo.scss","../src/Grid/DebugGrid.scss","../src/Button/ButtonCommon.scss","../src/Button/ButtonApollo.scss","../src/Spinner/SpinnerCommon.scss","../src/Spinner/SpinnerApollo.scss","../src/Form/ItemMessage/ItemMessageCommon.scss","../src/Form/ItemMessage/ItemMessageApollo.scss","../src/Form/ItemLabel/ItemLabelCommon.scss","../src/Form/ItemLabel/ItemLabelApollo.scss","../src/Form/TextInput/TextInputCommon.scss","../src/Form/TextInput/TextInputApollo.scss","../src/Icon/IconCommon.scss","../src/Icon/IconApollo.scss","../src/Divider/DividerCommon.scss","../src/Divider/DividerApollo.scss","../src/Toggle/ToggleCommon.scss","../src/Toggle/ToggleApollo.scss"],"names":[],"mappings":"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","file":"apollo.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel et Apollo) ****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{breakpoints.$breakpoint-sm}) { >>>>> more than  667px\n@media (width > #{breakpoints.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{breakpoints.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{breakpoints.$breakpoint-xl}) { >>>>> more than 1599px\n\n******************************************************************************* */\n\n.grid {\n  --col-gap: calc(8 / var(--font-size-base) * 1rem);\n  --row-gap: calc(16 / var(--font-size-base) * 1rem);\n  --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n  --cols: 4;\n  --start: auto;\n\n  display: grid;\n  margin-inline: var(--margin-inline);\n  grid-template-columns: repeat(var(--cols), 1fr);\n  gap: var(--row-gap) var(--col-gap);\n\n  @media (width > #{breakpoints.$breakpoint-sm}) {\n    --cols: 8;\n    --col-gap: calc(16 / var(--font-size-base) * 1rem);\n    --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --col-gap: calc(24 / var(--font-size-base) * 1rem);\n    --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n    --cols: 12;\n  }\n\n  @media (width > #{breakpoints.$breakpoint-lg}) {\n    --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-xl}) {\n    --margin-inline: auto;\n\n    max-width: 1320px;\n  }\n\n  > *,\n  & .subgrid,\n  & :has(> .subgrid) {\n    display: grid;\n    grid-column: var(--start) / span var(--cols);\n    align-content: start;\n    row-gap: var(--row-gap);\n  }\n\n  > * > * {\n    --start: auto;\n  }\n\n  .subgrid,\n  & :has(> .subgrid) {\n    grid-template-columns: subgrid;\n\n    > * {\n      grid-column: var(--start) / span var(--cols);\n    }\n  }\n}\n","@use \"./Grid/Grid\";\n@use \"./Grid/DebugGrid\";\n@use \"./Button/ButtonApollo\";\n@use \"./Spinner/SpinnerApollo\";\n@use \"./Form/ItemMessage/ItemMessageApollo\";\n@use \"./Form/ItemLabel/ItemLabelApollo\";\n@use \"./Form/TextInput/TextInputApollo\";\n@use \"./Icon/IconApollo\";\n@use \"./Divider/DividerApollo\";\n@use \"./Toggle/ToggleApollo\";\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","/* 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:\n    width, height, border, color, background-color, outline, 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    line-height: 1.25em;\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",".af-spinner {\n  --spinner-size: 40;\n  --spinner-border-size: 3;\n\n  display: flex;\n  container-type: inline-size;\n  width: calc(var(--spinner-size) * 1px);\n  height: calc(var(--spinner-size) * 1px);\n  margin: auto;\n  border: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-color);\n  border-top: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-top-color);\n  border-radius: 50%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","@use \"./SpinnerCommon\";\n\n.af-spinner {\n  --spinner-border-color: var(--axa-blue-100-20);\n  --spinner-border-top-color: var(--axa-blue-100);\n\n  width: calc(calc(var(--spinner-size) * 1px) - 8px);\n  height: calc(calc(var(--spinner-size) * 1px) - 8px);\n  border-left: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-top-color);\n\n  &--gray {\n    --spinner-border-color: var(--neutral-50-20);\n    --spinner-border-top-color: var(--neutral-100);\n  }\n\n  &--white {\n    --spinner-border-color: var(--white-20);\n    --spinner-border-top-color: var(--white);\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","@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.af-item-label {\n  display: grid;\n  width: 100%;\n  grid-template-areas:\n    \"label sidebutton\"\n    \"description sidebutton\"\n    \"more more\";\n  grid-template-columns: 1fr auto;\n  place-items: end start;\n  row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-label__description) {\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &:has(> .af-item-label__sidebutton) {\n    column-gap: calc(12 / var(--font-size-base) * 1rem);\n  }\n\n  > label {\n    grid-area: label;\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    color: var(--color-gray-900);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(24 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__sidebutton {\n    grid-area: sidebutton;\n    place-self: center end;\n\n    &:has(+ .af-item-label__description) {\n      align-self: end;\n    }\n  }\n\n  &__more {\n    grid-area: more;\n  }\n\n  &__description {\n    grid-area: description;\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25em;\n    color: var(--label-description-color);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n  --label-description-color: var(--neutral-80);\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n  &__input-container {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &__input-variant {\n    display: grid;\n    width: 100%;\n    padding: calc(16 / var(--font-size-base) * 1rem);\n    border: 1px solid var(--input-border-color);\n    border-radius: var(--input-border-radius);\n    grid-template-columns: auto min-content;\n    align-items: center;\n    color: var(--input-text-color);\n    background-color: var(--input-bg-color);\n\n    &:has(> input ~ *) {\n      column-gap: calc(8 / var(--font-size-base) * 1rem);\n    }\n\n    > input {\n      all: unset;\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n      font-weight: 600;\n      line-height: 1.25em;\n      color: var(--input-text-color);\n\n      &::placeholder {\n        font-weight: 400;\n        color: var(--input-text-placeholder-color);\n      }\n\n      & ~ * {\n        color: var(--input-text-icon-color);\n        fill: var(--input-text-icon-color);\n      }\n\n      @media (width > #{breakpoints.$breakpoint-md}) {\n        font-size: calc(18 / var(--font-size-base) * 1rem);\n      }\n    }\n\n    &:has(> input:is(:hover, :focus, :active)) {\n      box-shadow: 0 0 0 1px var(--input-border-color) inset;\n    }\n\n    &:has(> input:disabled),\n    &:has(> input:disabled):is(:hover, :focus, :active) {\n      box-shadow: unset;\n      cursor: not-allowed;\n\n      & > input ~ * {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  &__input-helper {\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25em;\n    color: var(--input-helper-color);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n  &__input-helper {\n    --input-helper-color: var(--neutral-80);\n  }\n\n  &__input-variant {\n    --input-border-color: var(--axa-blue-65);\n    --input-border-radius: var(--radius-8);\n    --input-bg-color: var(--white);\n    --input-text-color: var(--neutral-80);\n    --input-text-icon-color: var(--axa-blue-100);\n\n    &:has(> input:not([value=\"\"])) {\n      --input-border-color: var(--axa-blue-65);\n    }\n\n    &:has(> input:is(:hover, :focus, :active)) {\n      --input-border-color: var(--axa-blue-100);\n      --input-text-placeholder-color: var(--neutral-80);\n    }\n\n    &:has(> input[class*=\"--error\"]) {\n      --input-border-color: var(--red-alert-100);\n    }\n\n    &:has(> input:disabled),\n    &:has(> input:disabled):is(:hover, :focus, :active) {\n      --input-border-color: var(--neutral-50);\n      --input-text-color: var(--neutral-50);\n      --input-bg-color: var(--neutral-5);\n      --input-text-icon-color: var(--neutral-50);\n\n      + .af-form__input-helper {\n        --input-helper-color: var(--neutral-50);\n      }\n    }\n  }\n}\n",".af-icon {\r\n  display: grid;\r\n  width: fit-content;\r\n  padding: var(--icon-padding);\r\n  border-radius: var(--icon-border-radius);\r\n  background-color: var(--icon-background-color);\r\n  outline-color: var(--icon-outline-color);\r\n\r\n  --icon-background-color: transparent;\r\n  --icon-size: calc(24 / var(--font-size-base) * 1rem);\r\n\r\n  svg {\r\n    width: var(--icon-size);\r\n    height: var(--icon-size);\r\n    fill: var(--icon-fill);\r\n  }\r\n\r\n  &--large {\r\n    svg {\r\n      --icon-size: calc(40 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--medium {\r\n    svg {\r\n      --icon-size: calc(32 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--small {\r\n    svg {\r\n      --icon-width: calc(24 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--extra-small {\r\n    svg {\r\n      --icon-size: calc(16 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--secondary {\r\n    &.af-icon--has-background {\r\n      outline-style: solid;\r\n      outline-width: 1px;\r\n    }\r\n  }\r\n}\r\n","@use \"./IconCommon\";\r\n\r\n.af-icon {\r\n  --icon-border-radius: var(--radius-100);\r\n\r\n  &--small {\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--primary {\r\n    --icon-fill: var(--axa-blue-100);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-fill: var(--white);\r\n      --icon-background-color: var(--axa-blue-100);\r\n    }\r\n  }\r\n\r\n  &--secondary {\r\n    --icon-fill: var(--white);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-fill: var(--axa-blue-100);\r\n      --icon-background-color: var(--axa-blue-4);\r\n      --icon-outline-color: var(--axa-blue-4);\r\n    }\r\n  }\r\n\r\n  &--tertiary {\r\n    --icon-fill: var(--neutral-50);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-background-color: var(--axa-blue-4);\r\n    }\r\n  }\r\n}\r\n",".af-divider {\n  margin: 0;\n  border: 0;\n  border-top: 1px solid var(--divider-border-color);\n}\n","@use \"./DividerCommon\";\n\n.af-divider {\n  --divider-border-color: var(--axa-blue-20);\n}\n",".af-toggle {\n  &__root {\n    position: relative;\n    display: flex;\n    width: var(--toggle-width);\n    height: var(--toggle-height);\n    padding: var(--toggle-padding);\n    border: var(--toggle-border-size) solid var(--toggle-border-color);\n    border-radius: var(--toggle-border-radius);\n    align-items: center;\n    background-color: var(--toggle-bg-color);\n  }\n\n  &:has(:focus-within, :focus-visible, :focus, :active) &__root {\n    outline: 2px solid var(--toggle-focus-outline-color);\n    outline-offset: 2px;\n  }\n\n  &:has(:hover, :active) {\n    cursor: pointer;\n  }\n\n  &__handle {\n    width: var(--toggle-handle-size);\n    height: var(--toggle-handle-size);\n    border-radius: var(--radius-100);\n    background-color: var(--toggle-handle-color);\n    transform: translateX(var(--toggle-handle-position))\n      scale(var(--toggle-handle-scale));\n    transition: 200ms;\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    clip: rect(0, 0, 0, 0);\n  }\n}\n","@use \"./ToggleCommon\";\n\n.af-toggle {\n  --toggle-bg-color: var(--neutral-50);\n  --toggle-border-color: var(--neutral-50);\n  --toggle-focus-outline-color: var(--axa-blue-100);\n  --toggle-border-size: 1px;\n  --toggle-border-radius: var(--radius-100);\n  --toggle-padding: 2px;\n  --toggle-width: 42px;\n  --toggle-height: 24px;\n  --toggle-handle-color: var(--white);\n  --toggle-handle-size: 20px;\n  --toggle-handle-scale: 1;\n  --toggle-handle-position: 0;\n\n  &:has(:checked) {\n    --toggle-bg-color: var(--axa-blue-100);\n    --toggle-border-color: var(--axa-blue-100);\n\n    .af-toggle__handle {\n      --toggle-handle-position: calc(\n        var(--toggle-width) - var(--toggle-handle-size) - calc(\n            var(--toggle-padding) * 2\n          ) - var(--toggle-border-size)\n      );\n    }\n  }\n\n  &:has(:disabled) {\n    --toggle-bg-color: var(--neutral-25);\n    --toggle-border-color: var(--neutral-25);\n  }\n}\n"]}
+{"version":3,"sources":["../src/Grid/Grid.scss","../src/apollo.scss","../src/Grid/DebugGrid.scss","../src/Button/ButtonCommon.scss","../src/Button/ButtonApollo.scss","../src/Spinner/SpinnerCommon.scss","../src/Spinner/SpinnerApollo.scss","../src/Form/ItemMessage/ItemMessageCommon.scss","../src/Form/ItemMessage/ItemMessageApollo.scss","../src/Form/ItemLabel/ItemLabelCommon.scss","../src/Form/ItemLabel/ItemLabelApollo.scss","../src/Form/TextInput/TextInputCommon.scss","../src/Form/TextInput/TextInputApollo.scss","../src/Icon/IconCommon.scss","../src/Icon/IconApollo.scss","../src/Divider/DividerCommon.scss","../src/Divider/DividerApollo.scss","../src/Link/LinkCommon.scss","../src/Link/LinkApollo.scss","../src/Toggle/ToggleCommon.scss","../src/Toggle/ToggleApollo.scss"],"names":[],"mappings":"AAeA,MACE,4CAAA,CACA,6CAAA,CACA,mDAAA,CACA,QAAA,CACA,YAAA,CAEA,YAAA,CAGA,iCAAA,CADA,6CAAA,CADA,kCCDF,CDKE,uBAZF,MAaI,QAAA,CACA,6CAAA,CACA,mDCFF,CACF,CDIE,wBAlBF,MAmBI,6CAAA,CACA,mDAAA,CACA,SCDF,CACF,CDGE,wBAxBF,MAyBI,oDCAF,CACF,CDEE,wBA5BF,MA6BI,oBAAA,CAEA,gBCAF,CACF,CDEE,6CAKE,mBAAA,CAFA,YAAA,CACA,yCAAA,CAEA,sBCFJ,CDKE,UACE,YCHJ,CDME,qCAEE,6BCLJ,CDOI,yCACE,yCCLN,CC5DA,4DAME,6BAAA,CAHA,QAAA,CAEA,WAAA,CADA,MAAA,CAHA,cAAA,CACA,SDmEF,CC5DA,YAGE,YAAA,CAEA,WAAA,CAEA,uBAAA,CADA,UAAA,CALA,cAAA,CACA,KAAA,CAEA,UDkEF,CC7DE,kBACE,0BAAA,CACA,uBAAA,CAGA,WAAA,CADA,iBD+DJ,CC5DI,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,wBDkEN,CC3DI,wBAIE,qCAAA,CAHA,YAAA,CAEA,kBAAA,CADA,WAAA,CAGA,0CD6DN,CC3DM,wCACE,aD6DR,CCzDI,uBAnCF,kBAoCI,gCAAA,CACA,uBD4DJ,CC1DI,wCACE,aD4DN,CACF,CCzDI,wBA5CF,kBA6CI,gCAAA,CACA,uBD4DJ,CC1DI,yCACE,aD4DN,CACF,CCzDI,wBArDF,kBAsDI,sCAAA,CACA,uBD4DJ,CACF,CC1DI,wBA1DF,kBA2DI,wCAAA,CACA,uBD6DJ,CACF,CCvDI,+CACE,aD0DN,CE9IA,eAKE,kBAAA,CAQA,+CAAA,CAVA,QAAA,CACA,kCAAA,CAQA,sCAAA,CAXA,YAAA,CAOA,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,8CAAA,CACA,iFACE,CACF,iCAAA,CACA,wBAAA,CAAA,gBFkJF,CEhJE,kDAEE,6CAAA,CACA,kBFiJJ,CE9IE,2DAEE,mBF+IJ,CE7II,mFACE,YF+IN,CE3IE,mBACE,cAAA,CACA,iBF6IJ,CE1IE,sBACE,sCAAA,CACA,kBF4IJ,CE1II,4FAGE,yBF0IN,CElIE,4DACE,qDFuIJ,CG7LA,eACE,6CAAA,CACA,wCAAA,CACA,gCAAA,CACA,yCAAA,CACA,wFAAA,CAEA,wDAAA,CACA,sDHgMF,CG9LE,wBAVF,eAWI,wFAAA,CAEA,wDAAA,CACA,sDHiMF,CACF,CG/LE,qBACE,6CHiMJ,CG9LE,sBACE,4CHgMJ,CG7LE,kDAEE,yCH8LJ,CG3LE,2DAEE,0CAAA,CACA,6CAAA,CACA,uCH4LJ,CGzLE,iCACE,4CAAA,CACA,wCH2LJ,CGzLI,wCACE,2CH2LN,CGxLI,6HAGE,4CHwLN,CGpLE,gCACE,sCAAA,CACA,+CHsLJ,CGpLI,uCACE,0CAAA,CACA,8CHsLN,CGnLI,0HAGE,2CAAA,CACA,+CHmLN,CG/KE,sBACE,+BAAA,CACA,+CAAA,CACA,kBHiLJ,CG/KI,6BACE,8CHiLN,CG9KI,4FAGE,+CAAA,CACA,+BH8KN,CG3KI,yEAEE,+BH4KN,CGxKE,0BACE,sCAAA,CACA,+CH0KJ,CGxKI,iCACE,4CAAA,CACA,wCAAA,CACA,wCH0KN,CGvKI,wGAGE,6CAAA,CACA,wCAAA,CACA,yCHuKN,CGnKE,kCACE,6CAAA,CACA,wCAAA,CACA,kCHqKJ,CGnKI,yCACE,0CAAA,CACA,8CAAA,CACA,sCHqKN,CGlKI,gIAGE,2CAAA,CACA,+CAAA,CACA,uCHkKN,CG9JE,yBACE,2CAAA,CACA,+CHgKJ,CG9JI,gCACE,4CAAA,CACA,wCHgKN,CG7JI,qGAGE,6CAAA,CACA,wCH6JN,CIlTA,YACE,iBAAA,CACA,uBAAA,CAaA,kBAAA,CAEA,iCAAA,CARA,6EAAA,CAIA,iBAAA,CAFA,qFAAA,CANA,0BAAA,CADA,YAAA,CAUA,qBAAA,CAPA,oCAAA,CASA,sBAAA,CARA,WAAA,CAFA,mCJ6TF,CI/SA,gBACE,GACE,sBJkTF,CI/SA,GACE,uBJiTF,CACF,CK1UA,YACE,6CAAA,CACA,8CAAA,CAIA,sFAAA,CADA,0CAAA,CADA,yCL6UF,CKxUE,kBACE,2CAAA,CACA,6CL0UJ,CKvUE,mBACE,sCAAA,CACA,uCLyUJ,CMzVA,iBACE,4DAAA,CAGA,kBAAA,CADA,YAAA,CAEA,sCN2VF,CMzVE,uBAEE,+BAAA,CADA,mCAAA,CAEA,iBN2VJ,CMxVE,0BAIE,+BAAA,CAHA,mCAAA,CACA,uCAAA,CACA,kBN2VJ,CMvVE,wBApBF,iBAqBI,4DN0VF,CACF,CO9WA,iBACE,yCAAA,CACA,4DPiXF,CO/WE,0BACE,qCPiXJ,CO9WE,wBARF,iBASI,4DPiXF,CACF,CQ7XA,eACE,YAAA,CAEA,2EACE,CAGF,8BAAA,CACA,qBAAA,CACA,0CAAA,CAPA,URoYF,CQ3XE,iDACE,0CR6XJ,CQ1XE,gDACE,8CR4XJ,CQzXE,qBAKE,2BAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,+CR4XJ,CQzXI,wBAPF,qBAQI,6CAAA,CACA,+CR4XJ,CACF,CQzXE,2BACE,oBAAA,CACA,qBR2XJ,CQzXI,6DACE,cR2XN,CQvXE,qBACE,cRyXJ,CQtXE,4BAKE,oCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,qBAAA,CAGA,kBRyXJ,CQtXI,wBAPF,4BAQI,6CAAA,CACA,+CRyXJ,CACF,CS9aA,eACE,2CTibF,CUnbE,0BAGE,sBAAA,CAFA,YAAA,CACA,qBAAA,CAEA,0CVsbJ,CUnbE,wBAOE,kBAAA,CAEA,sCAAA,CALA,0CAAA,CACA,wCAAA,CAGA,6BAAA,CAPA,YAAA,CAKA,sCAAA,CAHA,2CAAA,CADA,UV4bJ,CUnbI,sCACE,6CVqbN,CUlbI,8BACE,SAAA,CAIA,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBVqbN,CUlbM,2CAEE,yCAAA,CADA,eVqbR,CUjbM,gCACE,kCAAA,CACA,iCVmbR,CUhbM,wBAjBF,8BAkBI,6CVmbN,CACF,CUhbI,8DACE,oDVkbN,CU/aI,oHAEE,gBAAA,CACA,kBVgbN,CU9aM,oIACE,kBVgbR,CU3aE,uBAIE,+BAAA,CAHA,6CAAA,CACA,eAAA,CACA,kBV8aJ,CU3aI,wBANF,uBAOI,6CV8aJ,CACF,CW/eE,uBACE,sCXkfJ,CW/eE,wBACE,uCAAA,CACA,qCAAA,CACA,6BAAA,CACA,oCAAA,CACA,2CXifJ,CW/eI,oDACE,uCXifN,CW9eI,8DACE,wCAAA,CACA,gDXgfN,CW7eI,sDACE,yCX+eN,CW5eI,oHAEE,sCAAA,CACA,oCAAA,CACA,iCAAA,CACA,yCX6eN,CW3eM,kKACE,sCX6eR,CYlhBA,SAKE,6CAAA,CADA,uCAAA,CAHA,YAAA,CAKA,uCAAA,CAHA,2BAAA,CADA,iBAAA,CAMA,6BAAA,CACA,+CZohBF,CYlhBE,aAEE,uBAAA,CADA,sBAAA,CAEA,qBZohBJ,CYhhBI,oBACE,+CZkhBN,CY/gBI,wCACE,kDZihBN,CY5gBI,qBACE,+CZ8gBN,CY3gBI,yCACE,kDZ6gBN,CYxgBI,oBACE,gDZ0gBN,CYrgBI,0BACE,+CZugBN,CYpgBI,8CACE,iDZsgBN,CYjgBI,4CACE,mBAAA,CACA,iBZmgBN,CazjBA,SACE,sCb4jBF,CazjBI,wCACE,kDb2jBN,CavjBE,kBACE,+BbyjBJ,CavjBI,0CACE,wBAAA,CACA,2CbyjBN,CarjBE,oBACE,wBbujBJ,CarjBI,4CACE,+BAAA,CACA,yCAAA,CACA,sCbujBN,CanjBE,mBACE,6BbqjBJ,CanjBI,2CACE,yCbqjBN,CcvlBA,YAEE,QAAA,CACA,gDAAA,CAFA,QAAA,CCEA,yCf0lBF,CgB3lBA,SAIE,kBAAA,CAMA,oCAAA,CATA,mBAAA,CAKA,gEAAA,CACA,mCAAA,CAFA,UAAA,CAFA,kBAAA,CAKA,yBAAA,CACA,6CAAA,CAPA,iBAAA,CASA,mChBkmBF,CgBhmBE,aAGE,cAAA,CADA,cAAA,CADA,aAAA,CAGA,iBhBkmBJ,CgB/lBE,uBACE,ehBimBJ,CgB9lBE,kBACE,mCAAA,CACA,oBhBgmBJ,CgB9lBI,wBAEE,8BAAA,CADA,yBhBimBN,CgB7lBI,iDAGE,+BAAA,CADA,yBhB+lBN,CgB1lBE,oBACE,mChB4lBJ,CgB1lBI,0BACE,8BhB4lBN,CgBzlBI,qDAEE,+BhB0lBN,CgBtlBE,kBAGE,oCAAA,CAFA,mCAAA,CACA,oBhBylBJ,CgBtlBI,yEAGE,mCAAA,CACA,yBhBslBN,CgBllBE,8CAGE,6BhBklBJ,CgB/kBE,uBACE,2CAAA,CACA,kBhBilBJ,CiBzpBA,SACE,sBAAA,CACA,6CAAA,CACA,sBAAA,CACA,mBjB4pBF,CiB3pBE,wBALF,SAMI,mBjB8pBF,CACF,CiB5pBE,kBACE,uBjB8pBJ,CiB7pBI,wBAFF,kBAGI,2DjBgqBJ,CACF,CiB9pBI,wBACE,uCjBgqBN,CiB7pBI,iDAEE,uCjB8pBN,CiB1pBE,oBACE,2DjB4pBJ,CiB3pBI,wBAFF,oBAGI,2DjB8pBJ,CACF,CiB5pBI,0BACE,uCjB8pBN,CiB3pBI,qDAEE,uCjB4pBN,CiBxpBE,kBACE,sCAAA,CACA,uBjB0pBJ,CiBxpBI,yEAGE,2DjBwpBN,CiBvpBM,wBAJF,yEAKI,2DjB0pBN,CACF,CkBhtBE,iBAQE,kBAAA,CACA,uCAAA,CAHA,iEAAA,CACA,yCAAA,CALA,YAAA,CAEA,2BAAA,CACA,6BAAA,CAJA,iBAAA,CAEA,yBlBytBJ,CkBhtBE,6EACE,mDAAA,CACA,kBlBktBJ,CkB/sBE,+BACE,clBitBJ,CkB9sBE,mBAIE,2CAAA,CADA,+BAAA,CADA,gCAAA,CAGA,qFAAA,CAEA,cAAA,CANA,+BlBqtBJ,CkB5sBE,gCAGE,UAAA,CAFA,iBAAA,CACA,SAAA,CAEA,kBlB8sBJ,CmBhvBA,WACE,mCAAA,CACA,uCAAA,CACA,gDAAA,CACA,wBAAA,CACA,wCAAA,CACA,oBAAA,CACA,mBAAA,CACA,oBAAA,CACA,kCAAA,CACA,yBAAA,CACA,uBAAA,CACA,0BnBmvBF,CmBjvBE,yBACE,qCAAA,CACA,yCnBmvBJ,CmBjvBI,4CACE,oInBuvBN,CmB/uBE,0BACE,mCAAA,CACA,uCnBivBJ","file":"apollo.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel et Apollo) ****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{breakpoints.$breakpoint-sm}) { >>>>> more than  667px\n@media (width > #{breakpoints.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{breakpoints.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{breakpoints.$breakpoint-xl}) { >>>>> more than 1599px\n\n******************************************************************************* */\n\n.grid {\n  --col-gap: calc(8 / var(--font-size-base) * 1rem);\n  --row-gap: calc(16 / var(--font-size-base) * 1rem);\n  --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n  --cols: 4;\n  --start: auto;\n\n  display: grid;\n  margin-inline: var(--margin-inline);\n  grid-template-columns: repeat(var(--cols), 1fr);\n  gap: var(--row-gap) var(--col-gap);\n\n  @media (width > #{breakpoints.$breakpoint-sm}) {\n    --cols: 8;\n    --col-gap: calc(16 / var(--font-size-base) * 1rem);\n    --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --col-gap: calc(24 / var(--font-size-base) * 1rem);\n    --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n    --cols: 12;\n  }\n\n  @media (width > #{breakpoints.$breakpoint-lg}) {\n    --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-xl}) {\n    --margin-inline: auto;\n\n    max-width: 1320px;\n  }\n\n  > *,\n  & .subgrid,\n  & :has(> .subgrid) {\n    display: grid;\n    grid-column: var(--start) / span var(--cols);\n    align-content: start;\n    row-gap: var(--row-gap);\n  }\n\n  > * > * {\n    --start: auto;\n  }\n\n  .subgrid,\n  & :has(> .subgrid) {\n    grid-template-columns: subgrid;\n\n    > * {\n      grid-column: var(--start) / span var(--cols);\n    }\n  }\n}\n","@use \"./Grid/Grid\";\n@use \"./Grid/DebugGrid\";\n@use \"./Button/ButtonApollo\";\n@use \"./Spinner/SpinnerApollo\";\n@use \"./Form/ItemMessage/ItemMessageApollo\";\n@use \"./Form/ItemLabel/ItemLabelApollo\";\n@use \"./Form/TextInput/TextInputApollo\";\n@use \"./Icon/IconApollo\";\n@use \"./Divider/DividerApollo\";\n@use \"./Link/LinkApollo\";\n@use \"./Toggle/ToggleApollo\";\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","/* 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:\n    width, height, border, color, background-color, outline, 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    line-height: 1.25em;\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",".af-spinner {\n  --spinner-size: 40;\n  --spinner-border-size: 3;\n\n  display: flex;\n  container-type: inline-size;\n  width: calc(var(--spinner-size) * 1px);\n  height: calc(var(--spinner-size) * 1px);\n  margin: auto;\n  border: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-color);\n  border-top: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-top-color);\n  border-radius: 50%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","@use \"./SpinnerCommon\";\n\n.af-spinner {\n  --spinner-border-color: var(--axa-blue-100-20);\n  --spinner-border-top-color: var(--axa-blue-100);\n\n  width: calc(calc(var(--spinner-size) * 1px) - 8px);\n  height: calc(calc(var(--spinner-size) * 1px) - 8px);\n  border-left: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-top-color);\n\n  &--gray {\n    --spinner-border-color: var(--neutral-50-20);\n    --spinner-border-top-color: var(--neutral-100);\n  }\n\n  &--white {\n    --spinner-border-color: var(--white-20);\n    --spinner-border-top-color: var(--white);\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","@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.af-item-label {\n  display: grid;\n  width: 100%;\n  grid-template-areas:\n    \"label sidebutton\"\n    \"description sidebutton\"\n    \"more more\";\n  grid-template-columns: 1fr auto;\n  place-items: end start;\n  row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-label__description) {\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &:has(> .af-item-label__sidebutton) {\n    column-gap: calc(12 / var(--font-size-base) * 1rem);\n  }\n\n  > label {\n    grid-area: label;\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    color: var(--color-gray-900);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(24 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__sidebutton {\n    grid-area: sidebutton;\n    place-self: center end;\n\n    &:has(+ .af-item-label__description) {\n      align-self: end;\n    }\n  }\n\n  &__more {\n    grid-area: more;\n  }\n\n  &__description {\n    grid-area: description;\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25em;\n    color: var(--label-description-color);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n  --label-description-color: var(--neutral-80);\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n  &__input-container {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &__input-variant {\n    display: grid;\n    width: 100%;\n    padding: calc(16 / var(--font-size-base) * 1rem);\n    border: 1px solid var(--input-border-color);\n    border-radius: var(--input-border-radius);\n    grid-template-columns: auto min-content;\n    align-items: center;\n    color: var(--input-text-color);\n    background-color: var(--input-bg-color);\n\n    &:has(> input ~ *) {\n      column-gap: calc(8 / var(--font-size-base) * 1rem);\n    }\n\n    > input {\n      all: unset;\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n      font-weight: 600;\n      line-height: 1.25em;\n      color: var(--input-text-color);\n\n      &::placeholder {\n        font-weight: 400;\n        color: var(--input-text-placeholder-color);\n      }\n\n      & ~ * {\n        color: var(--input-text-icon-color);\n        fill: var(--input-text-icon-color);\n      }\n\n      @media (width > #{breakpoints.$breakpoint-md}) {\n        font-size: calc(18 / var(--font-size-base) * 1rem);\n      }\n    }\n\n    &:has(> input:is(:hover, :focus, :active)) {\n      box-shadow: 0 0 0 1px var(--input-border-color) inset;\n    }\n\n    &:has(> input:disabled),\n    &:has(> input:disabled):is(:hover, :focus, :active) {\n      box-shadow: unset;\n      cursor: not-allowed;\n\n      & > input ~ * {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  &__input-helper {\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25em;\n    color: var(--input-helper-color);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n  &__input-helper {\n    --input-helper-color: var(--neutral-80);\n  }\n\n  &__input-variant {\n    --input-border-color: var(--axa-blue-65);\n    --input-border-radius: var(--radius-8);\n    --input-bg-color: var(--white);\n    --input-text-color: var(--neutral-80);\n    --input-text-icon-color: var(--axa-blue-100);\n\n    &:has(> input:not([value=\"\"])) {\n      --input-border-color: var(--axa-blue-65);\n    }\n\n    &:has(> input:is(:hover, :focus, :active)) {\n      --input-border-color: var(--axa-blue-100);\n      --input-text-placeholder-color: var(--neutral-80);\n    }\n\n    &:has(> input[class*=\"--error\"]) {\n      --input-border-color: var(--red-alert-100);\n    }\n\n    &:has(> input:disabled),\n    &:has(> input:disabled):is(:hover, :focus, :active) {\n      --input-border-color: var(--neutral-50);\n      --input-text-color: var(--neutral-50);\n      --input-bg-color: var(--neutral-5);\n      --input-text-icon-color: var(--neutral-50);\n\n      + .af-form__input-helper {\n        --input-helper-color: var(--neutral-50);\n      }\n    }\n  }\n}\n",".af-icon {\r\n  display: grid;\r\n  width: fit-content;\r\n  padding: var(--icon-padding);\r\n  border-radius: var(--icon-border-radius);\r\n  background-color: var(--icon-background-color);\r\n  outline-color: var(--icon-outline-color);\r\n\r\n  --icon-background-color: transparent;\r\n  --icon-size: calc(24 / var(--font-size-base) * 1rem);\r\n\r\n  svg {\r\n    width: var(--icon-size);\r\n    height: var(--icon-size);\r\n    fill: var(--icon-fill);\r\n  }\r\n\r\n  &--large {\r\n    svg {\r\n      --icon-size: calc(40 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--medium {\r\n    svg {\r\n      --icon-size: calc(32 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--small {\r\n    svg {\r\n      --icon-width: calc(24 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--extra-small {\r\n    svg {\r\n      --icon-size: calc(16 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--secondary {\r\n    &.af-icon--has-background {\r\n      outline-style: solid;\r\n      outline-width: 1px;\r\n    }\r\n  }\r\n}\r\n","@use \"./IconCommon\";\r\n\r\n.af-icon {\r\n  --icon-border-radius: var(--radius-100);\r\n\r\n  &--small {\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--primary {\r\n    --icon-fill: var(--axa-blue-100);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-fill: var(--white);\r\n      --icon-background-color: var(--axa-blue-100);\r\n    }\r\n  }\r\n\r\n  &--secondary {\r\n    --icon-fill: var(--white);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-fill: var(--axa-blue-100);\r\n      --icon-background-color: var(--axa-blue-4);\r\n      --icon-outline-color: var(--axa-blue-4);\r\n    }\r\n  }\r\n\r\n  &--tertiary {\r\n    --icon-fill: var(--neutral-50);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-background-color: var(--axa-blue-4);\r\n    }\r\n  }\r\n}\r\n",".af-divider {\n  margin: 0;\n  border: 0;\n  border-top: 1px solid var(--divider-border-color);\n}\n","@use \"./DividerCommon\";\n\n.af-divider {\n  --divider-border-color: var(--axa-blue-20);\n}\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n.af-link {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  font-size: calc(var(--link-font-size) / var(--font-size-base) * 1rem);\r\n  font-weight: var(--link-font-weight);\r\n  text-decoration: underline;\r\n  text-underline-offset: var(--underline-offset);\r\n  color: var(--link-text-color-default);\r\n  fill: var(--link-text-color-default);\r\n\r\n  svg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n    aspect-ratio: 1;\r\n    fill: currentcolor;\r\n  }\r\n\r\n  &--openInNewTab {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &--default {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      text-decoration: underline;\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    line-height: var(--link-line-height);\r\n\r\n    &:hover {\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n    color: var(--link-text-color-inverse);\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      line-height: var(--link-line-height);\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    fill: var(--link-text-color-1);\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid var(--link-color-outline);\r\n    outline-offset: 3px;\r\n  }\r\n}\r\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n@use \"./LinkCommon\";\r\n\r\n.af-link {\r\n  --link-font-weight: 600;\r\n  --link-text-color-default: var(--axa-blue-100);\r\n  --underline-offset: 25%;\r\n  --link-font-size: 14;\r\n  @media (width > #{breakpoints.$breakpoint-md}) {\r\n    --link-font-size: 16;\r\n  }\r\n\r\n  &--default {\r\n    --link-line-height: 125%;\r\n    @media (width > #{breakpoints.$breakpoint-md}) {\r\n      --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--axa-blue-120);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--axa-blue-80);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    --link-line-height: calc(var(20) / var(--font-size-base) * 1rem);\r\n    @media (width > #{breakpoints.$breakpoint-md}) {\r\n      --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--axa-blue-120);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--axa-blue-80);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    --link-text-color-inverse: var(--white);\r\n    --link-line-height: 125%;\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      --link-line-height: calc(var(20) / var(--font-size-base) * 1rem);\r\n      @media (width > #{breakpoints.$breakpoint-md}) {\r\n        --link-line-height: calc(var(24) / var(--font-size-base) * 1rem);\r\n      }\r\n    }\r\n  }\r\n}\r\n",".af-toggle {\n  &__root {\n    position: relative;\n    display: flex;\n    width: var(--toggle-width);\n    height: var(--toggle-height);\n    padding: var(--toggle-padding);\n    border: var(--toggle-border-size) solid var(--toggle-border-color);\n    border-radius: var(--toggle-border-radius);\n    align-items: center;\n    background-color: var(--toggle-bg-color);\n  }\n\n  &:has(:focus-within, :focus-visible, :focus, :active) &__root {\n    outline: 2px solid var(--toggle-focus-outline-color);\n    outline-offset: 2px;\n  }\n\n  &:has(:hover, :active) {\n    cursor: pointer;\n  }\n\n  &__handle {\n    width: var(--toggle-handle-size);\n    height: var(--toggle-handle-size);\n    border-radius: var(--radius-100);\n    background-color: var(--toggle-handle-color);\n    transform: translateX(var(--toggle-handle-position))\n      scale(var(--toggle-handle-scale));\n    transition: 200ms;\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    clip: rect(0, 0, 0, 0);\n  }\n}\n","@use \"./ToggleCommon\";\n\n.af-toggle {\n  --toggle-bg-color: var(--neutral-50);\n  --toggle-border-color: var(--neutral-50);\n  --toggle-focus-outline-color: var(--axa-blue-100);\n  --toggle-border-size: 1px;\n  --toggle-border-radius: var(--radius-100);\n  --toggle-padding: 2px;\n  --toggle-width: 42px;\n  --toggle-height: 24px;\n  --toggle-handle-color: var(--white);\n  --toggle-handle-size: 20px;\n  --toggle-handle-scale: 1;\n  --toggle-handle-position: 0;\n\n  &:has(:checked) {\n    --toggle-bg-color: var(--axa-blue-100);\n    --toggle-border-color: var(--axa-blue-100);\n\n    .af-toggle__handle {\n      --toggle-handle-position: calc(\n        var(--toggle-width) - var(--toggle-handle-size) - calc(\n            var(--toggle-padding) * 2\n          ) - var(--toggle-border-size)\n      );\n    }\n  }\n\n  &:has(:disabled) {\n    --toggle-bg-color: var(--neutral-25);\n    --toggle-border-color: var(--neutral-25);\n  }\n}\n"]}

package/dist/apollo.scss

@@ -7,4 +7,5 @@
 @use "./Form/TextInput/TextInputApollo";
 @use "./Icon/IconApollo";
 @use "./Divider/DividerApollo";
+@use "./Link/LinkApollo";
 @use "./Toggle/ToggleApollo";

package/dist/look-and-feel.css

@@ -1 +1 @@
-.grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}.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}.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);line-height:1.25em}.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{--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:hover{--button-bg-color-default:var(--color-btn-business-dark)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--color-btn-business-light)}.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{--button-bg-color-default:var(--color-btn-tertiary-bg-lighter);--button-text-color-default:var(--color-axa)}.af-spinner{--spinner-size:40;--spinner-border-size:3;align-items:center;animation:spin 2s linear infinite;border:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-color);border-radius:50%;border-top:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);container-type:inline-size;display:flex;flex-direction:column;height:calc(var(--spinner-size)*1px);justify-content:center;margin:auto;width:calc(var(--spinner-size)*1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.af-spinner{--spinner-border-color:color-mix(in srgb,var(--color-axa),#0000 80%);--spinner-border-top-color:var(--color-axa)}.af-spinner--24{--spinner-border-size:2}.af-spinner--40{--spinner-border-size:4}.af-spinner--gray{--spinner-border-color:color-mix(in srgb,var(--color-gray),#0000 80%);--spinner-border-top-color:var(--color-gray)}.af-spinner--white{--spinner-border-color:color-mix(in srgb,var(--color-white),#0000 80%);--spinner-border-top-color:var(--color-white)}.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)}.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--color-gray-700)}.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-helper{--input-helper-color:var(--color-gray-700)}.af-form__input-variant{--input-border-color:var(--color-gray-700);--input-border-radius:var(--default-border-radius);--input-bg-color:var(--color-white);--input-text-color:var(--color-gray-900);--input-text-icon-color:var(--color-gray-900);--input-text-placeholder-color:var(--color-gray-700)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--color-axa)}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){--input-border-color:var(--color-axa);--input-text-placeholder-color:var(--color-gray-900)}.af-form__input-variant:has(>input[class*="--error"]){--input-border-color:var(--color-red-700)}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){--input-border-color:var(--color-gray-400);--input-text-color:var(--color-gray-500);--input-bg-color:var(--color-gray-200);--input-text-icon-color:var(--color-gray-500)}.af-form__input-variant:has(>input:disabled)+.af-form__input-helper,.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)+.af-form__input-helper{--input-helper-color:var(--color-gray-500)}.af-icon{background-color:var(--icon-background-color);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content;--icon-background-color:#0000;--icon-size:calc(24/var(--font-size-base)*1rem)}.af-icon svg{height:var(--icon-size);width:var(--icon-size);fill:var(--icon-fill)}.af-icon--large svg{--icon-size:calc(40/var(--font-size-base)*1rem)}.af-icon--large.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--medium svg{--icon-size:calc(32/var(--font-size-base)*1rem)}.af-icon--medium.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--small svg{--icon-width:calc(24/var(--font-size-base)*1rem)}.af-icon--extra-small svg{--icon-size:calc(16/var(--font-size-base)*1rem)}.af-icon--extra-small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--secondary.af-icon--has-background{outline-style:solid;outline-width:1px}.af-icon{--icon-border-radius:var(--radius-12)}.af-icon--small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--primary{--icon-fill:var(--color-axa)}.af-icon--primary.af-icon--has-background{--icon-fill:var(--color-white);--icon-background-color:var(--color-axa)}.af-icon--secondary{--icon-fill:var(--color-white)}.af-icon--secondary.af-icon--has-background{--icon-fill:var(--color-axa);--icon-background-color:var(--color-white);--icon-outline-color:var(--color-gray-300)}.af-icon--tertiary{--icon-fill:var(--color-gray-500)}.af-icon--tertiary.af-icon--has-background{--icon-background-color:var(--color-gray-200)}.af-divider{border:0;border-top:1px solid var(--divider-border-color);margin:0;--divider-border-color:var(--color-gray-300)}.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-within,:focus-visible,:focus,:active) .af-toggle__root{outline:2px solid var(--toggle-focus-outline-color);outline-offset:2px}.af-toggle:has(:hover,:active){cursor:pointer}.af-toggle__handle{background-color:var(--toggle-handle-color);border-radius:var(--radius-100);height:var(--toggle-handle-size);transform:translateX(var(--toggle-handle-position)) scale(var(--toggle-handle-scale));transition:.2s;width:var(--toggle-handle-size)}.af-toggle input[type=checkbox]{height:1px;position:absolute;width:1px;clip:rect(0,0,0,0)}.af-toggle{--toggle-bg-color:var(--color-blue-200);--toggle-border-color:var(--color-gray-700);--toggle-focus-outline-color:var(--color-blue-800);--toggle-border-radius:var(--radius-32);--toggle-border-size:2px;--toggle-padding:4px;--toggle-width:52px;--toggle-height:32px;--toggle-handle-color:var(--color-gray-700);--toggle-handle-size:16px;--toggle-handle-position:calc(var(--toggle-border-size)*2);--toggle-handle-scale:1}.af-toggle:has(:checked){--toggle-bg-color:var(--color-blue-800);--toggle-border-color:var(--togglecolor-blue-800)}.af-toggle:has(:checked) .af-toggle__handle{--toggle-handle-scale:1.5;--toggle-handle-color:var(--color-white);--toggle-handle-position:calc(var(--toggle-width) - var(--toggle-padding)*2 - var(--toggle-handle-size)*var(--toggle-handle-scale) + var(--toggle-border-size)*2)}.af-toggle:has(:disabled){--toggle-bg-color:var(--color-white);--toggle-border-color:var(--color-gray-400);--toggle-handle-color:var(--color-gray-400)}.af-toggle:has(:disabled:checked){--toggle-bg-color:var(--color-gray-400);--toggle-border-color:var(--color-gray-400)}
+.grid{--col-gap:calc(8/var(--font-size-base)*1rem);--row-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(16/var(--font-size-base)*1rem);--cols:4;--start:auto;display:grid;gap:var(--row-gap) var(--col-gap);grid-template-columns:repeat(var(--cols),1fr);margin-inline:var(--margin-inline)}@media (width > 667px){.grid{--cols:8;--col-gap:calc(16/var(--font-size-base)*1rem);--margin-inline:calc(60/var(--font-size-base)*1rem)}}@media (width > 1023px){.grid{--col-gap:calc(24/var(--font-size-base)*1rem);--margin-inline:calc(80/var(--font-size-base)*1rem);--cols:12}}@media (width > 1279px){.grid{--margin-inline:calc(120/var(--font-size-base)*1rem)}}@media (width > 1599px){.grid{--margin-inline:auto;max-width:1320px}}.grid .subgrid,.grid :has(>.subgrid),.grid>*{align-content:start;display:grid;grid-column:var(--start)/span var(--cols);row-gap:var(--row-gap)}.grid>*>*{--start:auto}.grid .subgrid,.grid :has(>.subgrid){grid-template-columns:subgrid}.grid .subgrid>*,.grid :has(>.subgrid)>*{grid-column:var(--start)/span var(--cols)}.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}.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);line-height:1.25em}.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{--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:hover{--button-bg-color-default:var(--color-btn-business-dark)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--color-btn-business-light)}.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{--button-bg-color-default:var(--color-btn-tertiary-bg-lighter);--button-text-color-default:var(--color-axa)}.af-spinner{--spinner-size:40;--spinner-border-size:3;align-items:center;animation:spin 2s linear infinite;border:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-color);border-radius:50%;border-top:calc(var(--spinner-border-size)*1px) solid var(--spinner-border-top-color);container-type:inline-size;display:flex;flex-direction:column;height:calc(var(--spinner-size)*1px);justify-content:center;margin:auto;width:calc(var(--spinner-size)*1px)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.af-spinner{--spinner-border-color:color-mix(in srgb,var(--color-axa),#0000 80%);--spinner-border-top-color:var(--color-axa)}.af-spinner--24{--spinner-border-size:2}.af-spinner--40{--spinner-border-size:4}.af-spinner--gray{--spinner-border-color:color-mix(in srgb,var(--color-gray),#0000 80%);--spinner-border-top-color:var(--color-gray)}.af-spinner--white{--spinner-border-color:color-mix(in srgb,var(--color-white),#0000 80%);--spinner-border-top-color:var(--color-white)}.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)}.af-item-label{display:grid;grid-template-areas:"label sidebutton" "description sidebutton" "more more";grid-template-columns:1fr auto;place-items:end start;row-gap:calc(2/var(--font-size-base)*1rem);width:100%}.af-item-label:has(>.af-item-label__description){row-gap:calc(4/var(--font-size-base)*1rem)}.af-item-label:has(>.af-item-label__sidebutton){column-gap:calc(12/var(--font-size-base)*1rem)}.af-item-label>label{color:var(--color-gray-900);font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;grid-area:label;line-height:calc(20/var(--font-size-base)*1rem)}@media (width > 1023px){.af-item-label>label{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(24/var(--font-size-base)*1rem)}}.af-item-label__sidebutton{grid-area:sidebutton;place-self:center end}.af-item-label__sidebutton:has(+.af-item-label__description){align-self:end}.af-item-label__more{grid-area:more}.af-item-label__description{color:var(--label-description-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;grid-area:description;line-height:1.25em}@media (width > 1023px){.af-item-label__description{font-size:calc(16/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}}.af-item-label{--label-description-color:var(--color-gray-700)}.af-form__input-container{align-items:flex-start;display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant{align-items:center;background-color:var(--input-bg-color);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);color:var(--input-text-color);display:grid;grid-template-columns:auto min-content;padding:calc(16/var(--font-size-base)*1rem);width:100%}.af-form__input-variant:has(>input~*){column-gap:calc(8/var(--font-size-base)*1rem)}.af-form__input-variant>input{all:unset;color:var(--input-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:600;line-height:1.25em}.af-form__input-variant>input::placeholder{color:var(--input-text-placeholder-color);font-weight:400}.af-form__input-variant>input~*{color:var(--input-text-icon-color);fill:var(--input-text-icon-color)}@media (width > 1023px){.af-form__input-variant>input{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){box-shadow:0 0 0 1px var(--input-border-color) inset}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){box-shadow:unset;cursor:not-allowed}.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)>input~*,.af-form__input-variant:has(>input:disabled)>input~*{cursor:not-allowed}.af-form__input-helper{color:var(--input-helper-color);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;line-height:1.25em}@media (width > 1023px){.af-form__input-helper{font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-helper{--input-helper-color:var(--color-gray-700)}.af-form__input-variant{--input-border-color:var(--color-gray-700);--input-border-radius:var(--default-border-radius);--input-bg-color:var(--color-white);--input-text-color:var(--color-gray-900);--input-text-icon-color:var(--color-gray-900);--input-text-placeholder-color:var(--color-gray-700)}.af-form__input-variant:has(>input:not([value=""])){--input-border-color:var(--color-axa)}.af-form__input-variant:has(>input:is(:hover,:focus,:active)){--input-border-color:var(--color-axa);--input-text-placeholder-color:var(--color-gray-900)}.af-form__input-variant:has(>input[class*="--error"]){--input-border-color:var(--color-red-700)}.af-form__input-variant:has(>input:disabled),.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active){--input-border-color:var(--color-gray-400);--input-text-color:var(--color-gray-500);--input-bg-color:var(--color-gray-200);--input-text-icon-color:var(--color-gray-500)}.af-form__input-variant:has(>input:disabled)+.af-form__input-helper,.af-form__input-variant:has(>input:disabled):is(:hover,:focus,:active)+.af-form__input-helper{--input-helper-color:var(--color-gray-500)}.af-icon{background-color:var(--icon-background-color);border-radius:var(--icon-border-radius);display:grid;outline-color:var(--icon-outline-color);padding:var(--icon-padding);width:fit-content;--icon-background-color:#0000;--icon-size:calc(24/var(--font-size-base)*1rem)}.af-icon svg{height:var(--icon-size);width:var(--icon-size);fill:var(--icon-fill)}.af-icon--large svg{--icon-size:calc(40/var(--font-size-base)*1rem)}.af-icon--large.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--medium svg{--icon-size:calc(32/var(--font-size-base)*1rem)}.af-icon--medium.af-icon--has-background{--icon-padding:calc(12/var(--font-size-base)*1rem)}.af-icon--small svg{--icon-width:calc(24/var(--font-size-base)*1rem)}.af-icon--extra-small svg{--icon-size:calc(16/var(--font-size-base)*1rem)}.af-icon--extra-small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--secondary.af-icon--has-background{outline-style:solid;outline-width:1px}.af-icon{--icon-border-radius:var(--radius-12)}.af-icon--small.af-icon--has-background{--icon-padding:calc(8/var(--font-size-base)*1rem)}.af-icon--primary{--icon-fill:var(--color-axa)}.af-icon--primary.af-icon--has-background{--icon-fill:var(--color-white);--icon-background-color:var(--color-axa)}.af-icon--secondary{--icon-fill:var(--color-white)}.af-icon--secondary.af-icon--has-background{--icon-fill:var(--color-axa);--icon-background-color:var(--color-white);--icon-outline-color:var(--color-gray-300)}.af-icon--tertiary{--icon-fill:var(--color-gray-500)}.af-icon--tertiary.af-icon--has-background{--icon-background-color:var(--color-gray-200)}.af-divider{border:0;border-top:1px solid var(--divider-border-color);margin:0;--divider-border-color:var(--color-gray-300)}.af-link{align-items:center;color:var(--link-text-color-default);display:inline-flex;font-size:calc(var(--link-font-size)/var(--font-size-base)*1rem);font-weight:var(--link-font-weight);gap:.25rem;height:fit-content;text-decoration:underline;text-underline-offset:var(--underline-offset);width:fit-content;fill:var(--link-text-color-default)}.af-link svg{aspect-ratio:1;height:1.25rem;width:1.25rem;fill:currentcolor}.af-link--openInNewTab{font-weight:600}.af-link--default{line-height:var(--link-line-height);text-decoration:none}.af-link--default:hover{color:var(--link-text-color-1);text-decoration:underline}.af-link--default:active,.af-link--default:focus{color:var(--link-color-outline);text-decoration:underline}.af-link--underline{line-height:var(--link-line-height)}.af-link--underline:hover{color:var(--link-text-color-1)}.af-link--underline:active,.af-link--underline:focus{color:var(--link-color-outline)}.af-link--inverse{color:var(--link-text-color-inverse);line-height:var(--link-line-height);text-decoration:none}.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{line-height:var(--link-line-height);text-decoration:underline}.af-link:active,.af-link:focus,.af-link:hover{fill:var(--link-text-color-1)}.af-link:focus-visible{outline:2px solid var(--link-color-outline);outline-offset:3px}.af-link{--link-font-weight:400;--link-text-color-default:var(--color-axa);--underline-offset:0%;--link-font-size:16}@media (width > 1023px){.af-link{--link-font-size:18}}.af-link--default{--link-line-height:125%}.af-link--default:hover{--link-text-color-1:var(--color-blue-1)}.af-link--default:active,.af-link--default:focus{--link-color-outline:var(--color-btn-light)}.af-link--underline{--link-line-height:125%}.af-link--underline:hover{--link-text-color-1:var(--color-blue-1)}.af-link--underline:active,.af-link--underline:focus{--link-color-outline:var(--color-btn-light)}.af-link--inverse{--link-text-color-inverse:var(--color-white)}.af-link--inverse,.af-link--inverse:active,.af-link--inverse:focus,.af-link--inverse:hover{--link-line-height:125%}.af-toggle__root{align-items:center;background-color:var(--toggle-bg-color);border:var(--toggle-border-size) solid var(--toggle-border-color);border-radius:var(--toggle-border-radius);display:flex;height:var(--toggle-height);padding:var(--toggle-padding);position:relative;width:var(--toggle-width)}.af-toggle:has(:focus-within,:focus-visible,:focus,:active) .af-toggle__root{outline:2px solid var(--toggle-focus-outline-color);outline-offset:2px}.af-toggle:has(:hover,:active){cursor:pointer}.af-toggle__handle{background-color:var(--toggle-handle-color);border-radius:var(--radius-100);height:var(--toggle-handle-size);transform:translateX(var(--toggle-handle-position)) scale(var(--toggle-handle-scale));transition:.2s;width:var(--toggle-handle-size)}.af-toggle input[type=checkbox]{height:1px;position:absolute;width:1px;clip:rect(0,0,0,0)}.af-toggle{--toggle-bg-color:var(--color-blue-200);--toggle-border-color:var(--color-gray-700);--toggle-focus-outline-color:var(--color-blue-800);--toggle-border-radius:var(--radius-32);--toggle-border-size:2px;--toggle-padding:4px;--toggle-width:52px;--toggle-height:32px;--toggle-handle-color:var(--color-gray-700);--toggle-handle-size:16px;--toggle-handle-position:calc(var(--toggle-border-size)*2);--toggle-handle-scale:1}.af-toggle:has(:checked){--toggle-bg-color:var(--color-blue-800);--toggle-border-color:var(--togglecolor-blue-800)}.af-toggle:has(:checked) .af-toggle__handle{--toggle-handle-scale:1.5;--toggle-handle-color:var(--color-white);--toggle-handle-position:calc(var(--toggle-width) - var(--toggle-padding)*2 - var(--toggle-handle-size)*var(--toggle-handle-scale) + var(--toggle-border-size)*2)}.af-toggle:has(:disabled){--toggle-bg-color:var(--color-white);--toggle-border-color:var(--color-gray-400);--toggle-handle-color:var(--color-gray-400)}.af-toggle:has(:disabled:checked){--toggle-bg-color:var(--color-gray-400);--toggle-border-color:var(--color-gray-400)}

package/dist/look-and-feel.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Grid/Grid.scss","../src/look-and-feel.scss","../src/Grid/DebugGrid.scss","../src/Button/ButtonCommon.scss","../src/Button/ButtonLF.scss","../src/Spinner/SpinnerCommon.scss","../src/Spinner/SpinnerLF.scss","../src/Form/ItemMessage/ItemMessageCommon.scss","../src/Form/ItemMessage/ItemMessageLF.scss","../src/Form/ItemLabel/ItemLabelCommon.scss","../src/Form/ItemLabel/ItemLabelLF.scss","../src/Form/TextInput/TextInputCommon.scss","../src/Form/TextInput/TextInputLF.scss","../src/Icon/IconCommon.scss","../src/Icon/IconLF.scss","../src/Divider/DividerCommon.scss","../src/Divider/DividerLF.scss","../src/Toggle/ToggleCommon.scss","../src/Toggle/ToggleLF.scss"],"names":[],"mappings":"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","file":"look-and-feel.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel et Apollo) ****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{breakpoints.$breakpoint-sm}) { >>>>> more than  667px\n@media (width > #{breakpoints.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{breakpoints.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{breakpoints.$breakpoint-xl}) { >>>>> more than 1599px\n\n******************************************************************************* */\n\n.grid {\n  --col-gap: calc(8 / var(--font-size-base) * 1rem);\n  --row-gap: calc(16 / var(--font-size-base) * 1rem);\n  --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n  --cols: 4;\n  --start: auto;\n\n  display: grid;\n  margin-inline: var(--margin-inline);\n  grid-template-columns: repeat(var(--cols), 1fr);\n  gap: var(--row-gap) var(--col-gap);\n\n  @media (width > #{breakpoints.$breakpoint-sm}) {\n    --cols: 8;\n    --col-gap: calc(16 / var(--font-size-base) * 1rem);\n    --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --col-gap: calc(24 / var(--font-size-base) * 1rem);\n    --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n    --cols: 12;\n  }\n\n  @media (width > #{breakpoints.$breakpoint-lg}) {\n    --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-xl}) {\n    --margin-inline: auto;\n\n    max-width: 1320px;\n  }\n\n  > *,\n  & .subgrid,\n  & :has(> .subgrid) {\n    display: grid;\n    grid-column: var(--start) / span var(--cols);\n    align-content: start;\n    row-gap: var(--row-gap);\n  }\n\n  > * > * {\n    --start: auto;\n  }\n\n  .subgrid,\n  & :has(> .subgrid) {\n    grid-template-columns: subgrid;\n\n    > * {\n      grid-column: var(--start) / span var(--cols);\n    }\n  }\n}\n","@use \"./Grid/Grid\";\n@use \"./Grid/DebugGrid\";\n@use \"./Button/ButtonLF\";\n@use \"./Spinner/SpinnerLF\";\n@use \"./Form/ItemMessage/ItemMessageLF\";\n@use \"./Form/ItemLabel/ItemLabelLF\";\n@use \"./Form/TextInput/TextInputLF\";\n@use \"./Icon/IconLF\";\n@use \"./Divider/DividerLF\";\n@use \"./Toggle/ToggleLF\";\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","/* 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:\n    width, height, border, color, background-color, outline, 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    line-height: 1.25em;\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    --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    &:hover {\n      --button-bg-color-default: var(--color-btn-business-dark);\n    }\n\n    &:active {\n      --button-bg-color-default: var(--color-btn-business-light);\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    &:active {\n      --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n      --button-text-color-default: var(--color-axa);\n    }\n  }\n}\n",".af-spinner {\n  --spinner-size: 40;\n  --spinner-border-size: 3;\n\n  display: flex;\n  container-type: inline-size;\n  width: calc(var(--spinner-size) * 1px);\n  height: calc(var(--spinner-size) * 1px);\n  margin: auto;\n  border: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-color);\n  border-top: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-top-color);\n  border-radius: 50%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","@use \"./SpinnerCommon\";\n\n.af-spinner {\n  --spinner-border-color: color-mix(in srgb, var(--color-axa), transparent 80%);\n  --spinner-border-top-color: var(--color-axa);\n\n  &--24 {\n    --spinner-border-size: 2;\n  }\n\n  &--40 {\n    --spinner-border-size: 4;\n  }\n\n  &--gray {\n    --spinner-border-color: color-mix(\n      in srgb,\n      var(--color-gray),\n      transparent 80%\n    );\n    --spinner-border-top-color: var(--color-gray);\n  }\n\n  &--white {\n    --spinner-border-color: color-mix(\n      in srgb,\n      var(--color-white),\n      transparent 80%\n    );\n    --spinner-border-top-color: var(--color-white);\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","@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.af-item-label {\n  display: grid;\n  width: 100%;\n  grid-template-areas:\n    \"label sidebutton\"\n    \"description sidebutton\"\n    \"more more\";\n  grid-template-columns: 1fr auto;\n  place-items: end start;\n  row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-label__description) {\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &:has(> .af-item-label__sidebutton) {\n    column-gap: calc(12 / var(--font-size-base) * 1rem);\n  }\n\n  > label {\n    grid-area: label;\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    color: var(--color-gray-900);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(24 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__sidebutton {\n    grid-area: sidebutton;\n    place-self: center end;\n\n    &:has(+ .af-item-label__description) {\n      align-self: end;\n    }\n  }\n\n  &__more {\n    grid-area: more;\n  }\n\n  &__description {\n    grid-area: description;\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25em;\n    color: var(--label-description-color);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n  --label-description-color: var(--color-gray-700);\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n  &__input-container {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &__input-variant {\n    display: grid;\n    width: 100%;\n    padding: calc(16 / var(--font-size-base) * 1rem);\n    border: 1px solid var(--input-border-color);\n    border-radius: var(--input-border-radius);\n    grid-template-columns: auto min-content;\n    align-items: center;\n    color: var(--input-text-color);\n    background-color: var(--input-bg-color);\n\n    &:has(> input ~ *) {\n      column-gap: calc(8 / var(--font-size-base) * 1rem);\n    }\n\n    > input {\n      all: unset;\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n      font-weight: 600;\n      line-height: 1.25em;\n      color: var(--input-text-color);\n\n      &::placeholder {\n        font-weight: 400;\n        color: var(--input-text-placeholder-color);\n      }\n\n      & ~ * {\n        color: var(--input-text-icon-color);\n        fill: var(--input-text-icon-color);\n      }\n\n      @media (width > #{breakpoints.$breakpoint-md}) {\n        font-size: calc(18 / var(--font-size-base) * 1rem);\n      }\n    }\n\n    &:has(> input:is(:hover, :focus, :active)) {\n      box-shadow: 0 0 0 1px var(--input-border-color) inset;\n    }\n\n    &:has(> input:disabled),\n    &:has(> input:disabled):is(:hover, :focus, :active) {\n      box-shadow: unset;\n      cursor: not-allowed;\n\n      & > input ~ * {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  &__input-helper {\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25em;\n    color: var(--input-helper-color);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n  &__input-helper {\n    --input-helper-color: var(--color-gray-700);\n  }\n\n  &__input-variant {\n    --input-border-color: var(--color-gray-700);\n    --input-border-radius: var(--default-border-radius);\n    --input-bg-color: var(--color-white);\n    --input-text-color: var(--color-gray-900);\n    --input-text-icon-color: var(--color-gray-900);\n    --input-text-placeholder-color: var(--color-gray-700);\n\n    &:has(> input:not([value=\"\"])) {\n      --input-border-color: var(--color-axa);\n    }\n\n    &:has(> input:is(:hover, :focus, :active)) {\n      --input-border-color: var(--color-axa);\n      --input-text-placeholder-color: var(--color-gray-900);\n    }\n\n    &:has(> input[class*=\"--error\"]) {\n      --input-border-color: var(--color-red-700);\n    }\n\n    &:has(> input:disabled),\n    &:has(> input:disabled):is(:hover, :focus, :active) {\n      --input-border-color: var(--color-gray-400);\n      --input-text-color: var(--color-gray-500);\n      --input-bg-color: var(--color-gray-200);\n      --input-text-icon-color: var(--color-gray-500);\n\n      + .af-form__input-helper {\n        --input-helper-color: var(--color-gray-500);\n      }\n    }\n  }\n}\n",".af-icon {\r\n  display: grid;\r\n  width: fit-content;\r\n  padding: var(--icon-padding);\r\n  border-radius: var(--icon-border-radius);\r\n  background-color: var(--icon-background-color);\r\n  outline-color: var(--icon-outline-color);\r\n\r\n  --icon-background-color: transparent;\r\n  --icon-size: calc(24 / var(--font-size-base) * 1rem);\r\n\r\n  svg {\r\n    width: var(--icon-size);\r\n    height: var(--icon-size);\r\n    fill: var(--icon-fill);\r\n  }\r\n\r\n  &--large {\r\n    svg {\r\n      --icon-size: calc(40 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--medium {\r\n    svg {\r\n      --icon-size: calc(32 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--small {\r\n    svg {\r\n      --icon-width: calc(24 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--extra-small {\r\n    svg {\r\n      --icon-size: calc(16 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--secondary {\r\n    &.af-icon--has-background {\r\n      outline-style: solid;\r\n      outline-width: 1px;\r\n    }\r\n  }\r\n}\r\n","@use \"./IconCommon\";\r\n\r\n.af-icon {\r\n  --icon-border-radius: var(--radius-12);\r\n\r\n  &--small {\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--primary {\r\n    --icon-fill: var(--color-axa);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-fill: var(--color-white);\r\n      --icon-background-color: var(--color-axa);\r\n    }\r\n  }\r\n\r\n  &--secondary {\r\n    --icon-fill: var(--color-white);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-fill: var(--color-axa);\r\n      --icon-background-color: var(--color-white);\r\n      --icon-outline-color: var(--color-gray-300);\r\n    }\r\n  }\r\n\r\n  &--tertiary {\r\n    --icon-fill: var(--color-gray-500);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-background-color: var(--color-gray-200);\r\n    }\r\n  }\r\n}\r\n",".af-divider {\n  margin: 0;\n  border: 0;\n  border-top: 1px solid var(--divider-border-color);\n}\n","@use \"./DividerCommon\";\n\n.af-divider {\n  --divider-border-color: var(--color-gray-300);\n}\n",".af-toggle {\n  &__root {\n    position: relative;\n    display: flex;\n    width: var(--toggle-width);\n    height: var(--toggle-height);\n    padding: var(--toggle-padding);\n    border: var(--toggle-border-size) solid var(--toggle-border-color);\n    border-radius: var(--toggle-border-radius);\n    align-items: center;\n    background-color: var(--toggle-bg-color);\n  }\n\n  &:has(:focus-within, :focus-visible, :focus, :active) &__root {\n    outline: 2px solid var(--toggle-focus-outline-color);\n    outline-offset: 2px;\n  }\n\n  &:has(:hover, :active) {\n    cursor: pointer;\n  }\n\n  &__handle {\n    width: var(--toggle-handle-size);\n    height: var(--toggle-handle-size);\n    border-radius: var(--radius-100);\n    background-color: var(--toggle-handle-color);\n    transform: translateX(var(--toggle-handle-position))\n      scale(var(--toggle-handle-scale));\n    transition: 200ms;\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    clip: rect(0, 0, 0, 0);\n  }\n}\n","@use \"./ToggleCommon\";\n\n.af-toggle {\n  --toggle-bg-color: var(--color-blue-200);\n  --toggle-border-color: var(--color-gray-700);\n  --toggle-focus-outline-color: var(--color-blue-800);\n  --toggle-border-radius: var(--radius-32);\n  --toggle-border-size: 2px;\n  --toggle-padding: 4px;\n  --toggle-width: 52px;\n  --toggle-height: 32px;\n  --toggle-handle-color: var(--color-gray-700);\n  --toggle-handle-size: 16px;\n  --toggle-handle-position: calc(var(--toggle-border-size) * 2);\n  --toggle-handle-scale: 1;\n\n  &:has(:checked) {\n    --toggle-bg-color: var(--color-blue-800);\n    --toggle-border-color: var(--togglecolor-blue-800);\n\n    .af-toggle__handle {\n      --toggle-handle-scale: 1.5;\n      --toggle-handle-color: var(--color-white);\n      --toggle-handle-position: calc(\n        var(--toggle-width) - (var(--toggle-padding) * 2) -\n          (var(--toggle-handle-size) * var(--toggle-handle-scale)) +\n          var(--toggle-border-size) * 2\n      );\n    }\n  }\n\n  &:has(:disabled) {\n    --toggle-bg-color: var(--color-white);\n    --toggle-border-color: var(--color-gray-400);\n    --toggle-handle-color: var(--color-gray-400);\n  }\n\n  &:has(:disabled:checked) {\n    --toggle-bg-color: var(--color-gray-400);\n    --toggle-border-color: var(--color-gray-400);\n  }\n}\n"]}
+{"version":3,"sources":["../src/Grid/Grid.scss","../src/look-and-feel.scss","../src/Grid/DebugGrid.scss","../src/Button/ButtonCommon.scss","../src/Button/ButtonLF.scss","../src/Spinner/SpinnerCommon.scss","../src/Spinner/SpinnerLF.scss","../src/Form/ItemMessage/ItemMessageCommon.scss","../src/Form/ItemMessage/ItemMessageLF.scss","../src/Form/ItemLabel/ItemLabelCommon.scss","../src/Form/ItemLabel/ItemLabelLF.scss","../src/Form/TextInput/TextInputCommon.scss","../src/Form/TextInput/TextInputLF.scss","../src/Icon/IconCommon.scss","../src/Icon/IconLF.scss","../src/Divider/DividerCommon.scss","../src/Divider/DividerLF.scss","../src/Link/LinkCommon.scss","../src/Link/LinkLF.scss","../src/Toggle/ToggleCommon.scss","../src/Toggle/ToggleLF.scss"],"names":[],"mappings":"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","file":"look-and-feel.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n/* GRID SYSTEM DESIGN SYSTEM AXA FRANCE (Look & Feel et Apollo) ****************\n\nSee the documentation : https://zeroheight.com/54c5bd254/v/latest/p/48d0d1-grille\n\nIts MOBILE FIRST approach, so the defauts values target the mobile.\n\n@media (width > #{breakpoints.$breakpoint-sm}) { >>>>> more than  667px\n@media (width > #{breakpoints.$breakpoint-md}) { >>>>> more than 1023px\n@media (width > #{breakpoints.$breakpoint-lg}) { >>>>> more than 1279px\n@media (width > #{breakpoints.$breakpoint-xl}) { >>>>> more than 1599px\n\n******************************************************************************* */\n\n.grid {\n  --col-gap: calc(8 / var(--font-size-base) * 1rem);\n  --row-gap: calc(16 / var(--font-size-base) * 1rem);\n  --margin-inline: calc(16 / var(--font-size-base) * 1rem);\n  --cols: 4;\n  --start: auto;\n\n  display: grid;\n  margin-inline: var(--margin-inline);\n  grid-template-columns: repeat(var(--cols), 1fr);\n  gap: var(--row-gap) var(--col-gap);\n\n  @media (width > #{breakpoints.$breakpoint-sm}) {\n    --cols: 8;\n    --col-gap: calc(16 / var(--font-size-base) * 1rem);\n    --margin-inline: calc(60 / var(--font-size-base) * 1rem);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    --col-gap: calc(24 / var(--font-size-base) * 1rem);\n    --margin-inline: calc(80 / var(--font-size-base) * 1rem);\n    --cols: 12;\n  }\n\n  @media (width > #{breakpoints.$breakpoint-lg}) {\n    --margin-inline: calc(120 / var(--font-size-base) * 1rem);\n  }\n\n  @media (width > #{breakpoints.$breakpoint-xl}) {\n    --margin-inline: auto;\n\n    max-width: 1320px;\n  }\n\n  > *,\n  & .subgrid,\n  & :has(> .subgrid) {\n    display: grid;\n    grid-column: var(--start) / span var(--cols);\n    align-content: start;\n    row-gap: var(--row-gap);\n  }\n\n  > * > * {\n    --start: auto;\n  }\n\n  .subgrid,\n  & :has(> .subgrid) {\n    grid-template-columns: subgrid;\n\n    > * {\n      grid-column: var(--start) / span var(--cols);\n    }\n  }\n}\n","@use \"./Grid/Grid\";\n@use \"./Grid/DebugGrid\";\n@use \"./Button/ButtonLF\";\n@use \"./Spinner/SpinnerLF\";\n@use \"./Form/ItemMessage/ItemMessageLF\";\n@use \"./Form/ItemLabel/ItemLabelLF\";\n@use \"./Form/TextInput/TextInputLF\";\n@use \"./Icon/IconLF\";\n@use \"./Divider/DividerLF\";\n@use \"./Link/LinkLF\";\n@use \"./Toggle/ToggleLF\";\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","/* 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:\n    width, height, border, color, background-color, outline, 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    line-height: 1.25em;\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    --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    &:hover {\n      --button-bg-color-default: var(--color-btn-business-dark);\n    }\n\n    &:active {\n      --button-bg-color-default: var(--color-btn-business-light);\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    &:active {\n      --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n      --button-text-color-default: var(--color-axa);\n    }\n  }\n}\n",".af-spinner {\n  --spinner-size: 40;\n  --spinner-border-size: 3;\n\n  display: flex;\n  container-type: inline-size;\n  width: calc(var(--spinner-size) * 1px);\n  height: calc(var(--spinner-size) * 1px);\n  margin: auto;\n  border: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-color);\n  border-top: calc(var(--spinner-border-size) * 1px) solid\n    var(--spinner-border-top-color);\n  border-radius: 50%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n","@use \"./SpinnerCommon\";\n\n.af-spinner {\n  --spinner-border-color: color-mix(in srgb, var(--color-axa), transparent 80%);\n  --spinner-border-top-color: var(--color-axa);\n\n  &--24 {\n    --spinner-border-size: 2;\n  }\n\n  &--40 {\n    --spinner-border-size: 4;\n  }\n\n  &--gray {\n    --spinner-border-color: color-mix(\n      in srgb,\n      var(--color-gray),\n      transparent 80%\n    );\n    --spinner-border-top-color: var(--color-gray);\n  }\n\n  &--white {\n    --spinner-border-color: color-mix(\n      in srgb,\n      var(--color-white),\n      transparent 80%\n    );\n    --spinner-border-top-color: var(--color-white);\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","@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.af-item-label {\n  display: grid;\n  width: 100%;\n  grid-template-areas:\n    \"label sidebutton\"\n    \"description sidebutton\"\n    \"more more\";\n  grid-template-columns: 1fr auto;\n  place-items: end start;\n  row-gap: calc(2 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-label__description) {\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &:has(> .af-item-label__sidebutton) {\n    column-gap: calc(12 / var(--font-size-base) * 1rem);\n  }\n\n  > label {\n    grid-area: label;\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    color: var(--color-gray-900);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(24 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__sidebutton {\n    grid-area: sidebutton;\n    place-self: center end;\n\n    &:has(+ .af-item-label__description) {\n      align-self: end;\n    }\n  }\n\n  &__more {\n    grid-area: more;\n  }\n\n  &__description {\n    grid-area: description;\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25em;\n    color: var(--label-description-color);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./ItemLabelCommon\";\n\n.af-item-label {\n  --label-description-color: var(--color-gray-700);\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form {\n  &__input-container {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &__input-variant {\n    display: grid;\n    width: 100%;\n    padding: calc(16 / var(--font-size-base) * 1rem);\n    border: 1px solid var(--input-border-color);\n    border-radius: var(--input-border-radius);\n    grid-template-columns: auto min-content;\n    align-items: center;\n    color: var(--input-text-color);\n    background-color: var(--input-bg-color);\n\n    &:has(> input ~ *) {\n      column-gap: calc(8 / var(--font-size-base) * 1rem);\n    }\n\n    > input {\n      all: unset;\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n      font-weight: 600;\n      line-height: 1.25em;\n      color: var(--input-text-color);\n\n      &::placeholder {\n        font-weight: 400;\n        color: var(--input-text-placeholder-color);\n      }\n\n      & ~ * {\n        color: var(--input-text-icon-color);\n        fill: var(--input-text-icon-color);\n      }\n\n      @media (width > #{breakpoints.$breakpoint-md}) {\n        font-size: calc(18 / var(--font-size-base) * 1rem);\n      }\n    }\n\n    &:has(> input:is(:hover, :focus, :active)) {\n      box-shadow: 0 0 0 1px var(--input-border-color) inset;\n    }\n\n    &:has(> input:disabled),\n    &:has(> input:disabled):is(:hover, :focus, :active) {\n      box-shadow: unset;\n      cursor: not-allowed;\n\n      & > input ~ * {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  &__input-helper {\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25em;\n    color: var(--input-helper-color);\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n@use \"./TextInputCommon\";\n\n.af-form {\n  &__input-helper {\n    --input-helper-color: var(--color-gray-700);\n  }\n\n  &__input-variant {\n    --input-border-color: var(--color-gray-700);\n    --input-border-radius: var(--default-border-radius);\n    --input-bg-color: var(--color-white);\n    --input-text-color: var(--color-gray-900);\n    --input-text-icon-color: var(--color-gray-900);\n    --input-text-placeholder-color: var(--color-gray-700);\n\n    &:has(> input:not([value=\"\"])) {\n      --input-border-color: var(--color-axa);\n    }\n\n    &:has(> input:is(:hover, :focus, :active)) {\n      --input-border-color: var(--color-axa);\n      --input-text-placeholder-color: var(--color-gray-900);\n    }\n\n    &:has(> input[class*=\"--error\"]) {\n      --input-border-color: var(--color-red-700);\n    }\n\n    &:has(> input:disabled),\n    &:has(> input:disabled):is(:hover, :focus, :active) {\n      --input-border-color: var(--color-gray-400);\n      --input-text-color: var(--color-gray-500);\n      --input-bg-color: var(--color-gray-200);\n      --input-text-icon-color: var(--color-gray-500);\n\n      + .af-form__input-helper {\n        --input-helper-color: var(--color-gray-500);\n      }\n    }\n  }\n}\n",".af-icon {\r\n  display: grid;\r\n  width: fit-content;\r\n  padding: var(--icon-padding);\r\n  border-radius: var(--icon-border-radius);\r\n  background-color: var(--icon-background-color);\r\n  outline-color: var(--icon-outline-color);\r\n\r\n  --icon-background-color: transparent;\r\n  --icon-size: calc(24 / var(--font-size-base) * 1rem);\r\n\r\n  svg {\r\n    width: var(--icon-size);\r\n    height: var(--icon-size);\r\n    fill: var(--icon-fill);\r\n  }\r\n\r\n  &--large {\r\n    svg {\r\n      --icon-size: calc(40 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--medium {\r\n    svg {\r\n      --icon-size: calc(32 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(12 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--small {\r\n    svg {\r\n      --icon-width: calc(24 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--extra-small {\r\n    svg {\r\n      --icon-size: calc(16 / var(--font-size-base) * 1rem);\r\n    }\r\n\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--secondary {\r\n    &.af-icon--has-background {\r\n      outline-style: solid;\r\n      outline-width: 1px;\r\n    }\r\n  }\r\n}\r\n","@use \"./IconCommon\";\r\n\r\n.af-icon {\r\n  --icon-border-radius: var(--radius-12);\r\n\r\n  &--small {\r\n    &.af-icon--has-background {\r\n      --icon-padding: calc(8 / var(--font-size-base) * 1rem);\r\n    }\r\n  }\r\n\r\n  &--primary {\r\n    --icon-fill: var(--color-axa);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-fill: var(--color-white);\r\n      --icon-background-color: var(--color-axa);\r\n    }\r\n  }\r\n\r\n  &--secondary {\r\n    --icon-fill: var(--color-white);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-fill: var(--color-axa);\r\n      --icon-background-color: var(--color-white);\r\n      --icon-outline-color: var(--color-gray-300);\r\n    }\r\n  }\r\n\r\n  &--tertiary {\r\n    --icon-fill: var(--color-gray-500);\r\n\r\n    &.af-icon--has-background {\r\n      --icon-background-color: var(--color-gray-200);\r\n    }\r\n  }\r\n}\r\n",".af-divider {\n  margin: 0;\n  border: 0;\n  border-top: 1px solid var(--divider-border-color);\n}\n","@use \"./DividerCommon\";\n\n.af-divider {\n  --divider-border-color: var(--color-gray-300);\n}\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n.af-link {\r\n  display: inline-flex;\r\n  width: fit-content;\r\n  height: fit-content;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  font-size: calc(var(--link-font-size) / var(--font-size-base) * 1rem);\r\n  font-weight: var(--link-font-weight);\r\n  text-decoration: underline;\r\n  text-underline-offset: var(--underline-offset);\r\n  color: var(--link-text-color-default);\r\n  fill: var(--link-text-color-default);\r\n\r\n  svg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n    aspect-ratio: 1;\r\n    fill: currentcolor;\r\n  }\r\n\r\n  &--openInNewTab {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &--default {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      text-decoration: underline;\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    line-height: var(--link-line-height);\r\n\r\n    &:hover {\r\n      color: var(--link-text-color-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      color: var(--link-color-outline);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    line-height: var(--link-line-height);\r\n    text-decoration: none;\r\n    color: var(--link-text-color-inverse);\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      line-height: var(--link-line-height);\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  &:hover,\r\n  &:active,\r\n  &:focus {\r\n    fill: var(--link-text-color-1);\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid var(--link-color-outline);\r\n    outline-offset: 3px;\r\n  }\r\n}\r\n","@use \"../common/breakpoints\" as breakpoints;\r\n\r\n@use \"./LinkCommon\";\r\n\r\n.af-link {\r\n  --link-font-weight: 400;\r\n  --link-text-color-default: var(--color-axa);\r\n  --underline-offset: 0%;\r\n  --link-font-size: 16;\r\n  @media (width > #{breakpoints.$breakpoint-md}) {\r\n    --link-font-size: 18;\r\n  }\r\n\r\n  &--default {\r\n    --link-line-height: 125%;\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--color-blue-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--color-btn-light);\r\n    }\r\n  }\r\n\r\n  &--underline {\r\n    --link-line-height: 125%;\r\n\r\n    &:hover {\r\n      --link-text-color-1: var(--color-blue-1);\r\n    }\r\n\r\n    &:active,\r\n    &:focus {\r\n      --link-color-outline: var(--color-btn-light);\r\n    }\r\n  }\r\n\r\n  &--inverse {\r\n    --link-text-color-inverse: var(--color-white);\r\n    --link-line-height: 125%;\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n      --link-line-height: 125%;\r\n    }\r\n  }\r\n}\r\n",".af-toggle {\n  &__root {\n    position: relative;\n    display: flex;\n    width: var(--toggle-width);\n    height: var(--toggle-height);\n    padding: var(--toggle-padding);\n    border: var(--toggle-border-size) solid var(--toggle-border-color);\n    border-radius: var(--toggle-border-radius);\n    align-items: center;\n    background-color: var(--toggle-bg-color);\n  }\n\n  &:has(:focus-within, :focus-visible, :focus, :active) &__root {\n    outline: 2px solid var(--toggle-focus-outline-color);\n    outline-offset: 2px;\n  }\n\n  &:has(:hover, :active) {\n    cursor: pointer;\n  }\n\n  &__handle {\n    width: var(--toggle-handle-size);\n    height: var(--toggle-handle-size);\n    border-radius: var(--radius-100);\n    background-color: var(--toggle-handle-color);\n    transform: translateX(var(--toggle-handle-position))\n      scale(var(--toggle-handle-scale));\n    transition: 200ms;\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    clip: rect(0, 0, 0, 0);\n  }\n}\n","@use \"./ToggleCommon\";\n\n.af-toggle {\n  --toggle-bg-color: var(--color-blue-200);\n  --toggle-border-color: var(--color-gray-700);\n  --toggle-focus-outline-color: var(--color-blue-800);\n  --toggle-border-radius: var(--radius-32);\n  --toggle-border-size: 2px;\n  --toggle-padding: 4px;\n  --toggle-width: 52px;\n  --toggle-height: 32px;\n  --toggle-handle-color: var(--color-gray-700);\n  --toggle-handle-size: 16px;\n  --toggle-handle-position: calc(var(--toggle-border-size) * 2);\n  --toggle-handle-scale: 1;\n\n  &:has(:checked) {\n    --toggle-bg-color: var(--color-blue-800);\n    --toggle-border-color: var(--togglecolor-blue-800);\n\n    .af-toggle__handle {\n      --toggle-handle-scale: 1.5;\n      --toggle-handle-color: var(--color-white);\n      --toggle-handle-position: calc(\n        var(--toggle-width) - (var(--toggle-padding) * 2) -\n          (var(--toggle-handle-size) * var(--toggle-handle-scale)) +\n          var(--toggle-border-size) * 2\n      );\n    }\n  }\n\n  &:has(:disabled) {\n    --toggle-bg-color: var(--color-white);\n    --toggle-border-color: var(--color-gray-400);\n    --toggle-handle-color: var(--color-gray-400);\n  }\n\n  &:has(:disabled:checked) {\n    --toggle-bg-color: var(--color-gray-400);\n    --toggle-border-color: var(--color-gray-400);\n  }\n}\n"]}

package/dist/look-and-feel.scss

@@ -7,4 +7,5 @@
 @use "./Form/TextInput/TextInputLF";
 @use "./Icon/IconLF";
 @use "./Divider/DividerLF";
+@use "./Link/LinkLF";
 @use "./Toggle/ToggleLF";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-css",
-  "version": "1.0.3-alpha.205",
+  "version": "1.0.3-alpha.207",
   "description": "",
   "sass": "dist/apollo.scss",
   "style": "dist/apollo.css",