@axa-fr/design-system-apollo-css 1.0.5-alpha.367 → 1.0.5-alpha.370

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css

@@ -1 +1 @@
-.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);gap:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);gap:calc(4/var(--font-size-base)*1rem);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);background-color:var(--card-checkbox-background-color);flex-direction:var(--card-checkbox-flex-direction);gap:calc(12/var(--font-size-base)*1rem);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);gap:calc(var(--card-checkbox-description-gap, 8)/var(--font-size-base)*1rem);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{align-self:stretch;border:1px solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label [aria-invalid=true],.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{outline:2px solid var(--card-checkbox-outline-color)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}.af-card-checkbox__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox__legend{--card-checkbox-color:var(--neutral-100)}.af-card-checkbox__legend [aria-hidden]{display:none}.af-card-checkbox__description{--card-checkbox-color:var(--neutral-80)}.af-card-checkbox-group--horizontal{--card-checkbox-flex-direction:column}.af-card-checkbox-group--horizontal .af-card-checkbox-label{--card-checkbox-flex-direction:row}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:row;--card-checkbox-margin-left:calc(12/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:flex-start}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group--vertical{--card-checkbox-flex-direction:row}.af-card-checkbox-group--vertical .af-card-checkbox-label{--card-checkbox-flex-direction:column-reverse}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:column;--card-checkbox-margin-left:calc(2/var(--font-size-base)*1rem)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:center}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-color:var(--axa-blue-65);--card-checkbox-border-radius:calc(8/var(--font-size-base)*1rem);--card-checkbox-align-items:center;--card-checkbox-outline-color:var(--card-checkbox-border-color);--card-checkbox-background-color:var(--white)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){--card-checkbox-label-text-color:var(--neutral-80)}.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-border-color:var(--axa-blue-100);--card-checkbox-background-color:var(--white)}.af-card-checkbox-group .af-card-checkbox-label:hover .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked){--card-checkbox-border-color:var(--axa-blue-100);--card-checkbox-background-color:var(--axa-blue-4)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true]:not(:has(input:checked)){--card-checkbox-background-color:var(--axa-red-4);--card-checkbox-border-color:var(--red-alert-100)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true]:not(:has(input:checked)) .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--neutral-80)}
+.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);gap:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);background-color:var(--card-checkbox-background-color);flex-direction:var(--card-checkbox-flex-direction);gap:calc(12/var(--font-size-base)*1rem);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-width:1px;align-self:stretch;border:var(--card-checkbox-border-width) solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;outline:var(--card-checkbox-outline-width) solid var(--card-checkbox-outline-color);outline-offset:calc((var(--card-checkbox-border-width) + var(--card-checkbox-outline-width))*-1);padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;gap:calc(var(--card-checkbox-content-description-gap, 4)/var(--font-size-base)*1rem);justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has([aria-invalid=true]),.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-outline-width:1px}.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):focus-visible,.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):focus-within,.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):hover{--card-checkbox-outline-width:2px}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}.af-card-checkbox__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox__legend{--card-checkbox-color:var(--neutral-100)}.af-card-checkbox__legend [aria-hidden]{display:none}.af-card-checkbox__description{--card-checkbox-color:var(--neutral-80)}.af-card-checkbox-group--horizontal{--card-checkbox-flex-direction:column}.af-card-checkbox-group--horizontal .af-card-checkbox-label{--card-checkbox-flex-direction:row}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:row;--card-checkbox-margin-left:calc(12/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:flex-start}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group--vertical{--card-checkbox-flex-direction:row}.af-card-checkbox-group--vertical .af-card-checkbox-label{--card-checkbox-flex-direction:column-reverse}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:column;--card-checkbox-margin-left:calc(2/var(--font-size-base)*1rem)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:center;--card-checkbox-content-description-gap:8}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-color:var(--axa-blue-65);--card-checkbox-border-radius:calc(8/var(--font-size-base)*1rem);--card-checkbox-align-items:center;--card-checkbox-outline-color:var(--card-checkbox-border-color);--card-checkbox-background-color:var(--white)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){--card-checkbox-label-text-color:var(--neutral-80)}.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-border-color:var(--axa-blue-100);--card-checkbox-background-color:var(--white)}.af-card-checkbox-group .af-card-checkbox-label:hover .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked){--card-checkbox-border-color:var(--axa-blue-100);--card-checkbox-background-color:var(--axa-blue-4)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--axa-blue-100)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true]:not(:has(input:checked)){--card-checkbox-background-color:var(--axa-red-4);--card-checkbox-border-color:var(--red-alert-100)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true]:not(:has(input:checked)) .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--neutral-80)}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss%23sass"],"names":[],"mappings":"AAGE,6BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,sCAAA,CACA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,4EAAA,CAIA,iBCdZ,CDoBI,gDAME,kBAAA,CAHA,kDAAA,CACA,gDAAA,CAGA,cAAA,CANA,YAAA,CAIA,QAAA,CAHA,YCbN,CDoBM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCClBR,CDoBQ,gHACE,YAAA,CAEA,cAAA,CADA,sBAAA,CCjBV,+CACA,CDoBU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eCjBZ,CDoBY,uBALF,iIAMI,6CAAA,CACA,eCjBZ,CACF,CDoBU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eCjBZ,CDoBY,uBALF,uIAMI,6CAAA,CACA,eCjBZ,CACF,CDsBM,wTAKE,oDCvBR,CD2BQ,0HACE,eCzBV,CCpIE,mCACE,oDDuIJ,CCpIE,0BACE,wCDsIJ,CCpII,wCACE,YDsIN,CClIE,+BACE,uCDoIJ,CChII,oCACE,qCDkIN,CChIM,4DACE,kCDkIR,CChIQ,sFACE,kCAAA,CACA,+DDkIV,CChIU,4HACE,qCAAA,CACA,qCDkIZ,CChIY,6IACE,oDDkId,CC3HI,kCACE,kCD6HN,CC3HM,0DACE,6CD6HR,CC3HQ,oFACE,qCAAA,CACA,8DD6HV,CC3HU,0HACE,qCAAA,CACA,iCD6HZ,CCvHI,gDACE,+CAAA,CACA,gEAAA,CACA,kCAAA,CACA,+DAAA,CACA,6CDyHN,CCtHQ,iIACE,oDDwHV,CCrHQ,uIACE,kDDuHV,CCnHM,sDACE,gDAAA,CACA,6CDqHR,CCnHQ,6GACE,oDDqHV,CCjHM,mEACE,gDAAA,CACA,kDDmHR,CCjHQ,0HACE,oDDmHV,CC/GM,4FACE,iDAAA,CACA,iDDiHR,CC/GQ,mJACE,kDDiHV","file":"CardCheckboxApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        gap: calc(16 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            gap: calc(4 / var(--font-size-base) * 1rem);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n        gap: calc(12 / var(--font-size-base) * 1rem);\n        background-color: var(--card-checkbox-background-color);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            gap: calc(\n              var(--card-checkbox-description-gap, 8) / var(--font-size-base) *\n                1rem\n            );\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(8 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      [aria-invalid=\"true\"] {\n        outline: 2px solid var(--card-checkbox-outline-color);\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-checkbox-color: var(--neutral-80);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n\n            & > span:first-child {\n              --card-checkbox-label-text-color: var(--axa-blue-100);\n            }\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: column-reverse;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--axa-blue-65);\n      --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-checkbox-align-items: center;\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n      --card-checkbox-background-color: var(--white);\n\n      .af-card-checkbox-content .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n\n      &:hover {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--white);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--axa-blue-4);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &[aria-invalid=\"true\"]:not(:has(input:checked)) {\n        --card-checkbox-background-color: var(--axa-red-4);\n        --card-checkbox-border-color: var(--red-alert-100);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-checkbox-color: var(--neutral-80);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n\n            & > span:first-child {\n              --card-checkbox-label-text-color: var(--axa-blue-100);\n            }\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: column-reverse;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--axa-blue-65);\n      --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-checkbox-align-items: center;\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n      --card-checkbox-background-color: var(--white);\n\n      .af-card-checkbox-content .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n\n      &:hover {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--white);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--axa-blue-4);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &[aria-invalid=\"true\"]:not(:has(input:checked)) {\n        --card-checkbox-background-color: var(--axa-red-4);\n        --card-checkbox-border-color: var(--red-alert-100);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss%23sass"],"names":[],"mappings":"AAGE,6BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDACE,gCAAA,CAQA,kBAAA,CAJA,gFAAA,CAEA,gDAAA,CAYA,cAAA,CAhBA,YAAA,CAKA,QAAA,CAEA,mFAAA,CAEA,gGAAA,CARA,YCTN,CD0BM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCxBR,CD0BQ,gHACE,YAAA,CCtBV,cAAA,CDwBU,oFAAA,CADA,sBAAA,CAMA,+CC3BV,CD6BU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,iIAMI,6CAAA,CACA,eC1BZ,CACF,CD6BU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,uIAMI,6CAAA,CACA,eC1BZ,CACF,CD+BM,6TAKE,iCCjCR,CDqCQ,wTAGE,iCCrCV,CD0CQ,0HACE,eCxCV,CCxIE,mCACE,oDD2IJ,CCxIE,0BACE,wCD0IJ,CCxII,wCACE,YD0IN,CCtIE,+BACE,uCDwIJ,CCpII,oCACE,qCDsIN,CCpIM,4DACE,kCDsIR,CCpIQ,sFACE,kCAAA,CACA,+DDsIV,CCpIU,4HACE,qCAAA,CACA,qCDsIZ,CCpIY,6IACE,oDDsId,CC/HI,kCACE,kCDiIN,CC/HM,0DACE,6CDiIR,CC/HQ,oFACE,qCAAA,CACA,8DDiIV,CC/HU,0HACE,qCAAA,CACA,iCAAA,CACA,yCDiIZ,CC3HI,gDACE,+CAAA,CACA,gEAAA,CACA,kCAAA,CACA,+DAAA,CACA,6CD6HN,CC1HQ,iIACE,oDD4HV,CCzHQ,uIACE,kDD2HV,CCvHM,sDACE,gDAAA,CACA,6CDyHR,CCvHQ,6GACE,oDDyHV,CCrHM,mEACE,gDAAA,CACA,kDDuHR,CCrHQ,0HACE,oDDuHV,CCnHM,4FACE,iDAAA,CACA,iDDqHR,CCnHQ,mJACE,kDDqHV","file":"CardCheckboxApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        gap: calc(16 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n        gap: calc(12 / var(--font-size-base) * 1rem);\n        background-color: var(--card-checkbox-background-color);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-width: 1px;\n\n      display: flex;\n      padding: 1rem;\n      border: var(--card-checkbox-border-width) solid\n        var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      outline: var(--card-checkbox-outline-width) solid\n        var(--card-checkbox-outline-color);\n      outline-offset: calc(\n        -1 *\n          calc(\n            var(--card-checkbox-border-width) +\n              var(--card-checkbox-outline-width)\n          )\n      );\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(8 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          gap: calc(\n            var(--card-checkbox-content-description-gap, 4) /\n              var(--font-size-base) * 1rem\n          );\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has([aria-invalid=\"true\"]),\n      &:has(input:checked) {\n        --card-checkbox-outline-width: 1px;\n      }\n\n      &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n        &:hover,\n        &:focus-visible,\n        &:focus-within {\n          --card-checkbox-outline-width: 2px;\n        }\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-checkbox-color: var(--neutral-80);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n\n            & > span:first-child {\n              --card-checkbox-label-text-color: var(--axa-blue-100);\n            }\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: column-reverse;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n            --card-checkbox-content-description-gap: 8;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--axa-blue-65);\n      --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-checkbox-align-items: center;\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n      --card-checkbox-background-color: var(--white);\n\n      .af-card-checkbox-content .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n\n      &:hover {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--white);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--axa-blue-4);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &[aria-invalid=\"true\"]:not(:has(input:checked)) {\n        --card-checkbox-background-color: var(--axa-red-4);\n        --card-checkbox-border-color: var(--red-alert-100);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-checkbox-color: var(--neutral-80);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n\n            & > span:first-child {\n              --card-checkbox-label-text-color: var(--axa-blue-100);\n            }\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: column-reverse;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n            --card-checkbox-content-description-gap: 8;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--axa-blue-65);\n      --card-checkbox-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-checkbox-align-items: center;\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n      --card-checkbox-background-color: var(--white);\n\n      .af-card-checkbox-content .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n\n      &:hover {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--white);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--axa-blue-100);\n        --card-checkbox-background-color: var(--axa-blue-4);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--axa-blue-100);\n        }\n      }\n\n      &[aria-invalid=\"true\"]:not(:has(input:checked)) {\n        --card-checkbox-background-color: var(--axa-red-4);\n        --card-checkbox-border-color: var(--red-alert-100);\n\n        .af-card-checkbox-content-description > span:first-child {\n          --card-checkbox-label-text-color: var(--neutral-80);\n        }\n      }\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss

@@ -54,6 +54,7 @@
           .af-card-checkbox-content-description {
             --card-checkbox-flex-direction: column;
             --card-checkbox-align-item: center;
+            --card-checkbox-content-description-gap: 8;
           }
         }
       }

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css

