@axa-fr/design-system-apollo-css 1.0.5-alpha.398 → 1.0.5-alpha.403

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css

@@ -1 +1 @@
-.af-checkbox{--checkbox-border-width:1px;align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);outline:var(--checkbox-outline-width) solid var(--checkbox-outline-color);outline-offset:calc((var(--checkbox-border-width) + var(--checkbox-outline-width))*-1);position:relative;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);fill:var(--checkbox-check-fill)}.af-checkbox input[type=checkbox]{cursor:pointer;height:calc(24/var(--font-size-base)*1rem);margin:0;opacity:0;position:absolute;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg:has(+input[type=checkbox]:checked){display:block}.af-checkbox{--checkbox-border-radius:calc(6/var(--font-size-base)*1rem);--checkbox-border-color:var(--axa-blue-65);--checkbox-outline-color:var(--checkbox-border-color);--checkbox-check-fill:var(--white);--checkbox-background-color:var(--white)}.af-checkbox:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{--checkbox-border-color:var(--axa-blue-100);--checkbox-outline-width:1px}.af-checkbox:has(:checked){--checkbox-background-color:var(--axa-blue-100)}.af-checkbox:not(:has(:checked)):has([aria-invalid=true]){--checkbox-border-color:var(--red-alert-100);--checkbox-outline-width:1px}.af-checkbox:not(:has(:checked)):has([aria-invalid=true]):focus-within,.af-checkbox:not(:has(:checked)):has([aria-invalid=true]):hover{--checkbox-outline-width:2px}
+.af-checkbox{--checkbox-border-width:1px;align-items:center;-webkit-appearance:unset;appearance:unset;background-color:var(--checkbox-background-color);border-radius:var(--checkbox-border-radius);cursor:pointer;height:calc(24/var(--font-size-base)*1rem);margin:0;outline:var(--checkbox-border-width) solid var(--checkbox-border-color);outline-offset:calc(var(--checkbox-border-width)*-1);width:calc(24/var(--font-size-base)*1rem)}.af-checkbox:checked{background-image:var(--checkbox-background-image)}.af-checkbox{--checkbox-background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 -960 960 960'%3E%3Cpath d='m400-402 250-250q9-9 21-9t21 9 9 21-9 21L421-339q-9 9-21 9t-21-9L268-450q-9-9-9-21t9-21 21-9 21 9z'/%3E%3C/svg%3E");--checkbox-border-radius:calc(6/var(--font-size-base)*1rem);--checkbox-background-color:var(--white);--checkbox-border-color:var(--axa-blue-65)}.af-checkbox:checked,.af-checkbox:focus-within,.af-checkbox:hover{--checkbox-border-color:var(--axa-blue-100);--checkbox-border-width:2px}.af-checkbox:checked{--checkbox-background-color:var(--axa-blue-100)}.af-checkbox[aria-invalid=true]:not(:checked){--checkbox-border-color:var(--red-alert-100);--checkbox-border-width:2px}.af-checkbox[aria-invalid=true]:not(:checked):focus-within,.af-checkbox[aria-invalid=true]:not(:checked):hover{--checkbox-border-width:3px}

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss%23sass"],"names":[],"mappings":"AAAA,aACE,2BAAA,CAQA,kBAAA,CACA,iDAAA,CAHA,sEAAA,CACA,2CAAA,CAJA,YAAA,CAEA,0CAAA,CAKA,yEAAA,CACA,sFAAA,CCVF,iBAAA,CDGE,yCCOF,CDIE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCFJ,CDKE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDME,oDACE,aCJJ,CC7BA,aACE,2DAAA,CACA,0CAAA,CACA,qDAAA,CACA,kCAAA,CACA,wCDgCF,CC9BE,wEAGE,2CAAA,CACA,4BD8BJ,CC3BE,2BACE,+CD6BJ,CC1BE,0DACE,4CAAA,CACA,4BD4BJ,CC1BI,uIAEE,4BD2BN","file":"CheckboxApollo.css","sourcesContent":[".af-checkbox {\n  --checkbox-border-width: 1px;\n\n  position: relative;\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n  outline: var(--checkbox-outline-width) solid var(--checkbox-outline-color);\n  outline-offset: calc(\n    -1 * calc(var(--checkbox-border-width) + var(--checkbox-outline-width))\n  );\n\n  svg {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: none;\n    transform: translate(-50%, -50%);\n    fill: var(--checkbox-check-fill);\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: calc(24 / var(--font-size-base) * 1rem);\n    height: calc(24 / var(--font-size-base) * 1rem);\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  svg:has(+ input[type=\"checkbox\"]:checked) {\n    display: block;\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n  --checkbox-border-color: var(--axa-blue-65);\n  --checkbox-outline-color: var(--checkbox-border-color);\n  --checkbox-check-fill: var(--white);\n  --checkbox-background-color: var(--white);\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --checkbox-border-color: var(--axa-blue-100);\n    --checkbox-outline-width: 1px;\n  }\n\n  &:has(:checked) {\n    --checkbox-background-color: var(--axa-blue-100);\n  }\n\n  &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n    --checkbox-border-color: var(--red-alert-100);\n    --checkbox-outline-width: 1px;\n\n    &:hover,\n    &:focus-within {\n      --checkbox-outline-width: 2px;\n    }\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n  --checkbox-border-color: var(--axa-blue-65);\n  --checkbox-outline-color: var(--checkbox-border-color);\n  --checkbox-check-fill: var(--white);\n  --checkbox-background-color: var(--white);\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --checkbox-border-color: var(--axa-blue-100);\n    --checkbox-outline-width: 1px;\n  }\n\n  &:has(:checked) {\n    --checkbox-background-color: var(--axa-blue-100);\n  }\n\n  &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n    --checkbox-border-color: var(--red-alert-100);\n    --checkbox-outline-width: 1px;\n\n    &:hover,\n    &:focus-within {\n      --checkbox-outline-width: 2px;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxApollo.scss%23sass"],"names":[],"mappings":"AAAA,aACE,2BAAA,CAMA,kBAAA,CAKA,wBAAA,CAAA,gBAAA,CAJA,iDAAA,CAFA,2CAAA,CAKA,cAAA,CAPA,0CAAA,CACA,QAAA,CAIA,uEAAA,CACA,oDAAA,CCRF,yCAUA,CDEE,qBACE,iDCAJ,CCbA,aACE,0SAAA,CACA,2DAAA,CACA,wCAAA,CACA,0CDgBF,CCdE,kEAGE,2CAAA,CACA,2BDcJ,CCXE,qBDaF,+CACA,CCVE,8CACE,4CAAA,CACA,2BDYJ,CCVI,+GAEE,2BDWN","file":"CheckboxApollo.css","sourcesContent":[".af-checkbox {\n  --checkbox-border-width: 1px;\n\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  margin: 0;\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n  outline: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  outline-offset: calc(-1 * var(--checkbox-border-width));\n  cursor: pointer;\n  appearance: unset;\n\n  &:checked {\n    background-image: var(--checkbox-background-image);\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 -960 960 960'%3E%3Cpath d='m400-402 250-250q9-9 21-9t21 9q9 9 9 21t-9 21L421-339q-9 9-21 9t-21-9L268-450q-9-9-9-21t9-21q9-9 21-9t21 9l90 90Z'/%3E%3C/svg%3E\");\n  --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n  --checkbox-background-color: var(--white);\n  --checkbox-border-color: var(--axa-blue-65);\n\n  &:hover,\n  &:focus-within,\n  &:checked {\n    --checkbox-border-color: var(--axa-blue-100);\n    --checkbox-border-width: 2px;\n  }\n\n  &:checked {\n    --checkbox-background-color: var(--axa-blue-100);\n  }\n\n  &[aria-invalid=\"true\"]:not(:checked) {\n    --checkbox-border-color: var(--red-alert-100);\n    --checkbox-border-width: 2px;\n\n    &:hover,\n    &:focus-within {\n      --checkbox-border-width: 3px;\n    }\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 -960 960 960'%3E%3Cpath d='m400-402 250-250q9-9 21-9t21 9q9 9 9 21t-9 21L421-339q-9 9-21 9t-21-9L268-450q-9-9-9-21t9-21q9-9 21-9t21 9l90 90Z'/%3E%3C/svg%3E\");\n  --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n  --checkbox-background-color: var(--white);\n  --checkbox-border-color: var(--axa-blue-65);\n\n  &:hover,\n  &:focus-within,\n  &:checked {\n    --checkbox-border-color: var(--axa-blue-100);\n    --checkbox-border-width: 2px;\n  }\n\n  &:checked {\n    --checkbox-background-color: var(--axa-blue-100);\n  }\n\n  &[aria-invalid=\"true\"]:not(:checked) {\n    --checkbox-border-color: var(--red-alert-100);\n    --checkbox-border-width: 2px;\n\n    &:hover,\n    &:focus-within {\n      --checkbox-border-width: 3px;\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss

@@ -1,30 +1,29 @@
 @use "CheckboxCommon";
 
 .af-checkbox {
+  --checkbox-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 -960 960 960'%3E%3Cpath d='m400-402 250-250q9-9 21-9t21 9q9 9 9 21t-9 21L421-339q-9 9-21 9t-21-9L268-450q-9-9-9-21t9-21q9-9 21-9t21 9l90 90Z'/%3E%3C/svg%3E");
   --checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);
-  --checkbox-border-color: var(--axa-blue-65);
-  --checkbox-outline-color: var(--checkbox-border-color);
-  --checkbox-check-fill: var(--white);
   --checkbox-background-color: var(--white);
+  --checkbox-border-color: var(--axa-blue-65);
 
   &:hover,
   &:focus-within,
-  &:has(:checked) {
+  &:checked {
     --checkbox-border-color: var(--axa-blue-100);
-    --checkbox-outline-width: 1px;
+    --checkbox-border-width: 2px;
   }
 
-  &:has(:checked) {
+  &:checked {
     --checkbox-background-color: var(--axa-blue-100);
   }
 
-  &:not(:has(:checked)):has([aria-invalid="true"]) {
+  &[aria-invalid="true"]:not(:checked) {
     --checkbox-border-color: var(--red-alert-100);
-    --checkbox-outline-width: 1px;
+    --checkbox-border-width: 2px;
 
     &:hover,
     &:focus-within {
-      --checkbox-outline-width: 2px;
+      --checkbox-border-width: 3px;
     }
   }
 }

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css

@@ -1 +1 @@
-.af-checkbox{--checkbox-border-width:1px;align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);outline:var(--checkbox-outline-width) solid var(--checkbox-outline-color);outline-offset:calc((var(--checkbox-border-width) + var(--checkbox-outline-width))*-1);position:relative;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);fill:var(--checkbox-check-fill)}.af-checkbox input[type=checkbox]{cursor:pointer;height:calc(24/var(--font-size-base)*1rem);margin:0;opacity:0;position:absolute;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg:has(+input[type=checkbox]:checked){display:block}
+.af-checkbox{--checkbox-border-width:1px;align-items:center;-webkit-appearance:unset;appearance:unset;background-color:var(--checkbox-background-color);border-radius:var(--checkbox-border-radius);cursor:pointer;height:calc(24/var(--font-size-base)*1rem);margin:0;outline:var(--checkbox-border-width) solid var(--checkbox-border-color);outline-offset:calc(var(--checkbox-border-width)*-1);width:calc(24/var(--font-size-base)*1rem)}.af-checkbox:checked{background-image:var(--checkbox-background-image)}

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss"],"names":[],"mappings":"AAAA,aACE,2BAAA,CAQA,kBAAA,CACA,iDAAA,CAHA,sEAAA,CACA,2CAAA,CAJA,YAAA,CAEA,0CAAA,CAKA,yEAAA,CACA,sFAAA,CATA,iBAAA,CAEA,yCCOF,CDIE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCFJ,CDKE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDME,oDACE,aCJJ","file":"CheckboxCommon.css","sourcesContent":[".af-checkbox {\n  --checkbox-border-width: 1px;\n\n  position: relative;\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n  outline: var(--checkbox-outline-width) solid var(--checkbox-outline-color);\n  outline-offset: calc(\n    -1 * calc(var(--checkbox-border-width) + var(--checkbox-outline-width))\n  );\n\n  svg {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: none;\n    transform: translate(-50%, -50%);\n    fill: var(--checkbox-check-fill);\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: calc(24 / var(--font-size-base) * 1rem);\n    height: calc(24 / var(--font-size-base) * 1rem);\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  svg:has(+ input[type=\"checkbox\"]:checked) {\n    display: block;\n  }\n}\n",".af-checkbox {\n  --checkbox-border-width: 1px;\n\n  position: relative;\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n  outline: var(--checkbox-outline-width) solid var(--checkbox-outline-color);\n  outline-offset: calc(\n    -1 * calc(var(--checkbox-border-width) + var(--checkbox-outline-width))\n  );\n\n  svg {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: none;\n    transform: translate(-50%, -50%);\n    fill: var(--checkbox-check-fill);\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: calc(24 / var(--font-size-base) * 1rem);\n    height: calc(24 / var(--font-size-base) * 1rem);\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  svg:has(+ input[type=\"checkbox\"]:checked) {\n    display: block;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss"],"names":[],"mappings":"AAAA,aACE,2BAAA,CAMA,kBAAA,CAKA,wBAAA,CAAA,gBAAA,CAJA,iDAAA,CAFA,2CAAA,CAKA,cAAA,CAPA,0CAAA,CACA,QAAA,CAIA,uEAAA,CACA,oDAAA,CAPA,yCCSF,CDEE,qBACE,iDCAJ","file":"CheckboxCommon.css","sourcesContent":[".af-checkbox {\n  --checkbox-border-width: 1px;\n\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  margin: 0;\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n  outline: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  outline-offset: calc(-1 * var(--checkbox-border-width));\n  cursor: pointer;\n  appearance: unset;\n\n  &:checked {\n    background-image: var(--checkbox-background-image);\n  }\n}\n",".af-checkbox {\n  --checkbox-border-width: 1px;\n\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  margin: 0;\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n  outline: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  outline-offset: calc(-1 * var(--checkbox-border-width));\n  cursor: pointer;\n  appearance: unset;\n\n  &:checked {\n    background-image: var(--checkbox-background-image);\n  }\n}\n"]}

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.scss

@@ -1,38 +1,18 @@
 .af-checkbox {
   --checkbox-border-width: 1px;
 
-  position: relative;
-  display: flex;
   width: calc(24 / var(--font-size-base) * 1rem);
   height: calc(24 / var(--font-size-base) * 1rem);
-  border: var(--checkbox-border-width) solid var(--checkbox-border-color);
+  margin: 0;
   border-radius: var(--checkbox-border-radius);
   align-items: center;
   background-color: var(--checkbox-background-color);
-  outline: var(--checkbox-outline-width) solid var(--checkbox-outline-color);
-  outline-offset: calc(
-    -1 * calc(var(--checkbox-border-width) + var(--checkbox-outline-width))
-  );
+  outline: var(--checkbox-border-width) solid var(--checkbox-border-color);
+  outline-offset: calc(-1 * var(--checkbox-border-width));
+  cursor: pointer;
+  appearance: unset;
 
-  svg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    display: none;
-    transform: translate(-50%, -50%);
-    fill: var(--checkbox-check-fill);
-  }
-
-  input[type="checkbox"] {
-    position: absolute;
-    width: calc(24 / var(--font-size-base) * 1rem);
-    height: calc(24 / var(--font-size-base) * 1rem);
-    margin: 0;
-    opacity: 0;
-    cursor: pointer;
-  }
-
-  svg:has(+ input[type="checkbox"]:checked) {
-    display: block;
+  &:checked {
+    background-image: var(--checkbox-background-image);
   }
 }

package/dist/Form/Checkbox/Checkbox/CheckboxLF.css

@@ -1 +1 @@
-.af-checkbox{--checkbox-border-width:1px;align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);outline:var(--checkbox-outline-width) solid var(--checkbox-outline-color);outline-offset:calc((var(--checkbox-border-width) + var(--checkbox-outline-width))*-1);position:relative;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg{display:none;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);fill:var(--checkbox-check-fill)}.af-checkbox input[type=checkbox]{cursor:pointer;height:calc(24/var(--font-size-base)*1rem);margin:0;opacity:0;position:absolute;width:calc(24/var(--font-size-base)*1rem)}.af-checkbox svg:has(+input[type=checkbox]:checked){display:block}.af-checkbox{--checkbox-border-radius:calc(4/var(--font-size-base)*1rem);--checkbox-border-color:var(--color-gray-500);--checkbox-outline-color:var(--checkbox-border-color);--checkbox-check-fill:var(--color-white);--checkbox-background-color:var(--color-white);--checkbox-outline-width:1px}.af-checkbox:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{--checkbox-border-color:var(--color-axa);--checkbox-outline-width:2px}.af-checkbox:has(:checked){--checkbox-background-color:var(--color-axa)}.af-checkbox:not(:has(:checked)):has([aria-invalid=true]){--checkbox-border-color:var(--color-red-700)}
+.af-checkbox{--checkbox-border-width:1px;align-items:center;-webkit-appearance:unset;appearance:unset;background-color:var(--checkbox-background-color);border-radius:var(--checkbox-border-radius);cursor:pointer;height:calc(24/var(--font-size-base)*1rem);margin:0;outline:var(--checkbox-border-width) solid var(--checkbox-border-color);outline-offset:calc(var(--checkbox-border-width)*-1);width:calc(24/var(--font-size-base)*1rem)}.af-checkbox:checked{background-image:var(--checkbox-background-image)}.af-checkbox{--checkbox-background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 -960 960 960'%3E%3Cpath d='m378-332 363-363q9.27-9 21.64-9 12.36 0 21.36 9.05 9 9.06 9 21.5 0 12.45-9 21.45L399-267q-9 9-21 9t-21-9L175-449q-9-9.07-8.5-21.53.5-12.47 9.55-21.47 9.06-9 21.5-9 12.45 0 21.45 9z'/%3E%3C/svg%3E");--checkbox-border-radius:calc(4/var(--font-size-base)*1rem);--checkbox-background-color:var(--color-white);--checkbox-border-color:var(--color-gray-500)}.af-checkbox:checked,.af-checkbox:focus-within,.af-checkbox:hover{--checkbox-border-color:var(--color-axa);--checkbox-border-width:3px}.af-checkbox:checked{--checkbox-background-color:var(--color-axa)}.af-checkbox[aria-invalid=true]:not(:checked){--checkbox-border-color:var(--color-red-700);--checkbox-border-width:2px}.af-checkbox[aria-invalid=true]:not(:checked):focus-within,.af-checkbox[aria-invalid=true]:not(:checked):hover{--checkbox-border-width:3px}

package/dist/Form/Checkbox/Checkbox/CheckboxLF.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxLF.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxLF.scss%23sass"],"names":[],"mappings":"AAAA,aACE,2BAAA,CAQA,kBAAA,CACA,iDAAA,CAHA,sEAAA,CACA,2CAAA,CAJA,YAAA,CAEA,0CAAA,CAKA,yEAAA,CACA,sFAAA,CCVF,iBAAA,CDGE,yCCOF,CDIE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCFJ,CDKE,kCAME,cAAA,CCPJ,0CAAA,CDKI,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDME,oDACE,aCJJ,CC7BA,aACE,2DAAA,CACA,6CAAA,CACA,qDAAA,CACA,wCAAA,CACA,8CAAA,CACA,4BDgCF,CC9BE,wEAGE,wCAAA,CACA,4BD8BJ,CC3BE,2BACE,4CD6BJ,CC1BE,0DACE,4CD4BJ","file":"CheckboxLF.css","sourcesContent":[".af-checkbox {\n  --checkbox-border-width: 1px;\n\n  position: relative;\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n  outline: var(--checkbox-outline-width) solid var(--checkbox-outline-color);\n  outline-offset: calc(\n    -1 * calc(var(--checkbox-border-width) + var(--checkbox-outline-width))\n  );\n\n  svg {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: none;\n    transform: translate(-50%, -50%);\n    fill: var(--checkbox-check-fill);\n  }\n\n  input[type=\"checkbox\"] {\n    position: absolute;\n    width: calc(24 / var(--font-size-base) * 1rem);\n    height: calc(24 / var(--font-size-base) * 1rem);\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  svg:has(+ input[type=\"checkbox\"]:checked) {\n    display: block;\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);\n  --checkbox-border-color: var(--color-gray-500);\n  --checkbox-outline-color: var(--checkbox-border-color);\n  --checkbox-check-fill: var(--color-white);\n  --checkbox-background-color: var(--color-white);\n  --checkbox-outline-width: 1px;\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --checkbox-border-color: var(--color-axa);\n    --checkbox-outline-width: 2px;\n  }\n\n  &:has(:checked) {\n    --checkbox-background-color: var(--color-axa);\n  }\n\n  &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n    --checkbox-border-color: var(--color-red-700);\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);\n  --checkbox-border-color: var(--color-gray-500);\n  --checkbox-outline-color: var(--checkbox-border-color);\n  --checkbox-check-fill: var(--color-white);\n  --checkbox-background-color: var(--color-white);\n  --checkbox-outline-width: 1px;\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --checkbox-border-color: var(--color-axa);\n    --checkbox-outline-width: 2px;\n  }\n\n  &:has(:checked) {\n    --checkbox-background-color: var(--color-axa);\n  }\n\n  &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n    --checkbox-border-color: var(--color-red-700);\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/Checkbox/CheckboxCommon.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxLF.scss","../../../../src/Form/Checkbox/Checkbox/CheckboxLF.scss%23sass"],"names":[],"mappings":"AAAA,aACE,2BAAA,CAMA,kBAAA,CAKA,wBAAA,CAAA,gBAAA,CAJA,iDAAA,CAFA,2CAAA,CAKA,cAAA,CAPA,0CAAA,CACA,QAAA,CAIA,uEAAA,CACA,oDAAA,CCRF,yCAUA,CDEE,qBACE,iDCAJ,CCbA,aACE,4XAAA,CACA,2DAAA,CACA,8CAAA,CACA,6CDgBF,CCdE,kEAGE,wCAAA,CACA,2BDcJ,CCXE,qBDaF,4CACA,CCVE,8CACE,4CAAA,CACA,2BDYJ,CCVI,+GAEE,2BDWN","file":"CheckboxLF.css","sourcesContent":[".af-checkbox {\n  --checkbox-border-width: 1px;\n\n  width: calc(24 / var(--font-size-base) * 1rem);\n  height: calc(24 / var(--font-size-base) * 1rem);\n  margin: 0;\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\n  outline: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  outline-offset: calc(-1 * var(--checkbox-border-width));\n  cursor: pointer;\n  appearance: unset;\n\n  &:checked {\n    background-image: var(--checkbox-background-image);\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 -960 960 960'%3E%3Cpath d='m378-332 363-363q9.27-9 21.64-9 12.36 0 21.36 9.05 9 9.06 9 21.5 0 12.45-9 21.45L399-267q-9 9-21 9t-21-9L175-449q-9-9.07-8.5-21.53.5-12.47 9.55-21.47 9.06-9 21.5-9 12.45 0 21.45 9l159 160Z'/%3E%3C/svg%3E\");\n  --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);\n  --checkbox-background-color: var(--color-white);\n  --checkbox-border-color: var(--color-gray-500);\n\n  &:hover,\n  &:focus-within,\n  &:checked {\n    --checkbox-border-color: var(--color-axa);\n    --checkbox-border-width: 3px;\n  }\n\n  &:checked {\n    --checkbox-background-color: var(--color-axa);\n  }\n\n  &[aria-invalid=\"true\"]:not(:checked) {\n    --checkbox-border-color: var(--color-red-700);\n    --checkbox-border-width: 2px;\n\n    &:hover,\n    &:focus-within {\n      --checkbox-border-width: 3px;\n    }\n  }\n}\n","@use \"CheckboxCommon\";\n\n.af-checkbox {\n  --checkbox-background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 -960 960 960'%3E%3Cpath d='m378-332 363-363q9.27-9 21.64-9 12.36 0 21.36 9.05 9 9.06 9 21.5 0 12.45-9 21.45L399-267q-9 9-21 9t-21-9L175-449q-9-9.07-8.5-21.53.5-12.47 9.55-21.47 9.06-9 21.5-9 12.45 0 21.45 9l159 160Z'/%3E%3C/svg%3E\");\n  --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);\n  --checkbox-background-color: var(--color-white);\n  --checkbox-border-color: var(--color-gray-500);\n\n  &:hover,\n  &:focus-within,\n  &:checked {\n    --checkbox-border-color: var(--color-axa);\n    --checkbox-border-width: 3px;\n  }\n\n  &:checked {\n    --checkbox-background-color: var(--color-axa);\n  }\n\n  &[aria-invalid=\"true\"]:not(:checked) {\n    --checkbox-border-color: var(--color-red-700);\n    --checkbox-border-width: 2px;\n\n    &:hover,\n    &:focus-within {\n      --checkbox-border-width: 3px;\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/Checkbox/CheckboxLF.scss

@@ -1,25 +1,29 @@
 @use "CheckboxCommon";
 
 .af-checkbox {
+  --checkbox-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' viewBox='0 -960 960 960'%3E%3Cpath d='m378-332 363-363q9.27-9 21.64-9 12.36 0 21.36 9.05 9 9.06 9 21.5 0 12.45-9 21.45L399-267q-9 9-21 9t-21-9L175-449q-9-9.07-8.5-21.53.5-12.47 9.55-21.47 9.06-9 21.5-9 12.45 0 21.45 9l159 160Z'/%3E%3C/svg%3E");
   --checkbox-border-radius: calc(4 / var(--font-size-base) * 1rem);
-  --checkbox-border-color: var(--color-gray-500);
-  --checkbox-outline-color: var(--checkbox-border-color);
-  --checkbox-check-fill: var(--color-white);
   --checkbox-background-color: var(--color-white);
-  --checkbox-outline-width: 1px;
+  --checkbox-border-color: var(--color-gray-500);
 
   &:hover,
   &:focus-within,
-  &:has(:checked) {
+  &:checked {
     --checkbox-border-color: var(--color-axa);
-    --checkbox-outline-width: 2px;
+    --checkbox-border-width: 3px;
   }
 
-  &:has(:checked) {
+  &:checked {
     --checkbox-background-color: var(--color-axa);
   }
 
-  &:not(:has(:checked)):has([aria-invalid="true"]) {
+  &[aria-invalid="true"]:not(:checked) {
     --checkbox-border-color: var(--color-red-700);
+    --checkbox-border-width: 2px;
+
+    &:hover,
+    &:focus-within {
+      --checkbox-border-width: 3px;
+    }
   }
 }

package/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.css

@@ -1 +1 @@
-.af-checkbox-text{column-gap:calc(8/var(--font-size-base)*1rem);display:grid;grid-template-areas:"icon label" "icon message";grid-template-columns:min-content 1fr}.af-checkbox-text:has(>.af-item-message){row-gap:calc(8/var(--font-size-base)*1rem)}.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(8/var(--font-size-base)*1rem);grid-area:label;line-height:1.25;margin:0}@media (width < 667px){.af-checkbox-text label{font-size:calc(16/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon}.af-checkbox-text .af-item-message{grid-area:message}.af-checkbox-text label{--checkbox-text-label-color:var(--black)}
+.af-checkbox-text{align-items:start;display:grid;gap:calc(8/var(--font-size-base)*1rem);grid-template-areas:"icon label";grid-template-columns:auto 1fr}.af-checkbox-text:has(>.af-item-message){grid-template-areas:"icon label" "icon message"}.af-checkbox-text label{cursor:pointer;display:contents}.af-checkbox-text__label-content{color:var(--checkbox-text-label-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;grid-area:label;line-height:1.25}@media (width > 667px){.af-checkbox-text__label-content{font-size:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon}.af-checkbox-text .af-item-message{grid-area:message}.af-checkbox-text{--checkbox-text-label-color:var(--black)}

package/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss%23sass"],"names":[],"mappings":"AAEA,kBAME,6CAAA,CALA,YAAA,CCDF,+CAAA,CDKE,qCCFF,CDKE,yCACE,0CCHJ,CDME,wBAIE,sBAAA,CAKA,sCAAA,CACA,cAAA,CATA,YAAA,CAKA,6CAAA,CACA,eAAA,CAFA,sCAAA,CAFA,eAAA,CAKA,gBAAA,CANA,QCIJ,CDMI,uBAZF,wBAaI,6CCHJ,CACF,CDME,+BACE,cCJJ,CDOE,mCACE,iBCLJ,CC5BE,wBACE,wCD+BJ","file":"CheckboxTextApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-text {\n  display: grid;\n  grid-template-areas:\n    \"icon label\"\n    \"icon message\";\n  grid-template-columns: min-content 1fr;\n  column-gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-message) {\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  label {\n    display: flex;\n    margin: 0;\n    grid-area: label;\n    align-items: flex-start;\n    gap: calc(8 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25;\n    color: var(--checkbox-text-label-color);\n    cursor: pointer;\n\n    @media (width < #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  .af-checkbox {\n    grid-area: icon;\n  }\n\n  .af-item-message {\n    grid-area: message;\n  }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n  & label {\n    --checkbox-text-label-color: var(--black);\n  }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n  & label {\n    --checkbox-text-label-color: var(--black);\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss%23sass"],"names":[],"mappings":"AAEA,kBCEA,iBAAA,CDDE,YAAA,CAIA,sCAAA,CCLF,gCAAA,CDGE,8BCCF,CDGE,yCACE,+CCDJ,CDME,wBAEE,cAAA,CADA,gBCHJ,CDOE,iCAKE,sCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,gBCJJ,CDOI,uBAPF,iCAQI,6CCJJ,CACF,CDOE,+BACE,cCLJ,CDQE,mCACE,iBCNJ,CC7BA,kBACE,wCDgCF","file":"CheckboxTextApollo.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-checkbox-text {\n  display: grid;\n  grid-template-areas: \"icon label\";\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-message) {\n    grid-template-areas:\n      \"icon label\"\n      \"icon message\";\n  }\n\n  label {\n    display: contents;\n    cursor: pointer;\n  }\n\n  &__label-content {\n    grid-area: label;\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25;\n    color: var(--checkbox-text-label-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  .af-checkbox {\n    grid-area: icon;\n  }\n\n  .af-item-message {\n    grid-area: message;\n  }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n  --checkbox-text-label-color: var(--black);\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n  --checkbox-text-label-color: var(--black);\n}\n"]}

package/dist/Form/Checkbox/CheckboxText/CheckboxTextApollo.scss

@@ -1,7 +1,5 @@
 @use "CheckboxTextCommon";
 
 .af-checkbox-text {
-  & label {
-    --checkbox-text-label-color: var(--black);
-  }
+  --checkbox-text-label-color: var(--black);
 }

package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.css

@@ -1 +1 @@
-.af-checkbox-text{column-gap:calc(8/var(--font-size-base)*1rem);display:grid;grid-template-areas:"icon label" "icon message";grid-template-columns:min-content 1fr}.af-checkbox-text:has(>.af-item-message){row-gap:calc(8/var(--font-size-base)*1rem)}.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(8/var(--font-size-base)*1rem);grid-area:label;line-height:1.25;margin:0}@media (width < 667px){.af-checkbox-text label{font-size:calc(16/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon}.af-checkbox-text .af-item-message{grid-area:message}
+.af-checkbox-text{align-items:start;display:grid;gap:calc(8/var(--font-size-base)*1rem);grid-template-areas:"icon label";grid-template-columns:auto 1fr}.af-checkbox-text:has(>.af-item-message){grid-template-areas:"icon label" "icon message"}.af-checkbox-text label{cursor:pointer;display:contents}.af-checkbox-text__label-content{color:var(--checkbox-text-label-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;grid-area:label;line-height:1.25}@media (width > 667px){.af-checkbox-text__label-content{font-size:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon}.af-checkbox-text .af-item-message{grid-area:message}

package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss%23sass","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss"],"names":[],"mappings":"AAEA,kBAME,6CAAA,CALA,YAAA,CCDF,+CAAA,CDKE,qCCFF,CDKE,yCACE,0CCHJ,CDME,wBAIE,sBAAA,CAKA,sCAAA,CACA,cAAA,CATA,YAAA,CAKA,6CAAA,CACA,eAAA,CAFA,sCAAA,CAFA,eAAA,CAKA,gBAAA,CANA,QCIJ,CDMI,uBAZF,wBAaI,6CCHJ,CACF,CDME,+BACE,cCJJ,CDOE,mCACE,iBCLJ","file":"CheckboxTextCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-text {\n  display: grid;\n  grid-template-areas:\n    \"icon label\"\n    \"icon message\";\n  grid-template-columns: min-content 1fr;\n  column-gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-message) {\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  label {\n    display: flex;\n    margin: 0;\n    grid-area: label;\n    align-items: flex-start;\n    gap: calc(8 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25;\n    color: var(--checkbox-text-label-color);\n    cursor: pointer;\n\n    @media (width < #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  .af-checkbox {\n    grid-area: icon;\n  }\n\n  .af-item-message {\n    grid-area: message;\n  }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-text {\n  display: grid;\n  grid-template-areas:\n    \"icon label\"\n    \"icon message\";\n  grid-template-columns: min-content 1fr;\n  column-gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-message) {\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  label {\n    display: flex;\n    margin: 0;\n    grid-area: label;\n    align-items: flex-start;\n    gap: calc(8 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25;\n    color: var(--checkbox-text-label-color);\n    cursor: pointer;\n\n    @media (width < #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  .af-checkbox {\n    grid-area: icon;\n  }\n\n  .af-item-message {\n    grid-area: message;\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss%23sass","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss"],"names":[],"mappings":"AAEA,kBAIE,iBAAA,CAHA,YAAA,CAIA,sCAAA,CCLF,gCAAA,CDGE,8BCCF,CDGE,yCACE,+CCDJ,CDME,wBAEE,cAAA,CADA,gBCHJ,CDOE,iCAKE,sCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,gBCJJ,CDOI,uBAPF,iCAQI,6CCJJ,CACF,CDOE,+BACE,cCLJ,CDQE,mCACE,iBCNJ","file":"CheckboxTextCommon.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-checkbox-text {\n  display: grid;\n  grid-template-areas: \"icon label\";\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-message) {\n    grid-template-areas:\n      \"icon label\"\n      \"icon message\";\n  }\n\n  label {\n    display: contents;\n    cursor: pointer;\n  }\n\n  &__label-content {\n    grid-area: label;\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25;\n    color: var(--checkbox-text-label-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  .af-checkbox {\n    grid-area: icon;\n  }\n\n  .af-item-message {\n    grid-area: message;\n  }\n}\n","@use \"../../../common/breakpoints\";\n\n.af-checkbox-text {\n  display: grid;\n  grid-template-areas: \"icon label\";\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-message) {\n    grid-template-areas:\n      \"icon label\"\n      \"icon message\";\n  }\n\n  label {\n    display: contents;\n    cursor: pointer;\n  }\n\n  &__label-content {\n    grid-area: label;\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25;\n    color: var(--checkbox-text-label-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  .af-checkbox {\n    grid-area: icon;\n  }\n\n  .af-item-message {\n    grid-area: message;\n  }\n}\n"]}

package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss

@@ -1,31 +1,32 @@
-@use "../../../common/breakpoints" as breakpoints;
+@use "../../../common/breakpoints";
 
 .af-checkbox-text {
   display: grid;
-  grid-template-areas:
-    "icon label"
-    "icon message";
-  grid-template-columns: min-content 1fr;
-  column-gap: calc(8 / var(--font-size-base) * 1rem);
+  grid-template-areas: "icon label";
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: calc(8 / var(--font-size-base) * 1rem);
 
   &:has(> .af-item-message) {
-    row-gap: calc(8 / var(--font-size-base) * 1rem);
+    grid-template-areas:
+      "icon label"
+      "icon message";
   }
 
   label {
-    display: flex;
-    margin: 0;
+    display: contents;
+    cursor: pointer;
+  }
+
+  &__label-content {
     grid-area: label;
-    align-items: flex-start;
-    gap: calc(8 / var(--font-size-base) * 1rem);
-    font-size: calc(18 / var(--font-size-base) * 1rem);
+    font-size: calc(16 / var(--font-size-base) * 1rem);
     font-weight: 400;
     line-height: 1.25;
     color: var(--checkbox-text-label-color);
-    cursor: pointer;
 
-    @media (width < #{breakpoints.$breakpoint-sm}) {
-      font-size: calc(16 / var(--font-size-base) * 1rem);
+    @media (width > #{breakpoints.$breakpoint-sm}) {
+      font-size: calc(18 / var(--font-size-base) * 1rem);
     }
   }
 

package/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.css

@@ -1 +1 @@
-.af-checkbox-text{column-gap:calc(8/var(--font-size-base)*1rem);display:grid;grid-template-areas:"icon label" "icon message";grid-template-columns:min-content 1fr}.af-checkbox-text:has(>.af-item-message){row-gap:calc(8/var(--font-size-base)*1rem)}.af-checkbox-text label{align-items:flex-start;color:var(--checkbox-text-label-color);cursor:pointer;display:flex;font-size:calc(18/var(--font-size-base)*1rem);font-weight:400;gap:calc(8/var(--font-size-base)*1rem);grid-area:label;line-height:1.25;margin:0}@media (width < 667px){.af-checkbox-text label{font-size:calc(16/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon}.af-checkbox-text .af-item-message{grid-area:message}.af-checkbox-text label{--checkbox-text-label-color:var(--color-black)}
+.af-checkbox-text{align-items:start;display:grid;gap:calc(8/var(--font-size-base)*1rem);grid-template-areas:"icon label";grid-template-columns:auto 1fr}.af-checkbox-text:has(>.af-item-message){grid-template-areas:"icon label" "icon message"}.af-checkbox-text label{cursor:pointer;display:contents}.af-checkbox-text__label-content{color:var(--checkbox-text-label-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;grid-area:label;line-height:1.25}@media (width > 667px){.af-checkbox-text__label-content{font-size:calc(18/var(--font-size-base)*1rem)}}.af-checkbox-text .af-checkbox{grid-area:icon}.af-checkbox-text .af-item-message{grid-area:message}.af-checkbox-text{--checkbox-text-label-color:var(--color-black)}

package/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextLF.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextLF.scss%23sass"],"names":[],"mappings":"AAEA,kBAME,6CAAA,CALA,YAAA,CCDF,+CAAA,CDKE,qCCFF,CDKE,yCACE,0CCHJ,CDME,wBAIE,sBAAA,CAKA,sCAAA,CACA,cAAA,CATA,YAAA,CAKA,6CAAA,CACA,eAAA,CAFA,sCAAA,CAFA,eAAA,CAKA,gBAAA,CANA,QCIJ,CDMI,uBAZF,wBAaI,6CCHJ,CACF,CDME,+BACE,cCJJ,CDOE,mCACE,iBCLJ,CC5BE,wBACE,8CD+BJ","file":"CheckboxTextLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-checkbox-text {\n  display: grid;\n  grid-template-areas:\n    \"icon label\"\n    \"icon message\";\n  grid-template-columns: min-content 1fr;\n  column-gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-message) {\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  label {\n    display: flex;\n    margin: 0;\n    grid-area: label;\n    align-items: flex-start;\n    gap: calc(8 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25;\n    color: var(--checkbox-text-label-color);\n    cursor: pointer;\n\n    @media (width < #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  .af-checkbox {\n    grid-area: icon;\n  }\n\n  .af-item-message {\n    grid-area: message;\n  }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n  & label {\n    --checkbox-text-label-color: var(--color-black);\n  }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n  & label {\n    --checkbox-text-label-color: var(--color-black);\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/CheckboxText/CheckboxTextCommon.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextLF.scss","../../../../src/Form/Checkbox/CheckboxText/CheckboxTextLF.scss%23sass"],"names":[],"mappings":"AAEA,kBCEA,iBAAA,CDDE,YAAA,CAIA,sCAAA,CCLF,gCAAA,CDGE,8BCCF,CDGE,yCACE,+CCDJ,CDME,wBAEE,cAAA,CADA,gBCHJ,CDOE,iCAKE,sCAAA,CAHA,6CAAA,CACA,eAAA,CAFA,eAAA,CAGA,gBCJJ,CDOI,uBAPF,iCAQI,6CCJJ,CACF,CDOE,+BACE,cCLJ,CDQE,mCACE,iBCNJ,CC7BA,kBACE,8CDgCF","file":"CheckboxTextLF.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-checkbox-text {\n  display: grid;\n  grid-template-areas: \"icon label\";\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:has(> .af-item-message) {\n    grid-template-areas:\n      \"icon label\"\n      \"icon message\";\n  }\n\n  label {\n    display: contents;\n    cursor: pointer;\n  }\n\n  &__label-content {\n    grid-area: label;\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: 1.25;\n    color: var(--checkbox-text-label-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  .af-checkbox {\n    grid-area: icon;\n  }\n\n  .af-item-message {\n    grid-area: message;\n  }\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n  --checkbox-text-label-color: var(--color-black);\n}\n","@use \"CheckboxTextCommon\";\n\n.af-checkbox-text {\n  --checkbox-text-label-color: var(--color-black);\n}\n"]}

package/dist/Form/Checkbox/CheckboxText/CheckboxTextLF.scss

@@ -1,7 +1,5 @@
 @use "CheckboxTextCommon";
 
 .af-checkbox-text {
-  & label {
-    --checkbox-text-label-color: var(--color-black);
-  }
+  --checkbox-text-label-color: var(--color-black);
 }

package/dist/Form/TextArea/TextAreaApollo.css

@@ -1 +1 @@
-.af-form__input-container .af-item-label .af-item-label__label{font-size:var(--input-text-area-font-size)}.af-form__input-container .af-form__input-textarea{background-color:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color);border-radius:var(--input-text-area-border-radius);box-shadow:0 0 0 1px var(--input-text-area-background);color:var(--input-text-area-color);font:var(--font-family-base);font-size:var(--input-text-area-font-size);line-height:calc(20/var(--font-size-base)*1rem);min-height:calc(56/var(--font-size-base)*1rem);padding:calc(16/var(--font-size-base)*1rem);resize:vertical;width:100%}@media (width < 667px){.af-form__input-container .af-form__input-textarea{box-shadow:none;line-height:125%;--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}.af-form__input-container .af-form__input-textarea:focus{font-size:var(--input-text-area-font-size)}}.af-form__input-container .af-form__input-textarea :focus,.af-form__input-container .af-form__input-textarea :hover,.af-form__input-container .af-form__input-textarea :not(:placeholder-shown),.af-form__input-container .af-form__input-textarea--error{box-shadow:1px solid var(--input-text-area-box-shadow-color);color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight);outline:none}.af-form__input-container .af-form__input-textarea:active,.af-form__input-container .af-form__input-textarea:enabled,.af-form__input-container .af-form__input-textarea:focus{box-shadow:0 0 0 1px var(--white);outline:none}.af-form__input-container .af-form__input-textarea--error:focus,.af-form__input-container .af-form__input-textarea--error:hover{box-shadow:0 0 0 1px var(--input-text-area-box-shadow-color)}.af-form__input-container .af-form__input-textarea:disabled{background:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:placeholder-shown,:focus,:disabled,.af-form__input-textarea--error){box-shadow:0 0 0 1px var(--input-text-area-box-shadow)}.af-form__input-container .af-form__input-textarea:disabled:not(:placeholder-shown){border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error,:disabled):hover{border:var(--input-text-area-border-size) solid var(--input-text-area-border-color);box-shadow:0 0 0 1px var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):hover,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):not(:placeholder-shown,:focus){color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight)}.af-form__input-container .af-item-label .af-item-label__label{--input-text-area-font-size:calc(18/var(--font-size-base)*1rem)}@media (width < 667px){.af-form__input-container .af-item-label .af-item-label__label,.af-form__input-container :focus,.af-form__input-container :hover,.af-form__input-container :placeholder-shown,.af-form__input-container--error,.af-form__input-container:not(:disabled,.af-form__input-container--error){--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}}.af-form__input-textarea{--input-text-area-box-shadow:var(--axa-blue-100);--input-text-area-border-radius:var(--radius-8);--input-text-area-border-color:var(--axa-blue-65);--input-text-area-background:var(--white);--input-text-area-color:var(--neutral-80)}.af-form__input-textarea--error{--input-text-area-border-color:var(--axa-red-100)}.af-form__input-textarea--error:focus,.af-form__input-textarea--error:hover{--input-text-area-box-shadow-color:var(--axa-red-100)}.af-form__input-textarea:not(:placeholder-shown,:focus,:active){--input-text-area-font-color:var(--axa-blue-100)}.af-form__input-textarea :focus,.af-form__input-textarea :not(:placeholder-shown){--input-text-area-font-size:calc(18/var(--font-size-base)*1rem);--input-text-area-font-weight:400}.af-form__input-textarea:disabled{--input-text-area-border-color:var(--neutral-14);--input-text-area-background:var(--neutral-5)}.af-form__input-textarea:disabled:not(:placeholder-shown){--input-text-area-border-color:var(--neutral-14)}.af-form__input-textarea:not(.af-form__input-textarea--error):focus,.af-form__input-textarea:not(.af-form__input-textarea--error,:disabled):hover{--input-text-area-border-size:2px;--input-text-area-border-color:var(--axa-blue-100)}.af-form__input-textarea:not(:disabled,.af-form__input-textarea--error):not(:placeholder-shown){--input-text-area-font-color:var(--axa-blue-100);--input-text-area-font-weight:600}@media (width < 667px){.af-form__input-textarea,.af-form__input-textarea:not(.af-form__input-textarea--error):focus{--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}}
+.af-form__input-textarea{background-color:var(--input-textarea-background-color);border:none;border-radius:var(--input-textarea-border-radius);box-shadow:0 0 0 var(--input-textarea-box-shadow-size) var(--input-textarea-box-shadow-color);color:var(--input-textarea-color);font:var(--font-family-base);font-size:var(--input-textarea-font-size);font-weight:600;line-height:125%;min-height:calc(56/var(--font-size-base)*1rem);outline:none;padding:calc(16/var(--font-size-base)*1rem);width:100%}@media (width > 1023px){.af-form__input-textarea{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-textarea::placeholder{color:var(--input-textarea-placeholder-color);font-weight:400}.af-form__input-textarea{--input-textarea-border-radius:var(--radius-8);--input-textarea-box-shadow-color:var(--axa-blue-65);--input-textarea-placeholder-color:var(--neutral-80);--input-textarea-background-color:var(--white);--input-textarea-color:var(--axa-blue-100);--input-textarea-box-shadow-size:1px}.af-form__input-textarea:focus,.af-form__input-textarea:hover,.af-form__input-textarea:not(:placeholder-shown){--input-textarea-box-shadow-color:var(--axa-blue-100);--input-textarea-box-shadow-size:2px}.af-form__input-textarea[aria-invalid=true]{--input-textarea-box-shadow-color:var(--red-alert-100);--input-textarea-box-shadow-size:2px}.af-form__input-textarea[aria-invalid=true]:focus,.af-form__input-textarea[aria-invalid=true]:hover{--input-textarea-box-shadow-size:3px}.af-form__input-textarea:disabled{--input-textarea-background-color:var(--neutral-5);--input-textarea-box-shadow-color:var(--neutral-50);--input-textarea-placeholder-color:var(--neutral-50);--input-textarea-color:var(--neutral-80)}.af-form__input-textarea:disabled,.af-form__input-textarea:disabled:hover{--input-textarea-box-shadow-size:1px}.af-form__input-textarea:not(:placeholder-shown):hover{--input-textarea-box-shadow-size:3px}

package/dist/Form/TextArea/TextAreaApollo.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaApollo.scss","../../../src/Form/TextArea/TextAreaApollo.scss%23sass"],"names":[],"mappings":"AAGE,+DCFF,0CACA,CDKE,mDAUE,kDAAA,CANA,oDAAA,CACA,kDAAA,CAMA,sDAAA,CAFA,kCAAA,CAHA,4BAAA,CACA,0CAAA,CACA,+CAAA,CANA,8CAAA,CACA,2CAAA,CASA,eAAA,CAXA,UCQJ,CDKI,uBAdF,mDCaF,eAAA,CADE,gBAAA,CDMI,+DCHN,CDKM,yDCHJ,0CACA,CACF,CDMI,0PAME,4DAAA,CADA,uCAAA,CADA,8CAAA,CAGA,YCJN,CDOI,8KAGE,iCAAA,CACA,YCPN,CDUI,gIAEE,4DCTN,CDYI,4DAEE,4CAAA,CADA,oDCTN,CDaI,4HAME,sDCbN,CDgBI,oFACE,oDCdN,CDiBI,sMAEE,mFAAA,CAEA,wDCjBN,CDqBM,+ZAIE,uCAAA,CADA,8CCpBR,CC3DE,+DACE,+DD8DJ,CC5DE,uBAKE,yRAKE,+DD2DJ,CACF,CCvDA,yBACE,gDAAA,CACA,+CAAA,CACA,iDAAA,CACA,yCAAA,CACA,yCD0DF,CCxDE,gCACE,iDD0DJ,CCvDE,4EAEE,qDDwDJ,CCrDE,gEACE,gDDuDJ,CCpDE,kFAEE,+DAAA,CACA,iCDsDJ,CCnDE,kCACE,gDAAA,CACA,6CDqDJ,CClDE,0DACE,gDDoDJ,CCjDE,kJAEE,iCAAA,CACA,kDDkDJ,CC9CI,gGACE,gDAAA,CACA,iCDgDN,CC5CE,uBAGE,6FACE,+DD+CJ,CACF","file":"TextAreaApollo.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form__input-container {\n  .af-item-label .af-item-label__label {\n    font-size: var(--input-text-area-font-size);\n  }\n\n  .af-form__input-textarea {\n    width: 100%;\n    min-height: calc(56 / var(--font-size-base) * 1rem);\n    padding: calc(16 / var(--font-size-base) * 1rem);\n    border: 1px solid var(--input-text-area-border-color);\n    border-radius: var(--input-text-area-border-radius);\n    font: var(--font-family-base);\n    font-size: var(--input-text-area-font-size);\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    color: var(--input-text-area-color);\n    background-color: var(--input-text-area-background);\n    box-shadow: 0 0 0 1px var(--input-text-area-background);\n    resize: vertical;\n\n    @media (width < #{breakpoints.$breakpoint-sm}) {\n      line-height: 125%;\n      box-shadow: none;\n\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n      &:focus {\n        font-size: var(--input-text-area-font-size);\n      }\n    }\n\n    &--error,\n    :not(:placeholder-shown),\n    :focus,\n    :hover {\n      font-weight: var(--input-text-area-font-weight);\n      color: var(--input-text-area-font-color);\n      box-shadow: 1px solid var(--input-text-area-box-shadow-color);\n      outline: none;\n    }\n\n    &:enabled,\n    &:focus,\n    &:active {\n      box-shadow: 0 0 0 1px var(--white);\n      outline: none;\n    }\n\n    &--error:hover,\n    &--error:focus {\n      box-shadow: 0 0 0 1px var(--input-text-area-box-shadow-color);\n    }\n\n    &:disabled {\n      border: 1px solid var(--input-text-area-border-color);\n      background: var(--input-text-area-background);\n    }\n\n    &:not(\n        :placeholder-shown,\n        :focus,\n        :disabled,\n        .af-form__input-textarea--error\n      ) {\n      box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);\n    }\n\n    &:disabled:not(:placeholder-shown) {\n      border: 1px solid var(--input-text-area-border-color);\n    }\n\n    &:not(.af-form__input-textarea--error):focus,\n    &:not(.af-form__input-textarea--error, :disabled):hover {\n      border: var(--input-text-area-border-size) solid\n        var(--input-text-area-border-color);\n      box-shadow: 0 0 0 1px var(--input-text-area-border-color);\n    }\n\n    &:not(:disabled, &--error) {\n      &:focus,\n      &:hover,\n      &:not(:placeholder-shown, :focus) {\n        font-weight: var(--input-text-area-font-weight);\n        color: var(--input-text-area-font-color);\n      }\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n@use \"TextAreaCommon\";\n\n.af-form__input-container {\n  .af-item-label .af-item-label__label {\n    --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n  @media (width < #{breakpoints.$breakpoint-sm}) {\n    .af-item-label .af-item-label__label {\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n\n    :focus,\n    :hover,\n    :placeholder-shown,\n    &:not(:disabled, &--error),\n    &--error {\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n\n.af-form__input-textarea {\n  --input-text-area-box-shadow: var(--axa-blue-100);\n  --input-text-area-border-radius: var(--radius-8);\n  --input-text-area-border-color: var(--axa-blue-65);\n  --input-text-area-background: var(--white);\n  --input-text-area-color: var(--neutral-80);\n\n  &--error {\n    --input-text-area-border-color: var(--axa-red-100);\n  }\n\n  &--error:hover,\n  &--error:focus {\n    --input-text-area-box-shadow-color: var(--axa-red-100);\n  }\n\n  &:not(:placeholder-shown, :focus, :active) {\n    --input-text-area-font-color: var(--axa-blue-100);\n  }\n\n  :not(:placeholder-shown),\n  :focus {\n    --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n    --input-text-area-font-weight: 400;\n  }\n\n  &:disabled {\n    --input-text-area-border-color: var(--neutral-14);\n    --input-text-area-background: var(--neutral-5);\n  }\n\n  &:disabled:not(:placeholder-shown) {\n    --input-text-area-border-color: var(--neutral-14);\n  }\n\n  &:not(.af-form__input-textarea--error):focus,\n  &:not(.af-form__input-textarea--error, :disabled):hover {\n    --input-text-area-border-size: 2px;\n    --input-text-area-border-color: var(--axa-blue-100);\n  }\n\n  &:not(:disabled, &--error) {\n    &:not(:placeholder-shown) {\n      --input-text-area-font-color: var(--axa-blue-100);\n      --input-text-area-font-weight: 600;\n    }\n  }\n\n  @media (width < #{breakpoints.$breakpoint-sm}) {\n    --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n    &:not(.af-form__input-textarea--error):focus {\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n@use \"TextAreaCommon\";\n\n.af-form__input-container {\n  .af-item-label .af-item-label__label {\n    --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n  @media (width < #{breakpoints.$breakpoint-sm}) {\n    .af-item-label .af-item-label__label {\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n\n    :focus,\n    :hover,\n    :placeholder-shown,\n    &:not(:disabled, &--error),\n    &--error {\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n\n.af-form__input-textarea {\n  --input-text-area-box-shadow: var(--axa-blue-100);\n  --input-text-area-border-radius: var(--radius-8);\n  --input-text-area-border-color: var(--axa-blue-65);\n  --input-text-area-background: var(--white);\n  --input-text-area-color: var(--neutral-80);\n\n  &--error {\n    --input-text-area-border-color: var(--axa-red-100);\n  }\n\n  &--error:hover,\n  &--error:focus {\n    --input-text-area-box-shadow-color: var(--axa-red-100);\n  }\n\n  &:not(:placeholder-shown, :focus, :active) {\n    --input-text-area-font-color: var(--axa-blue-100);\n  }\n\n  :not(:placeholder-shown),\n  :focus {\n    --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);\n    --input-text-area-font-weight: 400;\n  }\n\n  &:disabled {\n    --input-text-area-border-color: var(--neutral-14);\n    --input-text-area-background: var(--neutral-5);\n  }\n\n  &:disabled:not(:placeholder-shown) {\n    --input-text-area-border-color: var(--neutral-14);\n  }\n\n  &:not(.af-form__input-textarea--error):focus,\n  &:not(.af-form__input-textarea--error, :disabled):hover {\n    --input-text-area-border-size: 2px;\n    --input-text-area-border-color: var(--axa-blue-100);\n  }\n\n  &:not(:disabled, &--error) {\n    &:not(:placeholder-shown) {\n      --input-text-area-font-color: var(--axa-blue-100);\n      --input-text-area-font-weight: 600;\n    }\n  }\n\n  @media (width < #{breakpoints.$breakpoint-sm}) {\n    --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n    &:not(.af-form__input-textarea--error):focus {\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss","../../../src/Form/TextArea/TextAreaApollo.scss","../../../src/Form/TextArea/TextAreaApollo.scss%23sass"],"names":[],"mappings":"AAEA,yBAWE,uDAAA,CAPA,WAAA,CACA,iDAAA,CAOA,6FAAA,CAFA,iCAAA,CAJA,4BAAA,CACA,yCAAA,CACA,eAAA,CACA,gBAAA,CAPA,8CAAA,CAYA,YAAA,CCbF,2CAAA,CAFA,UAaA,CDIE,wBAhBF,yBAiBI,6CCDF,CACF,CDGE,sCAEE,6CAAA,CADA,eCAJ,CCpBA,yBACE,8CAAA,CACA,oDAAA,CACA,oDAAA,CACA,8CAAA,CACA,0CAAA,CACA,oCDuBF,CCrBE,+GAGE,qDAAA,CACA,oCDqBJ,CClBE,4CACE,sDAAA,CACA,oCDoBJ,CClBI,oGAEE,oCDmBN,CCfE,kCACE,kDAAA,CACA,mDAAA,CACA,oDAAA,CACA,wCDkBJ,CCfI,0EAFA,oCDoBJ,CCbE,uDACE,oCDeJ","file":"TextAreaApollo.css","sourcesContent":["@use \"../../common/breakpoints\";\n\n.af-form__input-textarea {\n  width: 100%;\n  min-height: calc(56 / var(--font-size-base) * 1rem);\n  padding: calc(16 / var(--font-size-base) * 1rem);\n  border: none;\n  border-radius: var(--input-textarea-border-radius);\n  font: var(--font-family-base);\n  font-size: var(--input-textarea-font-size);\n  font-weight: 600;\n  line-height: 125%;\n  color: var(--input-textarea-color);\n  background-color: var(--input-textarea-background-color);\n  box-shadow: 0 0 0 var(--input-textarea-box-shadow-size)\n    var(--input-textarea-box-shadow-color);\n  outline: none;\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n\n  &::placeholder {\n    font-weight: 400;\n    color: var(--input-textarea-placeholder-color);\n  }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__input-textarea {\n  --input-textarea-border-radius: var(--radius-8);\n  --input-textarea-box-shadow-color: var(--axa-blue-65);\n  --input-textarea-placeholder-color: var(--neutral-80);\n  --input-textarea-background-color: var(--white);\n  --input-textarea-color: var(--axa-blue-100);\n  --input-textarea-box-shadow-size: 1px;\n\n  &:hover,\n  &:focus,\n  &:not(:placeholder-shown) {\n    --input-textarea-box-shadow-color: var(--axa-blue-100);\n    --input-textarea-box-shadow-size: 2px;\n  }\n\n  &[aria-invalid=\"true\"] {\n    --input-textarea-box-shadow-color: var(--red-alert-100);\n    --input-textarea-box-shadow-size: 2px;\n\n    &:hover,\n    &:focus {\n      --input-textarea-box-shadow-size: 3px;\n    }\n  }\n\n  &:disabled {\n    --input-textarea-background-color: var(--neutral-5);\n    --input-textarea-box-shadow-color: var(--neutral-50);\n    --input-textarea-placeholder-color: var(--neutral-50);\n    --input-textarea-color: var(--neutral-80);\n    --input-textarea-box-shadow-size: 1px;\n\n    &:hover {\n      --input-textarea-box-shadow-size: 1px;\n    }\n  }\n\n  &:not(:placeholder-shown):hover {\n    --input-textarea-box-shadow-size: 3px;\n  }\n}\n","@use \"../../common/breakpoints\";\n@use \"TextAreaCommon\";\n\n.af-form__input-textarea {\n  --input-textarea-border-radius: var(--radius-8);\n  --input-textarea-box-shadow-color: var(--axa-blue-65);\n  --input-textarea-placeholder-color: var(--neutral-80);\n  --input-textarea-background-color: var(--white);\n  --input-textarea-color: var(--axa-blue-100);\n  --input-textarea-box-shadow-size: 1px;\n\n  &:hover,\n  &:focus,\n  &:not(:placeholder-shown) {\n    --input-textarea-box-shadow-color: var(--axa-blue-100);\n    --input-textarea-box-shadow-size: 2px;\n  }\n\n  &[aria-invalid=\"true\"] {\n    --input-textarea-box-shadow-color: var(--red-alert-100);\n    --input-textarea-box-shadow-size: 2px;\n\n    &:hover,\n    &:focus {\n      --input-textarea-box-shadow-size: 3px;\n    }\n  }\n\n  &:disabled {\n    --input-textarea-background-color: var(--neutral-5);\n    --input-textarea-box-shadow-color: var(--neutral-50);\n    --input-textarea-placeholder-color: var(--neutral-50);\n    --input-textarea-color: var(--neutral-80);\n    --input-textarea-box-shadow-size: 1px;\n\n    &:hover {\n      --input-textarea-box-shadow-size: 1px;\n    }\n  }\n\n  &:not(:placeholder-shown):hover {\n    --input-textarea-box-shadow-size: 3px;\n  }\n}\n"]}

package/dist/Form/TextArea/TextAreaApollo.scss

@@ -1,78 +1,44 @@
-@use "../../common/breakpoints" as breakpoints;
+@use "../../common/breakpoints";
 @use "TextAreaCommon";
 
-.af-form__input-container {
-  .af-item-label .af-item-label__label {
-    --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);
-  }
-  @media (width < #{breakpoints.$breakpoint-sm}) {
-    .af-item-label .af-item-label__label {
-      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
-    }
-
-    :focus,
-    :hover,
-    :placeholder-shown,
-    &:not(:disabled, &--error),
-    &--error {
-      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
-    }
-  }
-}
-
 .af-form__input-textarea {
-  --input-text-area-box-shadow: var(--axa-blue-100);
-  --input-text-area-border-radius: var(--radius-8);
-  --input-text-area-border-color: var(--axa-blue-65);
-  --input-text-area-background: var(--white);
-  --input-text-area-color: var(--neutral-80);
-
-  &--error {
-    --input-text-area-border-color: var(--axa-red-100);
-  }
-
-  &--error:hover,
-  &--error:focus {
-    --input-text-area-box-shadow-color: var(--axa-red-100);
-  }
-
-  &:not(:placeholder-shown, :focus, :active) {
-    --input-text-area-font-color: var(--axa-blue-100);
-  }
-
-  :not(:placeholder-shown),
-  :focus {
-    --input-text-area-font-size: calc(18 / var(--font-size-base) * 1rem);
-    --input-text-area-font-weight: 400;
+  --input-textarea-border-radius: var(--radius-8);
+  --input-textarea-box-shadow-color: var(--axa-blue-65);
+  --input-textarea-placeholder-color: var(--neutral-80);
+  --input-textarea-background-color: var(--white);
+  --input-textarea-color: var(--axa-blue-100);
+  --input-textarea-box-shadow-size: 1px;
+
+  &:hover,
+  &:focus,
+  &:not(:placeholder-shown) {
+    --input-textarea-box-shadow-color: var(--axa-blue-100);
+    --input-textarea-box-shadow-size: 2px;
+  }
+
+  &[aria-invalid="true"] {
+    --input-textarea-box-shadow-color: var(--red-alert-100);
+    --input-textarea-box-shadow-size: 2px;
+
+    &:hover,
+    &:focus {
+      --input-textarea-box-shadow-size: 3px;
+    }
   }
 
   &:disabled {
-    --input-text-area-border-color: var(--neutral-14);
-    --input-text-area-background: var(--neutral-5);
-  }
-
-  &:disabled:not(:placeholder-shown) {
-    --input-text-area-border-color: var(--neutral-14);
-  }
-
-  &:not(.af-form__input-textarea--error):focus,
-  &:not(.af-form__input-textarea--error, :disabled):hover {
-    --input-text-area-border-size: 2px;
-    --input-text-area-border-color: var(--axa-blue-100);
-  }
-
-  &:not(:disabled, &--error) {
-    &:not(:placeholder-shown) {
-      --input-text-area-font-color: var(--axa-blue-100);
-      --input-text-area-font-weight: 600;
+    --input-textarea-background-color: var(--neutral-5);
+    --input-textarea-box-shadow-color: var(--neutral-50);
+    --input-textarea-placeholder-color: var(--neutral-50);
+    --input-textarea-color: var(--neutral-80);
+    --input-textarea-box-shadow-size: 1px;
+
+    &:hover {
+      --input-textarea-box-shadow-size: 1px;
     }
   }
 
-  @media (width < #{breakpoints.$breakpoint-sm}) {
-    --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
-
-    &:not(.af-form__input-textarea--error):focus {
-      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);
-    }
+  &:not(:placeholder-shown):hover {
+    --input-textarea-box-shadow-size: 3px;
   }
 }

package/dist/Form/TextArea/TextAreaCommon.css

@@ -1 +1 @@
-.af-form__input-container .af-item-label .af-item-label__label{font-size:var(--input-text-area-font-size)}.af-form__input-container .af-form__input-textarea{background-color:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color);border-radius:var(--input-text-area-border-radius);box-shadow:0 0 0 1px var(--input-text-area-background);color:var(--input-text-area-color);font:var(--font-family-base);font-size:var(--input-text-area-font-size);line-height:calc(20/var(--font-size-base)*1rem);min-height:calc(56/var(--font-size-base)*1rem);padding:calc(16/var(--font-size-base)*1rem);resize:vertical;width:100%}@media (width < 667px){.af-form__input-container .af-form__input-textarea{box-shadow:none;line-height:125%;--input-text-area-font-size:calc(16/var(--font-size-base)*1rem)}.af-form__input-container .af-form__input-textarea:focus{font-size:var(--input-text-area-font-size)}}.af-form__input-container .af-form__input-textarea :focus,.af-form__input-container .af-form__input-textarea :hover,.af-form__input-container .af-form__input-textarea :not(:placeholder-shown),.af-form__input-container .af-form__input-textarea--error{box-shadow:1px solid var(--input-text-area-box-shadow-color);color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight);outline:none}.af-form__input-container .af-form__input-textarea:active,.af-form__input-container .af-form__input-textarea:enabled,.af-form__input-container .af-form__input-textarea:focus{box-shadow:0 0 0 1px var(--white);outline:none}.af-form__input-container .af-form__input-textarea--error:focus,.af-form__input-container .af-form__input-textarea--error:hover{box-shadow:0 0 0 1px var(--input-text-area-box-shadow-color)}.af-form__input-container .af-form__input-textarea:disabled{background:var(--input-text-area-background);border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:placeholder-shown,:focus,:disabled,.af-form__input-textarea--error){box-shadow:0 0 0 1px var(--input-text-area-box-shadow)}.af-form__input-container .af-form__input-textarea:disabled:not(:placeholder-shown){border:1px solid var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(.af-form__input-textarea--error,:disabled):hover{border:var(--input-text-area-border-size) solid var(--input-text-area-border-color);box-shadow:0 0 0 1px var(--input-text-area-border-color)}.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):focus,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):hover,.af-form__input-container .af-form__input-textarea:not(:disabled,.af-form__input-container .af-form__input-textarea--error):not(:placeholder-shown,:focus){color:var(--input-text-area-font-color);font-weight:var(--input-text-area-font-weight)}
+.af-form__input-textarea{background-color:var(--input-textarea-background-color);border:none;border-radius:var(--input-textarea-border-radius);box-shadow:0 0 0 var(--input-textarea-box-shadow-size) var(--input-textarea-box-shadow-color);color:var(--input-textarea-color);font:var(--font-family-base);font-size:var(--input-textarea-font-size);font-weight:600;line-height:125%;min-height:calc(56/var(--font-size-base)*1rem);outline:none;padding:calc(16/var(--font-size-base)*1rem);width:100%}@media (width > 1023px){.af-form__input-textarea{font-size:calc(18/var(--font-size-base)*1rem)}}.af-form__input-textarea::placeholder{color:var(--input-textarea-placeholder-color);font-weight:400}

package/dist/Form/TextArea/TextAreaCommon.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss%23sass","../../../src/Form/TextArea/TextAreaCommon.scss"],"names":[],"mappings":"AAGE,+DACE,0CCFJ,CDKE,mDAUE,kDAAA,CANA,oDAAA,CACA,kDAAA,CAMA,sDAAA,CAFA,kCAAA,CAHA,4BAAA,CACA,0CAAA,CACA,+CAAA,CANA,8CAAA,CACA,2CAAA,CASA,eAAA,CAXA,UCQJ,CDKI,uBAdF,mDAgBI,eAAA,CADA,gBAAA,CAGA,+DCHJ,CDKI,yDACE,0CCHN,CACF,CDMI,0PAME,4DAAA,CADA,uCAAA,CADA,8CAAA,CAGA,YCJN,CDOI,8KAGE,iCAAA,CACA,YCPN,CDUI,gIAEE,4DCTN,CDYI,4DAEE,4CAAA,CADA,oDCTN,CDaI,4HAME,sDCbN,CDgBI,oFACE,oDCdN,CDiBI,sMAEE,mFAAA,CAEA,wDCjBN,CDqBM,+ZAIE,uCAAA,CADA,8CCpBR","file":"TextAreaCommon.css","sourcesContent":["@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form__input-container {\n  .af-item-label .af-item-label__label {\n    font-size: var(--input-text-area-font-size);\n  }\n\n  .af-form__input-textarea {\n    width: 100%;\n    min-height: calc(56 / var(--font-size-base) * 1rem);\n    padding: calc(16 / var(--font-size-base) * 1rem);\n    border: 1px solid var(--input-text-area-border-color);\n    border-radius: var(--input-text-area-border-radius);\n    font: var(--font-family-base);\n    font-size: var(--input-text-area-font-size);\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    color: var(--input-text-area-color);\n    background-color: var(--input-text-area-background);\n    box-shadow: 0 0 0 1px var(--input-text-area-background);\n    resize: vertical;\n\n    @media (width < #{breakpoints.$breakpoint-sm}) {\n      line-height: 125%;\n      box-shadow: none;\n\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n      &:focus {\n        font-size: var(--input-text-area-font-size);\n      }\n    }\n\n    &--error,\n    :not(:placeholder-shown),\n    :focus,\n    :hover {\n      font-weight: var(--input-text-area-font-weight);\n      color: var(--input-text-area-font-color);\n      box-shadow: 1px solid var(--input-text-area-box-shadow-color);\n      outline: none;\n    }\n\n    &:enabled,\n    &:focus,\n    &:active {\n      box-shadow: 0 0 0 1px var(--white);\n      outline: none;\n    }\n\n    &--error:hover,\n    &--error:focus {\n      box-shadow: 0 0 0 1px var(--input-text-area-box-shadow-color);\n    }\n\n    &:disabled {\n      border: 1px solid var(--input-text-area-border-color);\n      background: var(--input-text-area-background);\n    }\n\n    &:not(\n        :placeholder-shown,\n        :focus,\n        :disabled,\n        .af-form__input-textarea--error\n      ) {\n      box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);\n    }\n\n    &:disabled:not(:placeholder-shown) {\n      border: 1px solid var(--input-text-area-border-color);\n    }\n\n    &:not(.af-form__input-textarea--error):focus,\n    &:not(.af-form__input-textarea--error, :disabled):hover {\n      border: var(--input-text-area-border-size) solid\n        var(--input-text-area-border-color);\n      box-shadow: 0 0 0 1px var(--input-text-area-border-color);\n    }\n\n    &:not(:disabled, &--error) {\n      &:focus,\n      &:hover,\n      &:not(:placeholder-shown, :focus) {\n        font-weight: var(--input-text-area-font-weight);\n        color: var(--input-text-area-font-color);\n      }\n    }\n  }\n}\n","@use \"../../common/breakpoints\" as breakpoints;\n\n.af-form__input-container {\n  .af-item-label .af-item-label__label {\n    font-size: var(--input-text-area-font-size);\n  }\n\n  .af-form__input-textarea {\n    width: 100%;\n    min-height: calc(56 / var(--font-size-base) * 1rem);\n    padding: calc(16 / var(--font-size-base) * 1rem);\n    border: 1px solid var(--input-text-area-border-color);\n    border-radius: var(--input-text-area-border-radius);\n    font: var(--font-family-base);\n    font-size: var(--input-text-area-font-size);\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    color: var(--input-text-area-color);\n    background-color: var(--input-text-area-background);\n    box-shadow: 0 0 0 1px var(--input-text-area-background);\n    resize: vertical;\n\n    @media (width < #{breakpoints.$breakpoint-sm}) {\n      line-height: 125%;\n      box-shadow: none;\n\n      --input-text-area-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n      &:focus {\n        font-size: var(--input-text-area-font-size);\n      }\n    }\n\n    &--error,\n    :not(:placeholder-shown),\n    :focus,\n    :hover {\n      font-weight: var(--input-text-area-font-weight);\n      color: var(--input-text-area-font-color);\n      box-shadow: 1px solid var(--input-text-area-box-shadow-color);\n      outline: none;\n    }\n\n    &:enabled,\n    &:focus,\n    &:active {\n      box-shadow: 0 0 0 1px var(--white);\n      outline: none;\n    }\n\n    &--error:hover,\n    &--error:focus {\n      box-shadow: 0 0 0 1px var(--input-text-area-box-shadow-color);\n    }\n\n    &:disabled {\n      border: 1px solid var(--input-text-area-border-color);\n      background: var(--input-text-area-background);\n    }\n\n    &:not(\n        :placeholder-shown,\n        :focus,\n        :disabled,\n        .af-form__input-textarea--error\n      ) {\n      box-shadow: 0 0 0 1px var(--input-text-area-box-shadow);\n    }\n\n    &:disabled:not(:placeholder-shown) {\n      border: 1px solid var(--input-text-area-border-color);\n    }\n\n    &:not(.af-form__input-textarea--error):focus,\n    &:not(.af-form__input-textarea--error, :disabled):hover {\n      border: var(--input-text-area-border-size) solid\n        var(--input-text-area-border-color);\n      box-shadow: 0 0 0 1px var(--input-text-area-border-color);\n    }\n\n    &:not(:disabled, &--error) {\n      &:focus,\n      &:hover,\n      &:not(:placeholder-shown, :focus) {\n        font-weight: var(--input-text-area-font-weight);\n        color: var(--input-text-area-font-color);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/Form/TextArea/TextAreaCommon.scss%23sass","../../../src/Form/TextArea/TextAreaCommon.scss"],"names":[],"mappings":"AAEA,yBAWE,uDAAA,CAPA,WAAA,CACA,iDAAA,CAOA,6FAAA,CAFA,iCAAA,CAJA,4BAAA,CACA,yCAAA,CACA,eAAA,CACA,gBAAA,CCTF,8CAAA,CDcE,YAAA,CAXA,2CAAA,CAFA,UCWF,CDIE,wBAhBF,yBAiBI,6CCDF,CACF,CDGE,sCAEE,6CAAA,CADA,eCAJ","file":"TextAreaCommon.css","sourcesContent":["@use \"../../common/breakpoints\";\n\n.af-form__input-textarea {\n  width: 100%;\n  min-height: calc(56 / var(--font-size-base) * 1rem);\n  padding: calc(16 / var(--font-size-base) * 1rem);\n  border: none;\n  border-radius: var(--input-textarea-border-radius);\n  font: var(--font-family-base);\n  font-size: var(--input-textarea-font-size);\n  font-weight: 600;\n  line-height: 125%;\n  color: var(--input-textarea-color);\n  background-color: var(--input-textarea-background-color);\n  box-shadow: 0 0 0 var(--input-textarea-box-shadow-size)\n    var(--input-textarea-box-shadow-color);\n  outline: none;\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n\n  &::placeholder {\n    font-weight: 400;\n    color: var(--input-textarea-placeholder-color);\n  }\n}\n","@use \"../../common/breakpoints\";\n\n.af-form__input-textarea {\n  width: 100%;\n  min-height: calc(56 / var(--font-size-base) * 1rem);\n  padding: calc(16 / var(--font-size-base) * 1rem);\n  border: none;\n  border-radius: var(--input-textarea-border-radius);\n  font: var(--font-family-base);\n  font-size: var(--input-textarea-font-size);\n  font-weight: 600;\n  line-height: 125%;\n  color: var(--input-textarea-color);\n  background-color: var(--input-textarea-background-color);\n  box-shadow: 0 0 0 var(--input-textarea-box-shadow-size)\n    var(--input-textarea-box-shadow-color);\n  outline: none;\n\n  @media (width > #{breakpoints.$breakpoint-md}) {\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n  }\n\n  &::placeholder {\n    font-weight: 400;\n    color: var(--input-textarea-placeholder-color);\n  }\n}\n"]}