@@ -1 +1 @@
-.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);gap:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);gap:calc(4/var(--font-size-base)*1rem);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);background-color:var(--card-checkbox-background-color);flex-direction:var(--card-checkbox-flex-direction);gap:calc(12/var(--font-size-base)*1rem);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);gap:calc(var(--card-checkbox-description-gap, 8)/var(--font-size-base)*1rem);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{align-self:stretch;border:1px solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label [aria-invalid=true],.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{outline:2px solid var(--card-checkbox-outline-color)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}
+.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);gap:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);background-color:var(--card-checkbox-background-color);flex-direction:var(--card-checkbox-flex-direction);gap:calc(12/var(--font-size-base)*1rem);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-width:1px;align-self:stretch;border:var(--card-checkbox-border-width) solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;outline:var(--card-checkbox-outline-width) solid var(--card-checkbox-outline-color);outline-offset:calc((var(--card-checkbox-border-width) + var(--card-checkbox-outline-width))*-1);padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;gap:calc(var(--card-checkbox-content-description-gap, 4)/var(--font-size-base)*1rem);justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has([aria-invalid=true]),.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-outline-width:1px}.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):focus-visible,.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):focus-within,.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):hover{--card-checkbox-outline-width:2px}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,sCAAA,CACA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,4EAAA,CAIA,iBCdZ,CDoBI,gDAME,kBAAA,CAHA,kDAAA,CACA,gDAAA,CAGA,cAAA,CANA,YAAA,CAIA,QAAA,CAHA,YCbN,CDoBM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCClBR,CDoBQ,gHACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CClBV,CDoBU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eCjBZ,CDoBY,uBALF,iIAMI,6CAAA,CACA,eCjBZ,CACF,CDoBU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eCjBZ,CDoBY,uBALF,uIAMI,6CAAA,CACA,eCjBZ,CACF,CDsBM,wTAKE,oDCvBR,CD2BQ,0HACE,eCzBV","file":"CardCheckboxCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        gap: calc(16 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            gap: calc(4 / var(--font-size-base) * 1rem);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n        gap: calc(12 / var(--font-size-base) * 1rem);\n        background-color: var(--card-checkbox-background-color);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            gap: calc(\n              var(--card-checkbox-description-gap, 8) / var(--font-size-base) *\n                1rem\n            );\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(8 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      [aria-invalid=\"true\"] {\n        outline: 2px solid var(--card-checkbox-outline-color);\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        gap: calc(16 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            gap: calc(4 / var(--font-size-base) * 1rem);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n        gap: calc(12 / var(--font-size-base) * 1rem);\n        background-color: var(--card-checkbox-background-color);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            gap: calc(\n              var(--card-checkbox-description-gap, 8) / var(--font-size-base) *\n                1rem\n            );\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(8 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      [aria-invalid=\"true\"] {\n        outline: 2px solid var(--card-checkbox-outline-color);\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss%23sass","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDACE,gCAAA,CAQA,kBAAA,CAJA,gFAAA,CAEA,gDAAA,CAYA,cAAA,CAhBA,YAAA,CAKA,QAAA,CAEA,mFAAA,CAEA,gGAAA,CARA,YCTN,CD0BM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCxBR,CD0BQ,gHACE,YAAA,CAMA,cAAA,CAJA,oFAAA,CADA,sBAAA,CAMA,+CC3BV,CD6BU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,iIAMI,6CAAA,CACA,eC1BZ,CACF,CD6BU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,uIAMI,6CAAA,CACA,eC1BZ,CACF,CD+BM,6TAKE,iCCjCR,CDqCQ,wTAGE,iCCrCV,CD0CQ,0HACE,eCxCV","file":"CardCheckboxCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        gap: calc(16 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n        gap: calc(12 / var(--font-size-base) * 1rem);\n        background-color: var(--card-checkbox-background-color);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-width: 1px;\n\n      display: flex;\n      padding: 1rem;\n      border: var(--card-checkbox-border-width) solid\n        var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      outline: var(--card-checkbox-outline-width) solid\n        var(--card-checkbox-outline-color);\n      outline-offset: calc(\n        -1 *\n          calc(\n            var(--card-checkbox-border-width) +\n              var(--card-checkbox-outline-width)\n          )\n      );\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(8 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          gap: calc(\n            var(--card-checkbox-content-description-gap, 4) /\n              var(--font-size-base) * 1rem\n          );\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has([aria-invalid=\"true\"]),\n      &:has(input:checked) {\n        --card-checkbox-outline-width: 1px;\n      }\n\n      &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n        &:hover,\n        &:focus-visible,\n        &:focus-within {\n          --card-checkbox-outline-width: 2px;\n        }\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        gap: calc(16 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n        gap: calc(12 / var(--font-size-base) * 1rem);\n        background-color: var(--card-checkbox-background-color);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-width: 1px;\n\n      display: flex;\n      padding: 1rem;\n      border: var(--card-checkbox-border-width) solid\n        var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      outline: var(--card-checkbox-outline-width) solid\n        var(--card-checkbox-outline-color);\n      outline-offset: calc(\n        -1 *\n          calc(\n            var(--card-checkbox-border-width) +\n              var(--card-checkbox-outline-width)\n          )\n      );\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(8 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          gap: calc(\n            var(--card-checkbox-content-description-gap, 4) /\n              var(--font-size-base) * 1rem\n          );\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has([aria-invalid=\"true\"]),\n      &:has(input:checked) {\n        --card-checkbox-outline-width: 1px;\n      }\n\n      &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n        &:hover,\n        &:focus-visible,\n        &:focus-within {\n          --card-checkbox-outline-width: 2px;\n        }\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss

@@ -64,7 +64,6 @@
           .af-card-checkbox-content-description {
             flex-direction: var(--card-checkbox-flex-direction);
             align-items: var(--card-checkbox-align-item);
-            gap: calc(4 / var(--font-size-base) * 1rem);
             text-align: left;
           }
         }
@@ -95,10 +94,6 @@
           .af-card-checkbox-content-description {
             flex-direction: var(--card-checkbox-flex-direction);
             align-items: var(--card-checkbox-align-item);
-            gap: calc(
-              var(--card-checkbox-description-gap, 8) / var(--font-size-base) *
-                1rem
-            );
             text-align: center;
           }
         }
@@ -106,12 +101,24 @@
     }
 
     .af-card-checkbox-label {
+      --card-checkbox-border-width: 1px;
+
       display: flex;
       padding: 1rem;
-      border: 1px solid var(--card-checkbox-border-color);
+      border: var(--card-checkbox-border-width) solid
+        var(--card-checkbox-border-color);
       border-radius: var(--card-checkbox-border-radius);
       flex: 1;
       align-self: stretch;
+      outline: var(--card-checkbox-outline-width) solid
+        var(--card-checkbox-outline-color);
+      outline-offset: calc(
+        -1 *
+          calc(
+            var(--card-checkbox-border-width) +
+              var(--card-checkbox-outline-width)
+          )
+      );
       cursor: pointer;
 
       .af-card-checkbox-content {
@@ -122,6 +129,10 @@
         .af-card-checkbox-content-description {
           display: flex;
           justify-content: center;
+          gap: calc(
+            var(--card-checkbox-content-description-gap, 4) /
+              var(--font-size-base) * 1rem
+          );
           font-size: 1rem;
           line-height: calc(20 / var(--font-size-base) * 1rem);
 
@@ -152,9 +163,17 @@
       &:hover,
       &:focus-visible,
       &:focus-within,
-      &:has(input:checked),
-      [aria-invalid="true"] {
-        outline: 2px solid var(--card-checkbox-outline-color);
+      &:has([aria-invalid="true"]),
+      &:has(input:checked) {
+        --card-checkbox-outline-width: 1px;
+      }
+
+      &:not(:has(:checked)):has([aria-invalid="true"]) {
+        &:hover,
+        &:focus-visible,
+        &:focus-within {
+          --card-checkbox-outline-width: 2px;
+        }
       }
 
       &:has(input:checked) {

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css

@@ -1 +1 @@
-.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);gap:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);gap:calc(4/var(--font-size-base)*1rem);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);background-color:var(--card-checkbox-background-color);flex-direction:var(--card-checkbox-flex-direction);gap:calc(12/var(--font-size-base)*1rem);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);gap:calc(var(--card-checkbox-description-gap, 8)/var(--font-size-base)*1rem);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{align-self:stretch;border:1px solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label [aria-invalid=true],.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{outline:2px solid var(--card-checkbox-outline-color)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}.af-card-checkbox__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox__legend{--card-checkbox-color:var(--color-gray-900)}.af-card-checkbox__description{--card-checkbox-color:var(--color-gray-700)}.af-card-checkbox-group--horizontal{--card-checkbox-flex-direction:column}.af-card-checkbox-group--horizontal .af-card-checkbox-label{--card-checkbox-flex-direction:row;--card-checkbox-align-items:center}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:row;--card-checkbox-margin-left:calc(12/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:flex-start;--card-checkbox-description-gap:4}.af-card-checkbox-group--vertical{--card-checkbox-flex-direction:row}.af-card-checkbox-group--vertical .af-card-checkbox-label{--card-checkbox-flex-direction:row;--card-checkbox-align-items:flex-start;--card-checkbox-justify-content:flex-start}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-checkbox{position:absolute}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:column;--card-checkbox-margin-left:calc(2/var(--font-size-base)*1rem)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:center}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-color:var(--color-gray-700);--card-checkbox-border-radius:calc(6/var(--font-size-base)*1rem);--card-checkbox-outline-color:var(--card-checkbox-border-color);--card-checkbox-background-color:var(--color-white)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--color-gray-900)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content-description>span:not(:first-child){--card-checkbox-label-text-color:var(--color-gray-700)}.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-border-color:var(--color-axa)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true]{--card-checkbox-background-color:var(--color-white);--card-checkbox-border-color:var(--color-red-700)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked){--card-checkbox-border-color:var(--color-axa);--card-checkbox-background-color:var(--color-blue-2)}
+.af-card-checkbox__container{display:flex;flex-direction:column;gap:1rem}.af-card-checkbox__legend{color:var(--card-checkbox-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox__legend>p{margin:0}.af-card-checkbox__description{color:var(--card-checkbox-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox__choices{display:flex;flex-direction:column;row-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group{align-items:stretch;display:flex;font-family:var(--card-checkbox-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem);list-style:none;margin:0;padding:0}.af-card-checkbox-group--horizontal{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);flex-direction:var(--card-checkbox-flex-direction);gap:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:left}.af-card-checkbox-group--vertical{flex-direction:var(--card-checkbox-flex-direction)}.af-card-checkbox-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-checkbox-group--vertical .af-card-checkbox-label{align-items:var(--card-checkbox-align-items);background-color:var(--card-checkbox-background-color);flex-direction:var(--card-checkbox-flex-direction);gap:calc(12/var(--font-size-base)*1rem);height:100%;justify-content:var(--card-checkbox-justify-content)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{flex:1 1;flex-direction:var(--card-checkbox-flex-direction);width:100%}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{align-items:var(--card-checkbox-align-item);flex-direction:var(--card-checkbox-flex-direction);text-align:center}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-width:1px;align-self:stretch;border:var(--card-checkbox-border-width) solid var(--card-checkbox-border-color);border-radius:var(--card-checkbox-border-radius);cursor:pointer;display:flex;flex:1 1;outline:var(--card-checkbox-outline-width) solid var(--card-checkbox-outline-color);outline-offset:calc((var(--card-checkbox-border-width) + var(--card-checkbox-outline-width))*-1);padding:1rem}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content{align-items:center;display:flex;gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{display:flex;font-size:1rem;gap:calc(var(--card-checkbox-content-description-gap, 4)/var(--font-size-base)*1rem);justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{color:var(--card-checkbox-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){color:var(--card-checkbox-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has([aria-invalid=true]),.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-outline-width:1px}.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):focus-visible,.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):focus-within,.af-card-checkbox-group .af-card-checkbox-label:not(:has(:checked)):has([aria-invalid=true]):hover{--card-checkbox-outline-width:2px}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked) .af-card-checkbox-content-description>span:first-child{font-weight:600}.af-card-checkbox__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-card-checkbox__legend{--card-checkbox-color:var(--color-gray-900)}.af-card-checkbox__description{--card-checkbox-color:var(--color-gray-700)}.af-card-checkbox-group--horizontal{--card-checkbox-flex-direction:column}.af-card-checkbox-group--horizontal .af-card-checkbox-label{--card-checkbox-flex-direction:row;--card-checkbox-align-items:center}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:row;--card-checkbox-margin-left:calc(12/var(--font-size-base)*1rem)}.af-card-checkbox-group--horizontal .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:flex-start;--card-checkbox-description-gap:4}.af-card-checkbox-group--vertical{--card-checkbox-flex-direction:row}.af-card-checkbox-group--vertical .af-card-checkbox-label{--card-checkbox-flex-direction:row;--card-checkbox-align-items:flex-start;--card-checkbox-justify-content:flex-start}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-checkbox{position:absolute}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content{--card-checkbox-flex-direction:column;--card-checkbox-margin-left:calc(2/var(--font-size-base)*1rem)}.af-card-checkbox-group--vertical .af-card-checkbox-label .af-card-checkbox-content .af-card-checkbox-content-description{--card-checkbox-flex-direction:column;--card-checkbox-align-item:center}.af-card-checkbox-group .af-card-checkbox-label{--card-checkbox-border-color:var(--color-gray-700);--card-checkbox-border-radius:var(--radius-4);--card-checkbox-outline-color:var(--card-checkbox-border-color);--card-checkbox-background-color:var(--color-white);--card-checkbox-content-gap:4}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content-description>span:first-child{--card-checkbox-label-text-color:var(--color-gray-900)}.af-card-checkbox-group .af-card-checkbox-label .af-card-checkbox-content-description>span:not(:first-child){--card-checkbox-label-text-color:var(--color-gray-700)}.af-card-checkbox-group .af-card-checkbox-label:focus-visible,.af-card-checkbox-group .af-card-checkbox-label:focus-within,.af-card-checkbox-group .af-card-checkbox-label:has(input:checked),.af-card-checkbox-group .af-card-checkbox-label:hover{--card-checkbox-border-color:var(--color-axa)}.af-card-checkbox-group .af-card-checkbox-label[aria-invalid=true]{--card-checkbox-background-color:var(--color-white);--card-checkbox-border-color:var(--color-red-700)}.af-card-checkbox-group .af-card-checkbox-label:has(input:checked){--card-checkbox-border-color:var(--color-axa);--card-checkbox-background-color:var(--color-blue-2)}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss%23sass"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,sCAAA,CACA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,4EAAA,CAIA,iBCdZ,CDoBI,gDCbJ,kBAAA,CDgBM,kDAAA,CACA,gDAAA,CAGA,cAAA,CANA,YAAA,CAIA,QAAA,CAHA,YCbN,CDoBM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCClBR,CDoBQ,gHACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CClBV,CDoBU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eCjBZ,CDoBY,uBALF,iIAMI,6CAAA,CACA,eCjBZ,CACF,CDoBU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eCjBZ,CDoBY,uBALF,uIAMI,6CAAA,CACA,eCjBZ,CACF,CDsBM,wTAKE,oDCvBR,CD2BQ,0HACE,eCzBV,CCrIE,mCACE,oDDwIJ,CCrIE,0BACE,2CDuIJ,CCpIE,+BACE,2CDsIJ,CClII,oCACE,qCDoIN,CClIM,4DACE,kCAAA,CACA,kCDoIR,CClIQ,sFACE,kCAAA,CACA,+DDoIV,CClIU,4HACE,qCAAA,CACA,qCAAA,CACA,iCDoIZ,CC9HI,kCACE,kCDgIN,CC9HM,0DACE,kCAAA,CACA,sCAAA,CACA,0CDgIR,CC9HQ,uEACE,iBDgIV,CC7HQ,oFACE,qCAAA,CACA,8DD+HV,CC7HU,0HACE,qCAAA,CACA,iCD+HZ,CCzHI,gDACE,kDAAA,CACA,gEAAA,CACA,+DAAA,CACA,mDD2HN,CCxHQ,uGACE,sDD0HV,CCvHQ,6GACE,sDDyHV,CCrHM,oPAIE,6CDoHR,CCjHM,mEACE,mDAAA,CACA,iDDmHR,CChHM,mEACE,6CAAA,CACA,oDDkHR","file":"CardCheckboxLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        gap: calc(16 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            gap: calc(4 / var(--font-size-base) * 1rem);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n        gap: calc(12 / var(--font-size-base) * 1rem);\n        background-color: var(--card-checkbox-background-color);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            gap: calc(\n              var(--card-checkbox-description-gap, 8) / var(--font-size-base) *\n                1rem\n            );\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(8 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      [aria-invalid=\"true\"] {\n        outline: 2px solid var(--card-checkbox-outline-color);\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-checkbox-color: var(--color-gray-700);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: center;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n            --card-checkbox-description-gap: 4;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: flex-start;\n        --card-checkbox-justify-content: flex-start;\n\n        .af-checkbox {\n          position: absolute;\n        }\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--color-gray-700);\n      --card-checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n      --card-checkbox-background-color: var(--color-white);\n\n      .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--color-gray-900);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--color-gray-700);\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n      }\n\n      &[aria-invalid=\"true\"] {\n        --card-checkbox-background-color: var(--color-white);\n        --card-checkbox-border-color: var(--color-red-700);\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n        --card-checkbox-background-color: var(--color-blue-2);\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-checkbox-color: var(--color-gray-700);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: center;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n            --card-checkbox-description-gap: 4;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: flex-start;\n        --card-checkbox-justify-content: flex-start;\n\n        .af-checkbox {\n          position: absolute;\n        }\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--color-gray-700);\n      --card-checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n      --card-checkbox-background-color: var(--color-white);\n\n      .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--color-gray-900);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--color-gray-700);\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n      }\n\n      &[aria-invalid=\"true\"] {\n        --card-checkbox-background-color: var(--color-white);\n        --card-checkbox-border-color: var(--color-red-700);\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n        --card-checkbox-background-color: var(--color-blue-2);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxCommon.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss","../../../../src/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss%23sass"],"names":[],"mappings":"AAGE,6BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,0BAME,gCAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,4BACE,QCHN,CDOE,+BAIE,gCAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,+BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,2BACE,YAAA,CACA,qBAAA,CACA,0CCLJ,CDQE,wBAIE,mBAAA,CAHA,YAAA,CAKA,4CAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CAAA,CACA,eAAA,CARA,QAAA,CACA,SCCJ,CDQI,oCACE,kDCNN,CDQM,4DAEE,4CAAA,CADA,kDAAA,CAEA,uCCNR,CDQQ,sFACE,kDCNV,CDQU,4HAEE,2CAAA,CADA,kDAAA,CAEA,eCNZ,CDYI,kCACE,kDCVN,CDYM,oCACE,YAAA,CACA,WCVR,CDaM,0DAGE,4CAAA,CAGA,sDAAA,CAJA,kDAAA,CAGA,uCAAA,CAJA,WAAA,CAGA,oDCTR,CDaQ,oFAEE,QAAA,CACA,kDAAA,CAFA,UCTV,CDaU,0HAEE,2CAAA,CADA,kDAAA,CAEA,iBCXZ,CDiBI,gDACE,gCAAA,CAQA,kBAAA,CAJA,gFAAA,CAEA,gDAAA,CAYA,cAAA,CAhBA,YAAA,CAKA,QAAA,CAEA,mFAAA,CCjBN,gGAAA,CDWM,YCTN,CD0BM,0EAEE,kBAAA,CADA,YAAA,CAEA,sCCxBR,CD0BQ,gHACE,YAAA,CAMA,cAAA,CAJA,oFAAA,CADA,sBAAA,CAMA,+CC3BV,CD6BU,iIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,iIAMI,6CAAA,CACA,eC1BZ,CACF,CD6BU,uIAGE,2CAAA,CAFA,6CAAA,CACA,eC1BZ,CD6BY,uBALF,uIAMI,6CAAA,CACA,eC1BZ,CACF,CD+BM,6TAKE,iCCjCR,CDqCQ,wTAGE,iCCrCV,CD0CQ,0HACE,eCxCV,CCzIE,mCACE,oDD4IJ,CCzIE,0BACE,2CD2IJ,CCxIE,+BACE,2CD0IJ,CCtII,oCACE,qCDwIN,CCtIM,4DACE,kCAAA,CACA,kCDwIR,CCtIQ,sFACE,kCAAA,CACA,+DDwIV,CCtIU,4HACE,qCAAA,CACA,qCAAA,CACA,iCDwIZ,CClII,kCACE,kCDoIN,CClIM,0DACE,kCAAA,CACA,sCAAA,CACA,0CDoIR,CClIQ,uEACE,iBDoIV,CCjIQ,oFACE,qCAAA,CACA,8DDmIV,CCjIU,0HACE,qCAAA,CACA,iCDmIZ,CC7HI,gDACE,kDAAA,CACA,6CAAA,CACA,+DAAA,CACA,mDAAA,CACA,6BD+HN,CC5HQ,uGACE,sDD8HV,CC3HQ,6GACE,sDD6HV,CCzHM,oPAIE,6CDwHR,CCrHM,mEACE,mDAAA,CACA,iDDuHR,CCpHM,mEACE,6CAAA,CACA,oDDsHR","file":"CardCheckboxLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-checkbox {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n  }\n\n  &__legend {\n    display: grid;\n    margin-block-end: calc(4 / var(--font-size-base) * 1rem);\n    row-gap: calc(4 / var(--font-size-base) * 1rem);\n    font-size: calc(18 / var(--font-size-base) * 1rem);\n    font-weight: 600;\n    color: var(--card-checkbox-color);\n\n    & > p {\n      margin: 0;\n    }\n  }\n\n  &__description {\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    line-height: calc(16 / var(--font-size-base) * 1rem);\n    color: var(--card-checkbox-color);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n      line-height: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &__choices {\n    display: flex;\n    flex-direction: column;\n    row-gap: calc(8 / var(--font-size-base) * 1rem);\n  }\n\n  &-group {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-checkbox-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n    list-style: none;\n\n    &--horizontal {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      .af-card-checkbox-label {\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        gap: calc(16 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content {\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: left;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      flex-direction: var(--card-checkbox-flex-direction);\n\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n      }\n\n      .af-card-checkbox-label {\n        height: 100%;\n        flex-direction: var(--card-checkbox-flex-direction);\n        align-items: var(--card-checkbox-align-items);\n        justify-content: var(--card-checkbox-justify-content);\n        gap: calc(12 / var(--font-size-base) * 1rem);\n        background-color: var(--card-checkbox-background-color);\n\n        .af-card-checkbox-content {\n          width: 100%;\n          flex: 1;\n          flex-direction: var(--card-checkbox-flex-direction);\n\n          .af-card-checkbox-content-description {\n            flex-direction: var(--card-checkbox-flex-direction);\n            align-items: var(--card-checkbox-align-item);\n            text-align: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-width: 1px;\n\n      display: flex;\n      padding: 1rem;\n      border: var(--card-checkbox-border-width) solid\n        var(--card-checkbox-border-color);\n      border-radius: var(--card-checkbox-border-radius);\n      flex: 1;\n      align-self: stretch;\n      outline: var(--card-checkbox-outline-width) solid\n        var(--card-checkbox-outline-color);\n      outline-offset: calc(\n        -1 *\n          calc(\n            var(--card-checkbox-border-width) +\n              var(--card-checkbox-outline-width)\n          )\n      );\n      cursor: pointer;\n\n      .af-card-checkbox-content {\n        display: flex;\n        align-items: center;\n        gap: calc(8 / var(--font-size-base) * 1rem);\n\n        .af-card-checkbox-content-description {\n          display: flex;\n          justify-content: center;\n          gap: calc(\n            var(--card-checkbox-content-description-gap, 4) /\n              var(--font-size-base) * 1rem\n          );\n          font-size: 1rem;\n          line-height: calc(20 / var(--font-size-base) * 1rem);\n\n          & > span:first-child {\n            font-size: calc(18 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(16 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n\n          & > span:not(:first-child) {\n            font-size: calc(16 / var(--font-size-base) * 1rem);\n            font-weight: 400;\n            color: var(--card-checkbox-label-text-color);\n\n            @media (width < #{breakpoints.$breakpoint-sm}) {\n              font-size: calc(14 / var(--font-size-base) * 1rem);\n              font-weight: 400;\n            }\n          }\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has([aria-invalid=\"true\"]),\n      &:has(input:checked) {\n        --card-checkbox-outline-width: 1px;\n      }\n\n      &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n        &:hover,\n        &:focus-visible,\n        &:focus-within {\n          --card-checkbox-outline-width: 2px;\n        }\n      }\n\n      &:has(input:checked) {\n        .af-card-checkbox-content-description > span:first-child {\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-checkbox-color: var(--color-gray-700);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: center;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n            --card-checkbox-description-gap: 4;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: flex-start;\n        --card-checkbox-justify-content: flex-start;\n\n        .af-checkbox {\n          position: absolute;\n        }\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--color-gray-700);\n      --card-checkbox-border-radius: var(--radius-4);\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n      --card-checkbox-background-color: var(--color-white);\n      --card-checkbox-content-gap: 4;\n\n      .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--color-gray-900);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--color-gray-700);\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n      }\n\n      &[aria-invalid=\"true\"] {\n        --card-checkbox-background-color: var(--color-white);\n        --card-checkbox-border-color: var(--color-red-700);\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n        --card-checkbox-background-color: var(--color-blue-2);\n      }\n    }\n  }\n}\n","@use \"CardCheckboxCommon\";\n\n.af-card-checkbox {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-checkbox-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-checkbox-color: var(--color-gray-700);\n  }\n\n  &-group {\n    &--horizontal {\n      --card-checkbox-flex-direction: column;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: center;\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: row;\n          --card-checkbox-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: flex-start;\n            --card-checkbox-description-gap: 4;\n          }\n        }\n      }\n    }\n\n    &--vertical {\n      --card-checkbox-flex-direction: row;\n\n      .af-card-checkbox-label {\n        --card-checkbox-flex-direction: row;\n        --card-checkbox-align-items: flex-start;\n        --card-checkbox-justify-content: flex-start;\n\n        .af-checkbox {\n          position: absolute;\n        }\n\n        .af-card-checkbox-content {\n          --card-checkbox-flex-direction: column;\n          --card-checkbox-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n          .af-card-checkbox-content-description {\n            --card-checkbox-flex-direction: column;\n            --card-checkbox-align-item: center;\n          }\n        }\n      }\n    }\n\n    .af-card-checkbox-label {\n      --card-checkbox-border-color: var(--color-gray-700);\n      --card-checkbox-border-radius: var(--radius-4);\n      --card-checkbox-outline-color: var(--card-checkbox-border-color);\n      --card-checkbox-background-color: var(--color-white);\n      --card-checkbox-content-gap: 4;\n\n      .af-card-checkbox-content-description > span {\n        &:first-child {\n          --card-checkbox-label-text-color: var(--color-gray-900);\n        }\n\n        &:not(:first-child) {\n          --card-checkbox-label-text-color: var(--color-gray-700);\n        }\n      }\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n      }\n\n      &[aria-invalid=\"true\"] {\n        --card-checkbox-background-color: var(--color-white);\n        --card-checkbox-border-color: var(--color-red-700);\n      }\n\n      &:has(input:checked) {\n        --card-checkbox-border-color: var(--color-axa);\n        --card-checkbox-background-color: var(--color-blue-2);\n      }\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss

@@ -60,9 +60,10 @@
 
     .af-card-checkbox-label {
       --card-checkbox-border-color: var(--color-gray-700);
-      --card-checkbox-border-radius: calc(6 / var(--font-size-base) * 1rem);
+      --card-checkbox-border-radius: var(--radius-4);
       --card-checkbox-outline-color: var(--card-checkbox-border-color);
       --card-checkbox-background-color: var(--color-white);
+      --card-checkbox-content-gap: 4;
 
       .af-card-checkbox-content-description > span {
         &:first-child {

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

@@ -1 +1 @@
-.af-checkbox{align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width,1px) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);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:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{outline:1px solid var(--checkbox-outline-color)}.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)}.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)}
+.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}

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,aAOE,kBAAA,CACA,iDAAA,CAHA,0EAAA,CACA,2CAAA,CCJF,YAAA,CDEE,0CAAA,CAHA,iBAAA,CAEA,yCCMF,CDCE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCCJ,CDEE,wEAGE,+CCFJ,CDKE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CCRJ,iBAAA,CDKI,yCCCJ,CDME,oDACE,aCJJ,CC7BA,aACE,2DAAA,CACA,0CAAA,CACA,qDAAA,CACA,kCAAA,CACA,wCDgCF,CC9BE,wEAGE,2CD8BJ,CC3BE,2BACE,+CD6BJ,CC1BE,0DACE,4CD4BJ","file":"CheckboxApollo.css","sourcesContent":[".af-checkbox {\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, 1px) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\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  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    outline: 1px solid var(--checkbox-outline-color);\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  }\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  }\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  }\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  }\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,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"]}

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

@@ -11,6 +11,7 @@
   &:focus-within,
   &:has(:checked) {
     --checkbox-border-color: var(--axa-blue-100);
+    --checkbox-outline-width: 1px;
   }
 
   &:has(:checked) {
@@ -19,5 +20,11 @@
 
   &:not(:has(:checked)):has([aria-invalid="true"]) {
     --checkbox-border-color: var(--red-alert-100);
+    --checkbox-outline-width: 1px;
+
+    &:hover,
+    &:focus-within {
+      --checkbox-outline-width: 2px;
+    }
   }
 }

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

@@ -1 +1 @@
-.af-checkbox{align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width,1px) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);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:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{outline:1px solid var(--checkbox-outline-color)}.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;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}

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,aAOE,kBAAA,CACA,iDAAA,CAHA,0EAAA,CACA,2CAAA,CAJA,YAAA,CAEA,0CAAA,CAHA,iBAAA,CAEA,yCCMF,CDCE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCCJ,CDEE,wEAGE,+CCFJ,CDKE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDME,oDACE,aCJJ","file":"CheckboxCommon.css","sourcesContent":[".af-checkbox {\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, 1px) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\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  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    outline: 1px solid var(--checkbox-outline-color);\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  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, 1px) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\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  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    outline: 1px solid var(--checkbox-outline-color);\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,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"]}

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

@@ -1,12 +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, 1px) solid var(--checkbox-border-color);
+  border: var(--checkbox-border-width) solid var(--checkbox-border-color);
   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))
+  );
 
   svg {
     position: absolute;
@@ -17,12 +23,6 @@
     fill: var(--checkbox-check-fill);
   }
 
-  &:hover,
-  &:focus-within,
-  &:has(:checked) {
-    outline: 1px solid var(--checkbox-outline-color);
-  }
-
   input[type="checkbox"] {
     position: absolute;
     width: calc(24 / var(--font-size-base) * 1rem);

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

@@ -1 +1 @@
-.af-checkbox{align-items:center;background-color:var(--checkbox-background-color);border:var(--checkbox-border-width,1px) solid var(--checkbox-border-color);border-radius:var(--checkbox-border-radius);display:flex;height:calc(24/var(--font-size-base)*1rem);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:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{outline:1px solid var(--checkbox-outline-color)}.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-border-width:2px}.af-checkbox:focus-within,.af-checkbox:has(:checked),.af-checkbox:hover{--checkbox-border-color:var(--color-axa)}.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;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)}

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,aAOE,kBAAA,CACA,iDAAA,CAHA,0EAAA,CACA,2CAAA,CCJF,YAAA,CDEE,0CAAA,CAHA,iBAAA,CAEA,yCCMF,CDCE,iBAIE,YAAA,CADA,QAAA,CAFA,iBAAA,CACA,OAAA,CAGA,8BAAA,CACA,+BCCJ,CDEE,wEAGE,+CCFJ,CDKE,kCAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CCHJ,yCAKA,CDME,oDACE,aCJJ,CC7BA,aACE,2DAAA,CACA,6CAAA,CACA,qDAAA,CACA,wCAAA,CACA,8CAAA,CACA,2BDgCF,CC9BE,wEAGE,wCD8BJ,CC3BE,2BACE,4CD6BJ,CC1BE,0DACE,4CD4BJ","file":"CheckboxLF.css","sourcesContent":[".af-checkbox {\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, 1px) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  align-items: center;\n  background-color: var(--checkbox-background-color);\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  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    outline: 1px solid var(--checkbox-outline-color);\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-border-width: 2px;\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --checkbox-border-color: var(--color-axa);\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-border-width: 2px;\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --checkbox-border-color: var(--color-axa);\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,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"]}

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

@@ -6,12 +6,13 @@
   --checkbox-outline-color: var(--checkbox-border-color);
   --checkbox-check-fill: var(--color-white);
   --checkbox-background-color: var(--color-white);
-  --checkbox-border-width: 2px;
+  --checkbox-outline-width: 1px;
 
   &:hover,
   &:focus-within,
   &:has(:checked) {
     --checkbox-border-color: var(--color-axa);
+    --checkbox-outline-width: 2px;
   }
 
   &:has(:checked) {

package/dist/Form/Radio/CardRadio/CardRadioApollo.css

@@ -1 +1 @@
-.af-card-radio__container{display:flex;flex-direction:column;gap:1rem}.af-card-radio__legend{color:var(--card-radio-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-radio__legend>p{margin:0}.af-card-radio__description{color:var(--card-radio-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-radio__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-radio__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-card-radio__content>svg{color:var(--card-radio-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--card-radio-fill)}.af-card-radio__content-description{display:flex;flex-direction:column;gap:calc(4/var(--font-size-base)*1rem);line-height:calc(20/var(--font-size-base)*1rem)}.af-card-radio__content-description>span:first-child{color:var(--card-radio-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-card-radio__content-description>span:not(:first-child){color:var(--card-radio-color)}.af-card-radio~.af-card-radio__error,.af-card-radio~.af-card-radio__error>svg{border:solid var(--color-red-700)}.af-card-radio-group{border:none;--card-radio-flex-wrap:var(--card-radio-flex-wrap,nowrap);flex-wrap:var(--card-radio-flex-wrap)}.af-card-radio-group .af-card-radio-label{min-width:var(--card-radio-min-width,auto);width:var(--card-radio-width,auto)}.af-card-radio-group--vertical{flex-direction:var(--card-radio-flex-direction)}.af-card-radio-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-radio-group--vertical .af-card-radio-label{align-items:var(--card-radio-align-items);flex-direction:var(--card-radio-flex-direction);justify-content:var(--checkbox-card-justify-content)}.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content{flex:1 1;flex-direction:var(--card-radio-flex-direction);width:100%}.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{align-items:var(--card-radio-align-item);flex-direction:var(--card-radio-flex-direction);text-align:center}.af-card-radio-group--horizontal{flex-direction:var(--card-radio-flex-direction)}.af-card-radio-group--horizontal .af-card-radio-label{align-items:var(--card-radio-align-items);flex-direction:var(--card-radio-flex-direction);justify-content:var(--card-radio-justify-content)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content{flex:1 1;flex-direction:var(--card-radio-flex-direction);width:100%}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{align-items:var(--card-radio-align-item);flex-direction:var(--card-radio-flex-direction);text-align:center}.af-card-radio-group--horizontal,.af-card-radio-group--vertical{align-items:stretch;display:flex;font-family:var(--card-radio-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-radio-group--horizontal .af-card-radio-label,.af-card-radio-group--vertical .af-card-radio-label{align-self:stretch;background-color:var(--card-radio-background-color);border:1px solid var(--card-radio-border-color);border-radius:var(--card-radio-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);padding:1rem}.af-card-radio-group--horizontal .af-card-radio-label:focus-visible,.af-card-radio-group--horizontal .af-card-radio-label:focus-within,.af-card-radio-group--horizontal .af-card-radio-label:has(input:checked),.af-card-radio-group--horizontal .af-card-radio-label:hover,.af-card-radio-group--vertical .af-card-radio-label:focus-visible,.af-card-radio-group--vertical .af-card-radio-label:focus-within,.af-card-radio-group--vertical .af-card-radio-label:has(input:checked),.af-card-radio-group--vertical .af-card-radio-label:hover{outline:1px solid var(--card-radio-outline-color)}.af-card-radio-group--horizontal .af-card-radio-label:focus-visible>span:first-child,.af-card-radio-group--horizontal .af-card-radio-label:focus-within>span:first-child,.af-card-radio-group--horizontal .af-card-radio-label:has(input:checked)>span:first-child,.af-card-radio-group--horizontal .af-card-radio-label:hover>span:first-child,.af-card-radio-group--vertical .af-card-radio-label:focus-visible>span:first-child,.af-card-radio-group--vertical .af-card-radio-label:focus-within>span:first-child,.af-card-radio-group--vertical .af-card-radio-label:has(input:checked)>span:first-child,.af-card-radio-group--vertical .af-card-radio-label:hover>span:first-child{outline:1px solid var(--radio-outline-color)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{display:flex;font-size:1rem;justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child{color:var(--card-radio-label-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child),.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child){color:var(--card-radio-label-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child),.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-radio__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-card-radio__legend{--card-radio-color:var(--neutral-100)}.af-card-radio__legend [aria-hidden]{display:none}.af-card-radio__description{--card-radio-color:var(--neutral-80)}.af-card-radio__content>svg{--card-radio-color:var(--color-axa);--card-radio-fill:var(--color-axa)}.af-card-radio__content-description>span:first-child{--card-radio-color:var(--neutral-100)}.af-card-radio__content-description>span:not(:first-child){--card-radio-color:var(--neutral-80)}.af-card-radio~.af-card-radio__error,.af-card-radio~.af-card-radio__error>svg{--error-box-color:var(--color-red-700)}.af-card-radio-group--vertical{--card-radio-flex-direction:row}.af-card-radio-group--vertical .af-card-radio-label{--card-radio-flex-direction:column-reverse}.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content{--card-radio-flex-direction:column;--card-radio-margin-left:calc(12/var(--font-size-base)*1rem)}.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{--card-radio-flex-direction:column;--card-radio-align-item:center}.af-card-radio-group--horizontal{--card-radio-flex-direction:column}.af-card-radio-group--horizontal .af-card-radio-label{--card-radio-flex-direction:row}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content{--card-radio-flex-direction:row;--card-radio-margin-left:calc(2/var(--font-size-base)*1rem)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{--card-radio-flex-direction:column;--card-radio-align-item:flex-start}.af-card-radio-group--horizontal .af-card-radio-label,.af-card-radio-group--vertical .af-card-radio-label{--card-radio-border-color:var(--axa-blue-65);--card-radio-background-color:var(--white);--card-radio-outline-color:var(--card-radio-border-color);--card-radio-border-radius:calc(8/var(--font-size-base)*1rem);--card-radio-align-items:center}.af-card-radio-group--horizontal .af-card-radio-label:hover,.af-card-radio-group--vertical .af-card-radio-label:hover{--card-radio-border-color:var(--axa-blue-100)}.af-card-radio-group--horizontal .af-card-radio-label:hover>span:first-child,.af-card-radio-group--vertical .af-card-radio-label:hover>span:first-child{--radio-border-color:var(--axa-blue-100)}.af-card-radio-group--horizontal .af-card-radio-label:has(input:checked),.af-card-radio-group--vertical .af-card-radio-label:has(input:checked){--card-radio-border-color:var(--axa-blue-100);--card-radio-background-color:var(--axa-blue-4)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child{--card-radio-label-text-color:var(--axa-blue-100)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label{--card-radio-background-color:var(--axa-red-4);--card-radio-border-color:var(--red-alert-100)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label>span:first-child{--radio-border-color:var(--red-alert-100)}
+.af-card-radio__container{display:flex;flex-direction:column;gap:1rem}.af-card-radio__legend{color:var(--card-radio-color);display:grid;font-size:calc(18/var(--font-size-base)*1rem);font-weight:600;margin-block-end:calc(4/var(--font-size-base)*1rem);row-gap:calc(4/var(--font-size-base)*1rem)}.af-card-radio__legend>p{margin:0}.af-card-radio__description{color:var(--card-radio-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;line-height:calc(16/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-radio__description{font-size:calc(18/var(--font-size-base)*1rem);line-height:calc(18/var(--font-size-base)*1rem)}}.af-card-radio__content{align-items:center;display:flex;gap:1rem;justify-content:center;width:100%}.af-card-radio__content>svg{color:var(--card-radio-color);height:calc(28/var(--font-size-base)*1rem);width:calc(28/var(--font-size-base)*1rem);fill:var(--card-radio-fill)}.af-card-radio__content-description{display:flex;flex-direction:column;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-radio__content-description>span:first-child{color:var(--card-radio-color);line-height:calc(24/var(--font-size-base)*1rem)}.af-card-radio__content-description>span:not(:first-child){color:var(--card-radio-color)}.af-card-radio~.af-card-radio__error,.af-card-radio~.af-card-radio__error>svg{border:solid var(--color-red-700)}.af-card-radio-group{border:none;--card-radio-flex-wrap:var(--card-radio-flex-wrap,nowrap);flex-wrap:var(--card-radio-flex-wrap)}.af-card-radio-group .af-card-radio-label{min-width:var(--card-radio-min-width,auto);width:var(--card-radio-width,auto)}.af-card-radio-group--vertical{flex-direction:var(--card-radio-flex-direction)}.af-card-radio-group--vertical>*{flex-basis:0;flex-grow:1}.af-card-radio-group--vertical .af-card-radio-label{align-items:var(--card-radio-align-items);flex-direction:var(--card-radio-flex-direction);justify-content:var(--checkbox-card-justify-content)}.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content{flex:1 1;flex-direction:var(--card-radio-flex-direction);width:100%}.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{align-items:var(--card-radio-align-item);flex-direction:var(--card-radio-flex-direction);text-align:center}.af-card-radio-group--horizontal{flex-direction:var(--card-radio-flex-direction)}.af-card-radio-group--horizontal .af-card-radio-label{align-items:var(--card-radio-align-items);flex-direction:var(--card-radio-flex-direction);justify-content:var(--card-radio-justify-content)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content{flex:1 1;flex-direction:var(--card-radio-flex-direction);width:100%}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{align-items:var(--card-radio-align-item);flex-direction:var(--card-radio-flex-direction);text-align:center}.af-card-radio-group--horizontal,.af-card-radio-group--vertical{align-items:stretch;display:flex;font-family:var(--card-radio-font-family);font-style:normal;font-weight:400;gap:1rem;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-radio-group--horizontal .af-card-radio-label,.af-card-radio-group--vertical .af-card-radio-label{--card-radio-border-width:1px;align-self:stretch;background-color:var(--card-radio-background-color);border:var(--card-radio-border-width) solid var(--card-radio-border-color);border-radius:var(--card-radio-border-radius);cursor:pointer;display:flex;flex:1 1;gap:calc(12/var(--font-size-base)*1rem);outline:var(--card-radio-outline-width,0) solid var(--card-radio-outline-color);outline-offset:calc((var(--card-radio-border-width) + var(--card-radio-outline-width))*-1);padding:1rem}.af-card-radio-group--horizontal .af-card-radio-label:focus-visible,.af-card-radio-group--horizontal .af-card-radio-label:focus-within,.af-card-radio-group--horizontal .af-card-radio-label:has(input:checked),.af-card-radio-group--horizontal .af-card-radio-label:has(input[aria-invalid=true]),.af-card-radio-group--horizontal .af-card-radio-label:hover,.af-card-radio-group--vertical .af-card-radio-label:focus-visible,.af-card-radio-group--vertical .af-card-radio-label:focus-within,.af-card-radio-group--vertical .af-card-radio-label:has(input:checked),.af-card-radio-group--vertical .af-card-radio-label:has(input[aria-invalid=true]),.af-card-radio-group--vertical .af-card-radio-label:hover{--card-radio-outline-width:1px}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content{align-items:center;display:flex;gap:calc(4/var(--font-size-base)*1rem)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{display:flex;font-size:1rem;gap:calc(var(--card-radio-content-description-gap, 4)/var(--font-size-base)*1rem);justify-content:center;line-height:calc(20/var(--font-size-base)*1rem)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child{color:var(--card-radio-title-text-color);font-size:calc(18/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child{font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child),.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child){color:var(--card-radio-subtitle-text-color);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400}@media (width < 667px){.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child),.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child){font-size:calc(14/var(--font-size-base)*1rem);font-weight:400}}.af-card-radio__container[aria-invalid=true] .af-card-radio-label:not(:has(input:checked)){--card-radio-outline-width:1px}.af-card-radio__container[aria-invalid=true] .af-card-radio-label:not(:has(input:checked)):focus,.af-card-radio__container[aria-invalid=true] .af-card-radio-label:not(:has(input:checked)):focus-visible,.af-card-radio__container[aria-invalid=true] .af-card-radio-label:not(:has(input:checked)):focus-within,.af-card-radio__container[aria-invalid=true] .af-card-radio-label:not(:has(input:checked)):hover{--card-radio-outline-width:2px}.af-card-radio__label-container{--font-size-base:calc(16/var(--font-size-base)*1rem)}.af-card-radio__legend{--card-radio-color:var(--neutral-100)}.af-card-radio__legend [aria-hidden]{display:none}.af-card-radio__description{--card-radio-color:var(--neutral-80)}.af-card-radio__content>svg{--card-radio-color:var(--color-axa);--card-radio-fill:var(--color-axa)}.af-card-radio__content-description>span:first-child{--card-radio-color:var(--neutral-100)}.af-card-radio__content-description>span:not(:first-child){--card-radio-color:var(--neutral-80)}.af-card-radio~.af-card-radio__error,.af-card-radio~.af-card-radio__error>svg{--error-box-color:var(--color-red-700)}.af-card-radio-group--vertical{--card-radio-flex-direction:row}.af-card-radio-group--vertical .af-card-radio-label{--card-radio-flex-direction:column-reverse}.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content{--card-radio-flex-direction:column;--card-radio-margin-left:calc(12/var(--font-size-base)*1rem)}.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{--card-radio-flex-direction:column;--card-radio-align-item:center;--card-radio-content-description-gap:8}.af-card-radio-group--horizontal{--card-radio-flex-direction:column}.af-card-radio-group--horizontal .af-card-radio-label{--card-radio-flex-direction:row}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content{--card-radio-flex-direction:row;--card-radio-margin-left:calc(2/var(--font-size-base)*1rem)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description{--card-radio-flex-direction:column;--card-radio-align-item:flex-start}.af-card-radio-group--horizontal .af-card-radio-label,.af-card-radio-group--vertical .af-card-radio-label{--card-radio-border-color:var(--axa-blue-65);--card-radio-background-color:var(--white);--card-radio-outline-color:var(--card-radio-border-color);--card-radio-border-radius:calc(8/var(--font-size-base)*1rem);--card-radio-align-items:center}.af-card-radio-group--horizontal .af-card-radio-label:hover,.af-card-radio-group--vertical .af-card-radio-label:hover{--card-radio-border-color:var(--axa-blue-100)}.af-card-radio-group--horizontal .af-card-radio-label:has(input:checked),.af-card-radio-group--vertical .af-card-radio-label:has(input:checked){--card-radio-border-color:var(--axa-blue-100);--card-radio-background-color:var(--axa-blue-4)}.af-card-radio-group--horizontal .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child,.af-card-radio-group--vertical .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child{--card-radio-title-text-color:var(--axa-blue-100)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label{--card-radio-background-color:var(--axa-red-4);--card-radio-border-color:var(--red-alert-100)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label:focus,.af-card-radio__container[aria-invalid=true] .af-card-radio-label:focus-within,.af-card-radio__container[aria-invalid=true] .af-card-radio-label:hover{--card-radio-outline-width:2px}.af-card-radio__container[aria-invalid=true] .af-card-radio-label:focus-within>span:first-child,.af-card-radio__container[aria-invalid=true] .af-card-radio-label:focus>span:first-child,.af-card-radio__container[aria-invalid=true] .af-card-radio-label:hover>span:first-child{--radio-outline-width:2px}.af-card-radio__container[aria-invalid=true] .af-card-radio-label>span:first-child{--radio-border-color:var(--red-alert-100);--radio-outline-width:1px}.af-card-radio__container[aria-invalid=true] .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:first-child{--card-radio-title-text-color:var(--neutral-80)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label .af-card-radio-content .af-card-radio-content-description>span:not(:first-child){--card-radio-subtitle-text-color:var(--neutral-80)}