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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Radio/CardRadio/CardRadioCommon.scss","../../../../src/Form/Radio/CardRadio/CardRadioApollo.scss","../../../../src/Form/Radio/CardRadio/CardRadioApollo.scss%23sass"],"names":[],"mappings":"AAGE,0BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,uBAME,6BAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,yBACE,QCHN,CDOE,4BAIE,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,4BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,wBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,4BAGE,6BAAA,CADA,0CAAA,CADA,yCAAA,CAGA,2BCLN,CDQI,oCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,qDAEE,6BAAA,CADA,+CCLR,CDSM,2DACE,6BCPR,CDeI,8EACE,iCCVN,CDcE,qBACE,WAAA,CAEA,yDAAA,CAEA,qCCdJ,CDgBI,0CAEE,0CAAA,CADA,kCCbN,CDkBE,+BACE,+CChBJ,CDkBI,iCACE,YAAA,CACA,WChBN,CDmBI,oDAEE,yCAAA,CADA,+CAAA,CAEA,oDCjBN,CDmBM,2EAEE,QAAA,CACA,+CAAA,CAFA,UCfR,CDmBQ,8GAEE,wCAAA,CADA,+CAAA,CAEA,iBCjBV,CDuBE,iCACE,+CCrBJ,CDuBI,sDAEE,yCAAA,CADA,+CAAA,CAEA,iDCrBN,CDuBM,6EAEE,QAAA,CACA,+CAAA,CAFA,UCnBR,CDuBQ,gHAEE,wCAAA,CADA,+CAAA,CAEA,iBCrBV,CD2BE,gEAGE,mBAAA,CADA,YAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CC1BJ,CD4BI,0GAME,kBAAA,CAEA,mDAAA,CALA,+CAAA,CACA,6CAAA,CAKA,cAAA,CARA,YAAA,CCvBN,QAAA,CD6BM,uCAAA,CALA,YCnBN,CD4BM,ghBAIE,iDC7BR,CD+BQ,wpBACE,4CC7BV,CDiCM,wJAEE,kBAAA,CADA,YAAA,CAEA,sCC/BR,CDiCQ,8NACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CC/BV,CDiCU,gQAGE,wCAAA,CAFA,6CAAA,CACA,eC9BZ,CDiCY,uBALF,gQAMI,6CAAA,CACA,eC9BZ,CACF,CDiCU,4QAGE,wCAAA,CAFA,6CAAA,CACA,eC9BZ,CDiCY,uBALF,4QAMI,6CAAA,CACA,eC9BZ,CACF,CCnKE,gCACE,oDDyKJ,CCtKE,uBACE,qCDwKJ,CCtKI,qCACE,YDwKN,CCpKE,4BACE,oCDsKJ,CClKI,4BACE,mCAAA,CACA,kCDoKN,CChKM,qDACE,qCDkKR,CC/JM,2DACE,oCDiKR,CCzJI,8EACE,sCD8JN,CC1JE,+BACE,+BD4JJ,CC1JI,oDACE,0CD4JN,CC1JM,2EACE,kCAAA,CACA,4DD4JR,CC1JQ,8GACE,kCAAA,CACA,8BD4JV,CCtJE,iCACE,kCDwJJ,CCtJI,sDACE,+BDwJN,CCtJM,6EACE,+BAAA,CACA,2DDwJR,CCtJQ,gHACE,kCAAA,CACA,kCDwJV,CChJI,0GACE,4CAAA,CACA,0CAAA,CACA,yDAAA,CACA,6DAAA,CACA,+BDkJN,CChJM,sHACE,6CDkJR,CChJQ,wJACE,wCDkJV,CC9IM,gJACE,6CAAA,CACA,+CDgJR,CC3IU,gQACE,iDD6IZ,CCrIE,kEACE,8CAAA,CACA,8CDwIJ,CCrII,mFACE,yCDuIN","file":"CardRadioApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\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-radio-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-radio-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  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: calc(28 / var(--font-size-base) * 1rem);\n      height: calc(28 / var(--font-size-base) * 1rem);\n      color: var(--card-radio-color);\n      fill: var(--card-radio-fill);\n    }\n\n    &-description {\n      display: flex;\n      flex-direction: column;\n      gap: calc(4 / var(--font-size-base) * 1rem);\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n\n      & > span:first-child {\n        line-height: calc(24 / var(--font-size-base) * 1rem);\n        color: var(--card-radio-color);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--card-radio-color);\n      }\n    }\n  }\n\n  & ~ &__error {\n    border: solid var(--color-red-700);\n\n    & > svg {\n      border: solid var(--color-red-700);\n    }\n  }\n\n  &-group {\n    border: none;\n\n    --card-radio-flex-wrap: var(--card-radio-flex-wrap, nowrap);\n\n    flex-wrap: var(--card-radio-flex-wrap);\n\n    .af-card-radio-label {\n      width: var(--card-radio-width, auto);\n      min-width: var(--card-radio-min-width, auto);\n    }\n  }\n\n  &-group--vertical {\n    flex-direction: var(--card-radio-flex-direction);\n\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n    }\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--checkbox-card-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    flex-direction: var(--card-radio-flex-direction);\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--card-radio-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-radio-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n\n    .af-card-radio-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-radio-border-color);\n      border-radius: var(--card-radio-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      background-color: var(--card-radio-background-color);\n      cursor: pointer;\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        outline: 1px solid var(--card-radio-outline-color);\n\n        & > span:first-child {\n          outline: 1px solid var(--radio-outline-color);\n        }\n      }\n\n      .af-card-radio-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-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-radio-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-radio-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  }\n}\n","@use \"CardRadioCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-radio-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-radio-color: var(--neutral-80);\n  }\n\n  &__content {\n    & > svg {\n      --card-radio-color: var(--color-axa);\n      --card-radio-fill: var(--color-axa);\n    }\n\n    &-description {\n      & > span:first-child {\n        --card-radio-color: var(--neutral-100);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-color: var(--neutral-80);\n      }\n    }\n  }\n\n  & ~ &__error {\n    --error-box-color: var(--color-red-700);\n\n    & > svg {\n      --error-box-color: var(--color-red-700);\n    }\n  }\n\n  &-group--vertical {\n    --card-radio-flex-direction: row;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: column-reverse;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: column;\n        --card-radio-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    --card-radio-flex-direction: column;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: row;\n        --card-radio-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: flex-start;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    .af-card-radio-label {\n      --card-radio-border-color: var(--axa-blue-65);\n      --card-radio-background-color: var(--white);\n      --card-radio-outline-color: var(--card-radio-border-color);\n      --card-radio-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-radio-align-items: center;\n\n      &:hover {\n        --card-radio-border-color: var(--axa-blue-100);\n\n        & > span:first-child {\n          --radio-border-color: var(--axa-blue-100);\n        }\n      }\n\n      &:has(input:checked) {\n        --card-radio-border-color: var(--axa-blue-100);\n        --card-radio-background-color: var(--axa-blue-4);\n      }\n\n      .af-card-radio-content {\n        .af-card-radio-content-description {\n          & > span:first-child {\n            --card-radio-label-text-color: var(--axa-blue-100);\n          }\n        }\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  &__container[aria-invalid=\"true\"] .af-card-radio-label {\n    --card-radio-background-color: var(--axa-red-4);\n    --card-radio-border-color: var(--red-alert-100);\n\n    /* stylelint-disable-next-line no-descending-specificity */\n    & > span:first-child {\n      --radio-border-color: var(--red-alert-100);\n    }\n  }\n}\n","@use \"CardRadioCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-radio-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-radio-color: var(--neutral-80);\n  }\n\n  &__content {\n    & > svg {\n      --card-radio-color: var(--color-axa);\n      --card-radio-fill: var(--color-axa);\n    }\n\n    &-description {\n      & > span:first-child {\n        --card-radio-color: var(--neutral-100);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-color: var(--neutral-80);\n      }\n    }\n  }\n\n  & ~ &__error {\n    --error-box-color: var(--color-red-700);\n\n    & > svg {\n      --error-box-color: var(--color-red-700);\n    }\n  }\n\n  &-group--vertical {\n    --card-radio-flex-direction: row;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: column-reverse;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: column;\n        --card-radio-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    --card-radio-flex-direction: column;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: row;\n        --card-radio-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: flex-start;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    .af-card-radio-label {\n      --card-radio-border-color: var(--axa-blue-65);\n      --card-radio-background-color: var(--white);\n      --card-radio-outline-color: var(--card-radio-border-color);\n      --card-radio-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-radio-align-items: center;\n\n      &:hover {\n        --card-radio-border-color: var(--axa-blue-100);\n\n        & > span:first-child {\n          --radio-border-color: var(--axa-blue-100);\n        }\n      }\n\n      &:has(input:checked) {\n        --card-radio-border-color: var(--axa-blue-100);\n        --card-radio-background-color: var(--axa-blue-4);\n      }\n\n      .af-card-radio-content {\n        .af-card-radio-content-description {\n          & > span:first-child {\n            --card-radio-label-text-color: var(--axa-blue-100);\n          }\n        }\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  &__container[aria-invalid=\"true\"] .af-card-radio-label {\n    --card-radio-background-color: var(--axa-red-4);\n    --card-radio-border-color: var(--red-alert-100);\n\n    /* stylelint-disable-next-line no-descending-specificity */\n    & > span:first-child {\n      --radio-border-color: var(--red-alert-100);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Radio/CardRadio/CardRadioCommon.scss","../../../../src/Form/Radio/CardRadio/CardRadioApollo.scss","../../../../src/Form/Radio/CardRadio/CardRadioApollo.scss%23sass"],"names":[],"mappings":"AAGE,0BCFF,YAAA,CDII,qBAAA,CCFJ,QACA,CDKE,uBAME,6BAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,yBACE,QCHN,CDOE,4BAIE,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,4BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,wBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,4BAGE,6BAAA,CADA,0CAAA,CADA,yCAAA,CAGA,2BCLN,CDQI,oCACE,YAAA,CACA,qBAAA,CACA,+CCNN,CDQM,qDAEE,6BAAA,CADA,+CCLR,CDSM,2DACE,6BCPR,CDeI,8EACE,iCCVN,CDcE,qBACE,WAAA,CAEA,yDAAA,CAEA,qCCdJ,CDgBI,0CAEE,0CAAA,CADA,kCCbN,CDkBE,+BACE,+CChBJ,CDkBI,iCACE,YAAA,CACA,WChBN,CDmBI,oDAEE,yCAAA,CADA,+CAAA,CAEA,oDCjBN,CDmBM,2EAEE,QAAA,CACA,+CAAA,CAFA,UCfR,CDmBQ,8GAEE,wCAAA,CADA,+CAAA,CAEA,iBCjBV,CDuBE,iCACE,+CCrBJ,CDuBI,sDAEE,yCAAA,CADA,+CAAA,CAEA,iDCrBN,CDuBM,6EAEE,QAAA,CACA,+CAAA,CAFA,UCnBR,CDuBQ,gHAEE,wCAAA,CADA,+CAAA,CAEA,iBCrBV,CD2BE,gEAGE,mBAAA,CADA,YAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CC1BJ,CD4BI,0GACE,6BAAA,CAQA,kBAAA,CAEA,mDAAA,CANA,0EAAA,CAEA,6CAAA,CAWA,cAAA,CAfA,YAAA,CAKA,QAAA,CAEA,uCAAA,CAEA,+EAAA,CAEA,0FAAA,CAVA,YClBN,CDkCM,srBAKE,8BCpCR,CDuCM,wJAEE,kBAAA,CADA,YAAA,CAEA,sCCrCR,CDuCQ,8NACE,YAAA,CAMA,cAAA,CAJA,iFAAA,CCvCV,sBAAA,CD4CU,+CCxCV,CD0CU,gQAGE,wCAAA,CAFA,6CAAA,CACA,eCvCZ,CD0CY,uBALF,gQAMI,6CAAA,CACA,eCvCZ,CACF,CD0CU,4QAGE,2CAAA,CAFA,6CAAA,CACA,eCvCZ,CD0CY,uBALF,4QAMI,6CAAA,CACA,eCvCZ,CACF,CD8CE,2FAEE,8BC7CJ,CD+CI,mZAIE,8BChDN,CCzKE,gCACE,oDD+KJ,CC5KE,uBACE,qCD8KJ,CC5KI,qCACE,YD8KN,CC1KE,4BACE,oCD4KJ,CCxKI,4BACE,mCAAA,CACA,kCD0KN,CCtKM,qDACE,qCDwKR,CCrKM,2DACE,oCDuKR,CC/JI,8EACE,sCDoKN,CChKE,+BACE,+BDkKJ,CChKI,oDACE,0CDkKN,CChKM,2EACE,kCAAA,CACA,4DDkKR,CChKQ,8GACE,kCAAA,CACA,8BAAA,CACA,sCDkKV,CC5JE,iCACE,kCD8JJ,CC5JI,sDACE,+BD8JN,CC5JM,6EACE,+BAAA,CACA,2DD8JR,CC5JQ,gHACE,kCAAA,CACA,kCD8JV,CCtJI,0GACE,4CAAA,CACA,0CAAA,CACA,yDAAA,CACA,6DAAA,CACA,+BDwJN,CCtJM,sHACE,6CDwJR,CCrJM,gJACE,6CAAA,CACA,+CDuJR,CClJU,gQACE,iDDoJZ,CC5IE,kEACE,8CAAA,CACA,8CD+IJ,CC7II,+NAGE,8BD6IN,CC3IM,kRACE,yBD6IR,CCxII,mFACE,yCAAA,CACA,yBD0IN,CCtIM,6IACE,+CDwIR,CCrIM,mJACE,kDDuIR","file":"CardRadioApollo.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\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-radio-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-radio-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  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: calc(28 / var(--font-size-base) * 1rem);\n      height: calc(28 / var(--font-size-base) * 1rem);\n      color: var(--card-radio-color);\n      fill: var(--card-radio-fill);\n    }\n\n    &-description {\n      display: flex;\n      flex-direction: column;\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n\n      & > span:first-child {\n        line-height: calc(24 / var(--font-size-base) * 1rem);\n        color: var(--card-radio-color);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--card-radio-color);\n      }\n    }\n  }\n\n  & ~ &__error {\n    border: solid var(--color-red-700);\n\n    & > svg {\n      border: solid var(--color-red-700);\n    }\n  }\n\n  &-group {\n    border: none;\n\n    --card-radio-flex-wrap: var(--card-radio-flex-wrap, nowrap);\n\n    flex-wrap: var(--card-radio-flex-wrap);\n\n    .af-card-radio-label {\n      width: var(--card-radio-width, auto);\n      min-width: var(--card-radio-min-width, auto);\n    }\n  }\n\n  &-group--vertical {\n    flex-direction: var(--card-radio-flex-direction);\n\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n    }\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--checkbox-card-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    flex-direction: var(--card-radio-flex-direction);\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--card-radio-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-radio-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n\n    .af-card-radio-label {\n      --card-radio-border-width: 1px;\n\n      display: flex;\n      padding: 1rem;\n      border: var(--card-radio-border-width) solid\n        var(--card-radio-border-color);\n      border-radius: var(--card-radio-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      background-color: var(--card-radio-background-color);\n      outline: var(--card-radio-outline-width, 0) solid\n        var(--card-radio-outline-color);\n      outline-offset: calc(\n        -1 *\n          calc(var(--card-radio-border-width) + var(--card-radio-outline-width))\n      );\n      cursor: pointer;\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      &:has(input[aria-invalid=\"true\"]) {\n        --card-radio-outline-width: 1px;\n      }\n\n      .af-card-radio-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          display: flex;\n          justify-content: center;\n          gap: calc(\n            var(--card-radio-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-radio-title-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-radio-subtitle-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  }\n\n  &__container[aria-invalid=\"true\"]\n    .af-card-radio-label:not(:has(input:checked)) {\n    --card-radio-outline-width: 1px;\n\n    &:hover,\n    &:focus-visible,\n    &:focus-within,\n    &:focus {\n      --card-radio-outline-width: 2px;\n    }\n  }\n}\n","@use \"CardRadioCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-radio-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-radio-color: var(--neutral-80);\n  }\n\n  &__content {\n    & > svg {\n      --card-radio-color: var(--color-axa);\n      --card-radio-fill: var(--color-axa);\n    }\n\n    &-description {\n      & > span:first-child {\n        --card-radio-color: var(--neutral-100);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-color: var(--neutral-80);\n      }\n    }\n  }\n\n  & ~ &__error {\n    --error-box-color: var(--color-red-700);\n\n    & > svg {\n      --error-box-color: var(--color-red-700);\n    }\n  }\n\n  &-group--vertical {\n    --card-radio-flex-direction: row;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: column-reverse;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: column;\n        --card-radio-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: center;\n          --card-radio-content-description-gap: 8;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    --card-radio-flex-direction: column;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: row;\n        --card-radio-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: flex-start;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    .af-card-radio-label {\n      --card-radio-border-color: var(--axa-blue-65);\n      --card-radio-background-color: var(--white);\n      --card-radio-outline-color: var(--card-radio-border-color);\n      --card-radio-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-radio-align-items: center;\n\n      &:hover {\n        --card-radio-border-color: var(--axa-blue-100);\n      }\n\n      &:has(input:checked) {\n        --card-radio-border-color: var(--axa-blue-100);\n        --card-radio-background-color: var(--axa-blue-4);\n      }\n\n      .af-card-radio-content {\n        .af-card-radio-content-description {\n          & > span:first-child {\n            --card-radio-title-text-color: var(--axa-blue-100);\n          }\n        }\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  &__container[aria-invalid=\"true\"] .af-card-radio-label {\n    --card-radio-background-color: var(--axa-red-4);\n    --card-radio-border-color: var(--red-alert-100);\n\n    &:hover,\n    &:focus-within,\n    &:focus {\n      --card-radio-outline-width: 2px;\n\n      & > span:first-child {\n        --radio-outline-width: 2px;\n      }\n    }\n\n    /* stylelint-disable-next-line no-descending-specificity */\n    & > span:first-child {\n      --radio-border-color: var(--red-alert-100);\n      --radio-outline-width: 1px;\n    }\n\n    .af-card-radio-content .af-card-radio-content-description {\n      & > span:first-child {\n        --card-radio-title-text-color: var(--neutral-80);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-subtitle-text-color: var(--neutral-80);\n      }\n    }\n  }\n}\n","@use \"CardRadioCommon\";\n@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-radio-color: var(--neutral-100);\n\n    [aria-hidden] {\n      display: none;\n    }\n  }\n\n  &__description {\n    --card-radio-color: var(--neutral-80);\n  }\n\n  &__content {\n    & > svg {\n      --card-radio-color: var(--color-axa);\n      --card-radio-fill: var(--color-axa);\n    }\n\n    &-description {\n      & > span:first-child {\n        --card-radio-color: var(--neutral-100);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-color: var(--neutral-80);\n      }\n    }\n  }\n\n  & ~ &__error {\n    --error-box-color: var(--color-red-700);\n\n    & > svg {\n      --error-box-color: var(--color-red-700);\n    }\n  }\n\n  &-group--vertical {\n    --card-radio-flex-direction: row;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: column-reverse;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: column;\n        --card-radio-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: center;\n          --card-radio-content-description-gap: 8;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    --card-radio-flex-direction: column;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: row;\n        --card-radio-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: flex-start;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    .af-card-radio-label {\n      --card-radio-border-color: var(--axa-blue-65);\n      --card-radio-background-color: var(--white);\n      --card-radio-outline-color: var(--card-radio-border-color);\n      --card-radio-border-radius: calc(8 / var(--font-size-base) * 1rem);\n      --card-radio-align-items: center;\n\n      &:hover {\n        --card-radio-border-color: var(--axa-blue-100);\n      }\n\n      &:has(input:checked) {\n        --card-radio-border-color: var(--axa-blue-100);\n        --card-radio-background-color: var(--axa-blue-4);\n      }\n\n      .af-card-radio-content {\n        .af-card-radio-content-description {\n          & > span:first-child {\n            --card-radio-title-text-color: var(--axa-blue-100);\n          }\n        }\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  &__container[aria-invalid=\"true\"] .af-card-radio-label {\n    --card-radio-background-color: var(--axa-red-4);\n    --card-radio-border-color: var(--red-alert-100);\n\n    &:hover,\n    &:focus-within,\n    &:focus {\n      --card-radio-outline-width: 2px;\n\n      & > span:first-child {\n        --radio-outline-width: 2px;\n      }\n    }\n\n    /* stylelint-disable-next-line no-descending-specificity */\n    & > span:first-child {\n      --radio-border-color: var(--red-alert-100);\n      --radio-outline-width: 1px;\n    }\n\n    .af-card-radio-content .af-card-radio-content-description {\n      & > span:first-child {\n        --card-radio-title-text-color: var(--neutral-80);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-subtitle-text-color: var(--neutral-80);\n      }\n    }\n  }\n}\n"]}

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

@@ -56,6 +56,7 @@
         .af-card-radio-content-description {
           --card-radio-flex-direction: column;
           --card-radio-align-item: center;
+          --card-radio-content-description-gap: 8;
         }
       }
     }
@@ -90,10 +91,6 @@
 
       &:hover {
         --card-radio-border-color: var(--axa-blue-100);
-
-        & > span:first-child {
-          --radio-border-color: var(--axa-blue-100);
-        }
       }
 
       &:has(input:checked) {
@@ -104,7 +101,7 @@
       .af-card-radio-content {
         .af-card-radio-content-description {
           & > span:first-child {
-            --card-radio-label-text-color: var(--axa-blue-100);
+            --card-radio-title-text-color: var(--axa-blue-100);
           }
         }
       }
@@ -116,9 +113,30 @@
     --card-radio-background-color: var(--axa-red-4);
     --card-radio-border-color: var(--red-alert-100);
 
+    &:hover,
+    &:focus-within,
+    &:focus {
+      --card-radio-outline-width: 2px;
+
+      & > span:first-child {
+        --radio-outline-width: 2px;
+      }
+    }
+
     /* stylelint-disable-next-line no-descending-specificity */
     & > span:first-child {
       --radio-border-color: var(--red-alert-100);
+      --radio-outline-width: 1px;
+    }
+
+    .af-card-radio-content .af-card-radio-content-description {
+      & > span:first-child {
+        --card-radio-title-text-color: var(--neutral-80);
+      }
+
+      & > span:not(:first-child) {
+        --card-radio-subtitle-text-color: var(--neutral-80);
+      }
     }
   }
 }

package/dist/Form/Radio/CardRadio/CardRadioCommon.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__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}

package/dist/Form/Radio/CardRadio/CardRadioCommon.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Radio/CardRadio/CardRadioCommon.scss%23sass","../../../../src/Form/Radio/CardRadio/CardRadioCommon.scss"],"names":[],"mappings":"AAGE,0BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,uBAME,6BAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,yBACE,QCHN,CDOE,4BAIE,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,4BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,wBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,4BAGE,6BAAA,CADA,0CAAA,CADA,yCAAA,CAGA,2BCLN,CDQI,oCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,qDAEE,6BAAA,CADA,+CCLR,CDSM,2DACE,6BCPR,CDeI,8EACE,iCCVN,CDcE,qBACE,WAAA,CAEA,yDAAA,CAEA,qCCdJ,CDgBI,0CAEE,0CAAA,CADA,kCCbN,CDkBE,+BACE,+CChBJ,CDkBI,iCACE,YAAA,CACA,WChBN,CDmBI,oDAEE,yCAAA,CADA,+CAAA,CAEA,oDCjBN,CDmBM,2EAEE,QAAA,CACA,+CAAA,CAFA,UCfR,CDmBQ,8GAEE,wCAAA,CADA,+CAAA,CAEA,iBCjBV,CDuBE,iCACE,+CCrBJ,CDuBI,sDAEE,yCAAA,CADA,+CAAA,CAEA,iDCrBN,CDuBM,6EAEE,QAAA,CACA,+CAAA,CAFA,UCnBR,CDuBQ,gHAEE,wCAAA,CADA,+CAAA,CAEA,iBCrBV,CD2BE,gEAGE,mBAAA,CADA,YAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CC1BJ,CD4BI,0GAME,kBAAA,CAEA,mDAAA,CALA,+CAAA,CACA,6CAAA,CAKA,cAAA,CARA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YCnBN,CD4BM,ghBAIE,iDC7BR,CD+BQ,wpBACE,4CC7BV,CDiCM,wJAEE,kBAAA,CADA,YAAA,CAEA,sCC/BR,CDiCQ,8NACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CC/BV,CDiCU,gQAGE,wCAAA,CAFA,6CAAA,CACA,eC9BZ,CDiCY,uBALF,gQAMI,6CAAA,CACA,eC9BZ,CACF,CDiCU,4QAGE,wCAAA,CAFA,6CAAA,CACA,eC9BZ,CDiCY,uBALF,4QAMI,6CAAA,CACA,eC9BZ,CACF","file":"CardRadioCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\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-radio-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-radio-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  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: calc(28 / var(--font-size-base) * 1rem);\n      height: calc(28 / var(--font-size-base) * 1rem);\n      color: var(--card-radio-color);\n      fill: var(--card-radio-fill);\n    }\n\n    &-description {\n      display: flex;\n      flex-direction: column;\n      gap: calc(4 / var(--font-size-base) * 1rem);\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n\n      & > span:first-child {\n        line-height: calc(24 / var(--font-size-base) * 1rem);\n        color: var(--card-radio-color);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--card-radio-color);\n      }\n    }\n  }\n\n  & ~ &__error {\n    border: solid var(--color-red-700);\n\n    & > svg {\n      border: solid var(--color-red-700);\n    }\n  }\n\n  &-group {\n    border: none;\n\n    --card-radio-flex-wrap: var(--card-radio-flex-wrap, nowrap);\n\n    flex-wrap: var(--card-radio-flex-wrap);\n\n    .af-card-radio-label {\n      width: var(--card-radio-width, auto);\n      min-width: var(--card-radio-min-width, auto);\n    }\n  }\n\n  &-group--vertical {\n    flex-direction: var(--card-radio-flex-direction);\n\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n    }\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--checkbox-card-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    flex-direction: var(--card-radio-flex-direction);\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--card-radio-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-radio-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n\n    .af-card-radio-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-radio-border-color);\n      border-radius: var(--card-radio-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      background-color: var(--card-radio-background-color);\n      cursor: pointer;\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        outline: 1px solid var(--card-radio-outline-color);\n\n        & > span:first-child {\n          outline: 1px solid var(--radio-outline-color);\n        }\n      }\n\n      .af-card-radio-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-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-radio-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-radio-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  }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\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-radio-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-radio-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  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: calc(28 / var(--font-size-base) * 1rem);\n      height: calc(28 / var(--font-size-base) * 1rem);\n      color: var(--card-radio-color);\n      fill: var(--card-radio-fill);\n    }\n\n    &-description {\n      display: flex;\n      flex-direction: column;\n      gap: calc(4 / var(--font-size-base) * 1rem);\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n\n      & > span:first-child {\n        line-height: calc(24 / var(--font-size-base) * 1rem);\n        color: var(--card-radio-color);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--card-radio-color);\n      }\n    }\n  }\n\n  & ~ &__error {\n    border: solid var(--color-red-700);\n\n    & > svg {\n      border: solid var(--color-red-700);\n    }\n  }\n\n  &-group {\n    border: none;\n\n    --card-radio-flex-wrap: var(--card-radio-flex-wrap, nowrap);\n\n    flex-wrap: var(--card-radio-flex-wrap);\n\n    .af-card-radio-label {\n      width: var(--card-radio-width, auto);\n      min-width: var(--card-radio-min-width, auto);\n    }\n  }\n\n  &-group--vertical {\n    flex-direction: var(--card-radio-flex-direction);\n\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n    }\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--checkbox-card-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    flex-direction: var(--card-radio-flex-direction);\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--card-radio-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-radio-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n\n    .af-card-radio-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-radio-border-color);\n      border-radius: var(--card-radio-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      background-color: var(--card-radio-background-color);\n      cursor: pointer;\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        outline: 1px solid var(--card-radio-outline-color);\n\n        & > span:first-child {\n          outline: 1px solid var(--radio-outline-color);\n        }\n      }\n\n      .af-card-radio-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-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-radio-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-radio-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  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Radio/CardRadio/CardRadioCommon.scss%23sass","../../../../src/Form/Radio/CardRadio/CardRadioCommon.scss"],"names":[],"mappings":"AAGE,0BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,uBAME,6BAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,yBACE,QCHN,CDOE,4BAIE,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,4BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,wBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,4BAGE,6BAAA,CADA,0CAAA,CADA,yCAAA,CAGA,2BCLN,CDQI,oCACE,YAAA,CACA,qBAAA,CACA,+CCNN,CDQM,qDAEE,6BAAA,CADA,+CCLR,CDSM,2DACE,6BCPR,CDeI,8EACE,iCCVN,CDcE,qBACE,WAAA,CAEA,yDAAA,CAEA,qCCdJ,CDgBI,0CAEE,0CAAA,CADA,kCCbN,CDkBE,+BACE,+CChBJ,CDkBI,iCACE,YAAA,CACA,WChBN,CDmBI,oDAEE,yCAAA,CADA,+CAAA,CAEA,oDCjBN,CDmBM,2EAEE,QAAA,CACA,+CAAA,CAFA,UCfR,CDmBQ,8GAEE,wCAAA,CADA,+CAAA,CAEA,iBCjBV,CDuBE,iCACE,+CCrBJ,CDuBI,sDAEE,yCAAA,CADA,+CAAA,CAEA,iDCrBN,CDuBM,6EAEE,QAAA,CACA,+CAAA,CAFA,UCnBR,CDuBQ,gHAEE,wCAAA,CADA,+CAAA,CAEA,iBCrBV,CD2BE,gEAGE,mBAAA,CADA,YAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CC1BJ,CD4BI,0GACE,6BAAA,CAQA,kBAAA,CAEA,mDAAA,CANA,0EAAA,CAEA,6CAAA,CAWA,cAAA,CAfA,YAAA,CAKA,QAAA,CAEA,uCAAA,CAEA,+EAAA,CAEA,0FAAA,CAVA,YClBN,CDkCM,srBAKE,8BCpCR,CDuCM,wJAEE,kBAAA,CADA,YAAA,CAEA,sCCrCR,CDuCQ,8NACE,YAAA,CAMA,cAAA,CAJA,iFAAA,CADA,sBAAA,CAMA,+CCxCV,CD0CU,gQAGE,wCAAA,CAFA,6CAAA,CACA,eCvCZ,CD0CY,uBALF,gQAMI,6CAAA,CACA,eCvCZ,CACF,CD0CU,4QAGE,2CAAA,CAFA,6CAAA,CACA,eCvCZ,CD0CY,uBALF,4QAMI,6CAAA,CACA,eCvCZ,CACF,CD8CE,2FAEE,8BC7CJ,CD+CI,mZAIE,8BChDN","file":"CardRadioCommon.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\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-radio-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-radio-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  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: calc(28 / var(--font-size-base) * 1rem);\n      height: calc(28 / var(--font-size-base) * 1rem);\n      color: var(--card-radio-color);\n      fill: var(--card-radio-fill);\n    }\n\n    &-description {\n      display: flex;\n      flex-direction: column;\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n\n      & > span:first-child {\n        line-height: calc(24 / var(--font-size-base) * 1rem);\n        color: var(--card-radio-color);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--card-radio-color);\n      }\n    }\n  }\n\n  & ~ &__error {\n    border: solid var(--color-red-700);\n\n    & > svg {\n      border: solid var(--color-red-700);\n    }\n  }\n\n  &-group {\n    border: none;\n\n    --card-radio-flex-wrap: var(--card-radio-flex-wrap, nowrap);\n\n    flex-wrap: var(--card-radio-flex-wrap);\n\n    .af-card-radio-label {\n      width: var(--card-radio-width, auto);\n      min-width: var(--card-radio-min-width, auto);\n    }\n  }\n\n  &-group--vertical {\n    flex-direction: var(--card-radio-flex-direction);\n\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n    }\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--checkbox-card-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    flex-direction: var(--card-radio-flex-direction);\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--card-radio-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-radio-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n\n    .af-card-radio-label {\n      --card-radio-border-width: 1px;\n\n      display: flex;\n      padding: 1rem;\n      border: var(--card-radio-border-width) solid\n        var(--card-radio-border-color);\n      border-radius: var(--card-radio-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      background-color: var(--card-radio-background-color);\n      outline: var(--card-radio-outline-width, 0) solid\n        var(--card-radio-outline-color);\n      outline-offset: calc(\n        -1 *\n          calc(var(--card-radio-border-width) + var(--card-radio-outline-width))\n      );\n      cursor: pointer;\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      &:has(input[aria-invalid=\"true\"]) {\n        --card-radio-outline-width: 1px;\n      }\n\n      .af-card-radio-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          display: flex;\n          justify-content: center;\n          gap: calc(\n            var(--card-radio-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-radio-title-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-radio-subtitle-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  }\n\n  &__container[aria-invalid=\"true\"]\n    .af-card-radio-label:not(:has(input:checked)) {\n    --card-radio-outline-width: 1px;\n\n    &:hover,\n    &:focus-visible,\n    &:focus-within,\n    &:focus {\n      --card-radio-outline-width: 2px;\n    }\n  }\n}\n","@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\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-radio-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-radio-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  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: calc(28 / var(--font-size-base) * 1rem);\n      height: calc(28 / var(--font-size-base) * 1rem);\n      color: var(--card-radio-color);\n      fill: var(--card-radio-fill);\n    }\n\n    &-description {\n      display: flex;\n      flex-direction: column;\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n\n      & > span:first-child {\n        line-height: calc(24 / var(--font-size-base) * 1rem);\n        color: var(--card-radio-color);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--card-radio-color);\n      }\n    }\n  }\n\n  & ~ &__error {\n    border: solid var(--color-red-700);\n\n    & > svg {\n      border: solid var(--color-red-700);\n    }\n  }\n\n  &-group {\n    border: none;\n\n    --card-radio-flex-wrap: var(--card-radio-flex-wrap, nowrap);\n\n    flex-wrap: var(--card-radio-flex-wrap);\n\n    .af-card-radio-label {\n      width: var(--card-radio-width, auto);\n      min-width: var(--card-radio-min-width, auto);\n    }\n  }\n\n  &-group--vertical {\n    flex-direction: var(--card-radio-flex-direction);\n\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n    }\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--checkbox-card-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    flex-direction: var(--card-radio-flex-direction);\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--card-radio-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-radio-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n\n    .af-card-radio-label {\n      --card-radio-border-width: 1px;\n\n      display: flex;\n      padding: 1rem;\n      border: var(--card-radio-border-width) solid\n        var(--card-radio-border-color);\n      border-radius: var(--card-radio-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      background-color: var(--card-radio-background-color);\n      outline: var(--card-radio-outline-width, 0) solid\n        var(--card-radio-outline-color);\n      outline-offset: calc(\n        -1 *\n          calc(var(--card-radio-border-width) + var(--card-radio-outline-width))\n      );\n      cursor: pointer;\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      &:has(input[aria-invalid=\"true\"]) {\n        --card-radio-outline-width: 1px;\n      }\n\n      .af-card-radio-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          display: flex;\n          justify-content: center;\n          gap: calc(\n            var(--card-radio-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-radio-title-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-radio-subtitle-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  }\n\n  &__container[aria-invalid=\"true\"]\n    .af-card-radio-label:not(:has(input:checked)) {\n    --card-radio-outline-width: 1px;\n\n    &:hover,\n    &:focus-visible,\n    &:focus-within,\n    &:focus {\n      --card-radio-outline-width: 2px;\n    }\n  }\n}\n"]}

package/dist/Form/Radio/CardRadio/CardRadioCommon.scss

@@ -49,7 +49,6 @@
     &-description {
       display: flex;
       flex-direction: column;
-      gap: calc(4 / var(--font-size-base) * 1rem);
       line-height: calc(20 / var(--font-size-base) * 1rem);
 
       & > span:first-child {
@@ -144,25 +143,31 @@
     line-height: calc(20 / var(--font-size-base) * 1rem);
 
     .af-card-radio-label {
+      --card-radio-border-width: 1px;
+
       display: flex;
       padding: 1rem;
-      border: 1px solid var(--card-radio-border-color);
+      border: var(--card-radio-border-width) solid
+        var(--card-radio-border-color);
       border-radius: var(--card-radio-border-radius);
       flex: 1;
       align-self: stretch;
       gap: calc(12 / var(--font-size-base) * 1rem);
       background-color: var(--card-radio-background-color);
+      outline: var(--card-radio-outline-width, 0) solid
+        var(--card-radio-outline-color);
+      outline-offset: calc(
+        -1 *
+          calc(var(--card-radio-border-width) + var(--card-radio-outline-width))
+      );
       cursor: pointer;
 
       &:hover,
       &:focus-visible,
       &:focus-within,
-      &:has(input:checked) {
-        outline: 1px solid var(--card-radio-outline-color);
-
-        & > span:first-child {
-          outline: 1px solid var(--radio-outline-color);
-        }
+      &:has(input:checked),
+      &:has(input[aria-invalid="true"]) {
+        --card-radio-outline-width: 1px;
       }
 
       .af-card-radio-content {
@@ -173,13 +178,17 @@
         .af-card-radio-content-description {
           display: flex;
           justify-content: center;
+          gap: calc(
+            var(--card-radio-content-description-gap, 4) /
+              var(--font-size-base) * 1rem
+          );
           font-size: 1rem;
           line-height: calc(20 / var(--font-size-base) * 1rem);
 
           & > span:first-child {
             font-size: calc(18 / var(--font-size-base) * 1rem);
             font-weight: 400;
-            color: var(--card-radio-label-text-color);
+            color: var(--card-radio-title-text-color);
 
             @media (width < #{breakpoints.$breakpoint-sm}) {
               font-size: calc(16 / var(--font-size-base) * 1rem);
@@ -190,7 +199,7 @@
           & > span:not(:first-child) {
             font-size: calc(16 / var(--font-size-base) * 1rem);
             font-weight: 400;
-            color: var(--card-radio-label-text-color);
+            color: var(--card-radio-subtitle-text-color);
 
             @media (width < #{breakpoints.$breakpoint-sm}) {
               font-size: calc(14 / var(--font-size-base) * 1rem);
@@ -201,4 +210,16 @@
       }
     }
   }
+
+  &__container[aria-invalid="true"]
+    .af-card-radio-label:not(:has(input:checked)) {
+    --card-radio-outline-width: 1px;
+
+    &:hover,
+    &:focus-visible,
+    &:focus-within,
+    &:focus {
+      --card-radio-outline-width: 2px;
+    }
+  }
 }

package/dist/Form/Radio/CardRadio/CardRadioLF.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(--color-gray-900)}.af-card-radio__description{--card-radio-color:var(--color-gray-700)}.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(--color-gray-900)}.af-card-radio__content-description>span:not(:first-child){--card-radio-color:var(--color-gray-700)}.af-card-radio~.af-card-radio__error{--error-box-color:var(--color-red-700)}.af-card-radio~.af-card-radio__error>svg{--error-box-color:var(--color-red-700);--error-box-fill: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:row;--card-radio-align-items:flex-start;--card-radio-justify-content:flex-start}.af-card-radio-group--vertical .af-card-radio-label .af-radio{position:absolute}.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;--card-radio-align-items:center}.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(--color-gray-700);--card-radio-outline-color:var(--card-radio-border-color);--card-radio-border-radius:calc(6/var(--font-size-base)*1rem);--card-radio-background-color:var(--color-white)}.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: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:hover{--card-radio-border-color:var(--color-axa)}.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(--color-axa)}.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(--color-black)}.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(--color-axa);--card-radio-background-color:var(--color-blue-2)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label{--card-radio-border-color:var(--color-red-700)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label>span:first-child{--radio-border-color:var(--color-red-700)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label:has(input:checked){--card-radio-border-color:var(--color-red-700)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label:has(input:checked)>span:first-child{--radio-border-color:var(--color-red-700)}
+.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(--color-gray-900)}.af-card-radio__description{--card-radio-color:var(--color-gray-700)}.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(--color-gray-900)}.af-card-radio__content-description>span:not(:first-child){--card-radio-color:var(--color-gray-700)}.af-card-radio~.af-card-radio__error{--error-box-color:var(--color-red-700)}.af-card-radio~.af-card-radio__error>svg{--error-box-color:var(--color-red-700);--error-box-fill: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:row;--card-radio-align-items:flex-start;--card-radio-justify-content:flex-start}.af-card-radio-group--vertical .af-card-radio-label .af-radio{position:absolute}.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;--card-radio-align-items:center}.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(--color-gray-700);--card-radio-outline-color:var(--card-radio-border-color);--card-radio-border-radius:calc(6/var(--font-size-base)*1rem);--card-radio-background-color:var(--color-white)}.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: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:hover{--card-radio-border-color:var(--color-axa)}.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(--color-axa)}.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(--color-black)}.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(--color-axa);--card-radio-background-color:var(--color-blue-2)}.af-card-radio__container[aria-invalid=true] .af-card-radio-label{--card-radio-border-color:var(--color-red-700)}.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(--color-red-700);--radio-outline-width:1px}

package/dist/Form/Radio/CardRadio/CardRadioLF.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Radio/CardRadio/CardRadioCommon.scss","../../../../src/Form/Radio/CardRadio/CardRadioLF.scss","../../../../src/Form/Radio/CardRadio/CardRadioLF.scss%23sass"],"names":[],"mappings":"AAGE,0BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,uBAME,6BAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,yBACE,QCHN,CDOE,4BAIE,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,4BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,wBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,4BAGE,6BAAA,CADA,0CAAA,CADA,yCAAA,CAGA,2BCLN,CDQI,oCACE,YAAA,CACA,qBAAA,CACA,sCAAA,CACA,+CCNN,CDQM,qDAEE,6BAAA,CADA,+CCLR,CDSM,2DACE,6BCPR,CDeI,8EACE,iCCVN,CDcE,qBACE,WAAA,CAEA,yDAAA,CAEA,qCCdJ,CDgBI,0CAEE,0CAAA,CADA,kCCbN,CDkBE,+BACE,+CChBJ,CDkBI,iCACE,YAAA,CACA,WChBN,CDmBI,oDAEE,yCAAA,CADA,+CAAA,CAEA,oDCjBN,CDmBM,2EAEE,QAAA,CACA,+CAAA,CAFA,UCfR,CDmBQ,8GAEE,wCAAA,CADA,+CAAA,CAEA,iBCjBV,CDuBE,iCACE,+CCrBJ,CDuBI,sDAEE,yCAAA,CADA,+CAAA,CAEA,iDCrBN,CDuBM,6EAEE,QAAA,CACA,+CAAA,CAFA,UCnBR,CDuBQ,gHAEE,wCAAA,CADA,+CAAA,CAEA,iBCrBV,CD2BE,gEAGE,mBAAA,CADA,YAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CC1BJ,CD4BI,0GAME,kBAAA,CAEA,mDAAA,CALA,+CAAA,CACA,6CAAA,CAKA,cAAA,CARA,YAAA,CAIA,QAAA,CAEA,uCAAA,CALA,YCnBN,CD4BM,ghBAIE,iDC7BR,CD+BQ,wpBACE,4CC7BV,CDiCM,wJAEE,kBAAA,CADA,YAAA,CAEA,sCC/BR,CDiCQ,8NACE,YAAA,CAEA,cAAA,CADA,sBAAA,CAEA,+CC/BV,CDiCU,gQAGE,wCAAA,CAFA,6CAAA,CACA,eC9BZ,CDiCY,uBALF,gQAMI,6CAAA,CACA,eC9BZ,CACF,CDiCU,4QAGE,wCAAA,CAFA,6CAAA,CACA,eC9BZ,CDiCY,uBALF,4QAMI,6CAAA,CACA,eC9BZ,CACF,CCpKE,gCACE,oDD0KJ,CCvKE,uBACE,wCDyKJ,CCtKE,4BACE,wCDwKJ,CCpKI,4BACE,mCAAA,CACA,kCDsKN,CClKM,qDACE,wCDoKR,CCjKM,2DACE,wCDmKR,CC9JE,qCACE,sCDgKJ,CC9JI,yCACE,sCAAA,CACA,qCDgKN,CC5JE,+BACE,+BD8JJ,CC5JI,oDACE,+BAAA,CACA,mCAAA,CACA,uCD8JN,CC5JM,8DACE,iBD8JR,CC3JM,2EACE,kCAAA,CACA,4DD6JR,CC3JQ,8GACE,kCAAA,CACA,8BD6JV,CCvJE,iCACE,kCDyJJ,CCvJI,sDACE,+BAAA,CACA,+BDyJN,CCvJM,6EACE,+BAAA,CACA,2DDyJR,CCvJQ,gHACE,kCAAA,CACA,kCDyJV,CCjJI,0GACE,+CAAA,CACA,yDAAA,CACA,6DAAA,CACA,gDDmJN,CCjJM,gYAGE,0CDiJR,CC7IQ,wJACE,qCD+IV,CC3IM,gQAGE,gDD2IR,CCxIM,gJACE,0CAAA,CACA,iDD0IR,CCpIE,kEACE,8CDuIJ,CCpII,mFACE,yCDsIN,CCnII,qFACE,8CDqIN,CCnIM,sGACE,yCDqIR","file":"CardRadioLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\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-radio-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-radio-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  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: calc(28 / var(--font-size-base) * 1rem);\n      height: calc(28 / var(--font-size-base) * 1rem);\n      color: var(--card-radio-color);\n      fill: var(--card-radio-fill);\n    }\n\n    &-description {\n      display: flex;\n      flex-direction: column;\n      gap: calc(4 / var(--font-size-base) * 1rem);\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n\n      & > span:first-child {\n        line-height: calc(24 / var(--font-size-base) * 1rem);\n        color: var(--card-radio-color);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--card-radio-color);\n      }\n    }\n  }\n\n  & ~ &__error {\n    border: solid var(--color-red-700);\n\n    & > svg {\n      border: solid var(--color-red-700);\n    }\n  }\n\n  &-group {\n    border: none;\n\n    --card-radio-flex-wrap: var(--card-radio-flex-wrap, nowrap);\n\n    flex-wrap: var(--card-radio-flex-wrap);\n\n    .af-card-radio-label {\n      width: var(--card-radio-width, auto);\n      min-width: var(--card-radio-min-width, auto);\n    }\n  }\n\n  &-group--vertical {\n    flex-direction: var(--card-radio-flex-direction);\n\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n    }\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--checkbox-card-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    flex-direction: var(--card-radio-flex-direction);\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--card-radio-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-radio-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n\n    .af-card-radio-label {\n      display: flex;\n      padding: 1rem;\n      border: 1px solid var(--card-radio-border-color);\n      border-radius: var(--card-radio-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      background-color: var(--card-radio-background-color);\n      cursor: pointer;\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked) {\n        outline: 1px solid var(--card-radio-outline-color);\n\n        & > span:first-child {\n          outline: 1px solid var(--radio-outline-color);\n        }\n      }\n\n      .af-card-radio-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-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-radio-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-radio-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  }\n}\n","@use \"CardRadioCommon\";\n\n.af-card-radio {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-radio-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-radio-color: var(--color-gray-700);\n  }\n\n  &__content {\n    & > svg {\n      --card-radio-color: var(--color-axa);\n      --card-radio-fill: var(--color-axa);\n    }\n\n    &-description {\n      & > span:first-child {\n        --card-radio-color: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-color: var(--color-gray-700);\n      }\n    }\n  }\n\n  & ~ &__error {\n    --error-box-color: var(--color-red-700);\n\n    & > svg {\n      --error-box-color: var(--color-red-700);\n      --error-box-fill: var(--color-red-700);\n    }\n  }\n\n  &-group--vertical {\n    --card-radio-flex-direction: row;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n      --card-radio-align-items: flex-start;\n      --card-radio-justify-content: flex-start;\n\n      .af-radio {\n        position: absolute;\n      }\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: column;\n        --card-radio-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    --card-radio-flex-direction: column;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n      --card-radio-align-items: center;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: row;\n        --card-radio-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: flex-start;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    .af-card-radio-label {\n      --card-radio-border-color: var(--color-gray-700);\n      --card-radio-outline-color: var(--card-radio-border-color);\n      --card-radio-border-radius: calc(6 / var(--font-size-base) * 1rem);\n      --card-radio-background-color: var(--color-white);\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within {\n        --card-radio-border-color: var(--color-axa);\n      }\n\n      &:hover {\n        & > span:first-child {\n          --radio-border-color: var(--color-axa);\n        }\n      }\n\n      .af-card-radio-content\n        .af-card-radio-content-description\n        > span:first-child {\n        --card-radio-label-text-color: var(--color-black);\n      }\n\n      &:has(input:checked) {\n        --card-radio-border-color: var(--color-axa);\n        --card-radio-background-color: var(--color-blue-2);\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  &__container[aria-invalid=\"true\"] .af-card-radio-label {\n    --card-radio-border-color: var(--color-red-700);\n\n    /* stylelint-disable-next-line no-descending-specificity */\n    & > span:first-child {\n      --radio-border-color: var(--color-red-700);\n    }\n\n    &:has(input:checked) {\n      --card-radio-border-color: var(--color-red-700);\n\n      & > span:first-child {\n        --radio-border-color: var(--color-red-700);\n      }\n    }\n  }\n}\n","@use \"CardRadioCommon\";\n\n.af-card-radio {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-radio-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-radio-color: var(--color-gray-700);\n  }\n\n  &__content {\n    & > svg {\n      --card-radio-color: var(--color-axa);\n      --card-radio-fill: var(--color-axa);\n    }\n\n    &-description {\n      & > span:first-child {\n        --card-radio-color: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-color: var(--color-gray-700);\n      }\n    }\n  }\n\n  & ~ &__error {\n    --error-box-color: var(--color-red-700);\n\n    & > svg {\n      --error-box-color: var(--color-red-700);\n      --error-box-fill: var(--color-red-700);\n    }\n  }\n\n  &-group--vertical {\n    --card-radio-flex-direction: row;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n      --card-radio-align-items: flex-start;\n      --card-radio-justify-content: flex-start;\n\n      .af-radio {\n        position: absolute;\n      }\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: column;\n        --card-radio-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    --card-radio-flex-direction: column;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n      --card-radio-align-items: center;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: row;\n        --card-radio-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: flex-start;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    .af-card-radio-label {\n      --card-radio-border-color: var(--color-gray-700);\n      --card-radio-outline-color: var(--card-radio-border-color);\n      --card-radio-border-radius: calc(6 / var(--font-size-base) * 1rem);\n      --card-radio-background-color: var(--color-white);\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within {\n        --card-radio-border-color: var(--color-axa);\n      }\n\n      &:hover {\n        & > span:first-child {\n          --radio-border-color: var(--color-axa);\n        }\n      }\n\n      .af-card-radio-content\n        .af-card-radio-content-description\n        > span:first-child {\n        --card-radio-label-text-color: var(--color-black);\n      }\n\n      &:has(input:checked) {\n        --card-radio-border-color: var(--color-axa);\n        --card-radio-background-color: var(--color-blue-2);\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  &__container[aria-invalid=\"true\"] .af-card-radio-label {\n    --card-radio-border-color: var(--color-red-700);\n\n    /* stylelint-disable-next-line no-descending-specificity */\n    & > span:first-child {\n      --radio-border-color: var(--color-red-700);\n    }\n\n    &:has(input:checked) {\n      --card-radio-border-color: var(--color-red-700);\n\n      & > span:first-child {\n        --radio-border-color: var(--color-red-700);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Radio/CardRadio/CardRadioCommon.scss","../../../../src/Form/Radio/CardRadio/CardRadioLF.scss","../../../../src/Form/Radio/CardRadio/CardRadioLF.scss%23sass"],"names":[],"mappings":"AAGE,0BACE,YAAA,CCFJ,qBAAA,CDII,QCFJ,CDKE,uBAME,6BAAA,CALA,YAAA,CAGA,6CAAA,CACA,eAAA,CAHA,mDAAA,CACA,0CCAJ,CDKI,yBACE,QCHN,CDOE,4BAIE,6BAAA,CAHA,6CAAA,CACA,eAAA,CACA,+CCJJ,CDOI,uBANF,4BAOI,6CAAA,CACA,+CCJJ,CACF,CDOE,wBAGE,kBAAA,CAFA,YAAA,CAIA,QAAA,CADA,sBAAA,CAFA,UCFJ,CDOI,4BAGE,6BAAA,CADA,0CAAA,CADA,yCAAA,CAGA,2BCLN,CDQI,oCACE,YAAA,CACA,qBAAA,CACA,+CCNN,CDQM,qDAEE,6BAAA,CADA,+CCLR,CDSM,2DACE,6BCPR,CDeI,8EACE,iCCVN,CDcE,qBACE,WAAA,CAEA,yDAAA,CAEA,qCCdJ,CDgBI,0CAEE,0CAAA,CADA,kCCbN,CDkBE,+BACE,+CChBJ,CDkBI,iCACE,YAAA,CACA,WChBN,CDmBI,oDAEE,yCAAA,CADA,+CAAA,CAEA,oDCjBN,CDmBM,2EAEE,QAAA,CACA,+CAAA,CAFA,UCfR,CDmBQ,8GAEE,wCAAA,CADA,+CAAA,CAEA,iBCjBV,CDuBE,iCACE,+CCrBJ,CDuBI,sDAEE,yCAAA,CADA,+CAAA,CAEA,iDCrBN,CDuBM,6EAEE,QAAA,CACA,+CAAA,CAFA,UCnBR,CDuBQ,gHAEE,wCAAA,CADA,+CAAA,CAEA,iBCrBV,CD2BE,gEAGE,mBAAA,CADA,YAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CAHA,QAAA,CAIA,+CC1BJ,CD4BI,0GACE,6BAAA,CAQA,kBAAA,CAEA,mDAAA,CANA,0EAAA,CAEA,6CAAA,CAWA,cAAA,CAfA,YAAA,CAKA,QAAA,CAEA,uCAAA,CAEA,+EAAA,CAEA,0FAAA,CAVA,YClBN,CDkCM,srBAKE,8BCpCR,CDuCM,wJAEE,kBAAA,CADA,YAAA,CCpCR,sCACA,CDuCQ,8NACE,YAAA,CAMA,cAAA,CAJA,iFAAA,CADA,sBAAA,CAMA,+CCxCV,CD0CU,gQAGE,wCAAA,CAFA,6CAAA,CACA,eCvCZ,CD0CY,uBALF,gQAMI,6CAAA,CACA,eCvCZ,CACF,CD0CU,4QAGE,2CAAA,CAFA,6CAAA,CACA,eCvCZ,CD0CY,uBALF,4QAMI,6CAAA,CACA,eCvCZ,CACF,CD8CE,2FAEE,8BC7CJ,CD+CI,mZAIE,8BChDN,CC1KE,gCACE,oDDgLJ,CC7KE,uBACE,wCD+KJ,CC5KE,4BACE,wCD8KJ,CC1KI,4BACE,mCAAA,CACA,kCD4KN,CCxKM,qDACE,wCD0KR,CCvKM,2DACE,wCDyKR,CCpKE,qCACE,sCDsKJ,CCpKI,yCACE,sCAAA,CACA,qCDsKN,CClKE,+BACE,+BDoKJ,CClKI,oDACE,+BAAA,CACA,mCAAA,CACA,uCDoKN,CClKM,8DACE,iBDoKR,CCjKM,2EACE,kCAAA,CACA,4DDmKR,CCjKQ,8GACE,kCAAA,CACA,8BDmKV,CC7JE,iCACE,kCD+JJ,CC7JI,sDACE,+BAAA,CACA,+BD+JN,CC7JM,6EACE,+BAAA,CACA,2DD+JR,CC7JQ,gHACE,kCAAA,CACA,kCD+JV,CCvJI,0GACE,+CAAA,CACA,yDAAA,CACA,6DAAA,CACA,gDDyJN,CCvJM,gYAGE,0CDuJR,CCnJQ,wJACE,qCDqJV,CCjJM,gQAGE,gDDiJR,CC9IM,gJACE,0CAAA,CACA,iDDgJR,CC1IE,kEACE,8CD6IJ,CC3II,+NAGE,8BD2IN,CCzIM,kRACE,yBD2IR,CCtII,mFACE,yCAAA,CACA,yBDwIN","file":"CardRadioLF.css","sourcesContent":["@use \"../../../common/breakpoints\" as breakpoints;\n\n.af-card-radio {\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-radio-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-radio-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  &__content {\n    display: flex;\n    width: 100%;\n    align-items: center;\n    justify-content: center;\n    gap: 1rem;\n\n    & > svg {\n      width: calc(28 / var(--font-size-base) * 1rem);\n      height: calc(28 / var(--font-size-base) * 1rem);\n      color: var(--card-radio-color);\n      fill: var(--card-radio-fill);\n    }\n\n    &-description {\n      display: flex;\n      flex-direction: column;\n      line-height: calc(20 / var(--font-size-base) * 1rem);\n\n      & > span:first-child {\n        line-height: calc(24 / var(--font-size-base) * 1rem);\n        color: var(--card-radio-color);\n      }\n\n      & > span:not(:first-child) {\n        color: var(--card-radio-color);\n      }\n    }\n  }\n\n  & ~ &__error {\n    border: solid var(--color-red-700);\n\n    & > svg {\n      border: solid var(--color-red-700);\n    }\n  }\n\n  &-group {\n    border: none;\n\n    --card-radio-flex-wrap: var(--card-radio-flex-wrap, nowrap);\n\n    flex-wrap: var(--card-radio-flex-wrap);\n\n    .af-card-radio-label {\n      width: var(--card-radio-width, auto);\n      min-width: var(--card-radio-min-width, auto);\n    }\n  }\n\n  &-group--vertical {\n    flex-direction: var(--card-radio-flex-direction);\n\n    > * {\n      flex-basis: 0;\n      flex-grow: 1;\n    }\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--checkbox-card-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    flex-direction: var(--card-radio-flex-direction);\n\n    .af-card-radio-label {\n      flex-direction: var(--card-radio-flex-direction);\n      align-items: var(--card-radio-align-items);\n      justify-content: var(--card-radio-justify-content);\n\n      .af-card-radio-content {\n        width: 100%;\n        flex: 1;\n        flex-direction: var(--card-radio-flex-direction);\n\n        .af-card-radio-content-description {\n          flex-direction: var(--card-radio-flex-direction);\n          align-items: var(--card-radio-align-item);\n          text-align: center;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    display: flex;\n    align-items: stretch;\n    gap: 1rem;\n    font-family: var(--card-radio-font-family);\n    font-style: normal;\n    font-weight: 400;\n    line-height: calc(20 / var(--font-size-base) * 1rem);\n\n    .af-card-radio-label {\n      --card-radio-border-width: 1px;\n\n      display: flex;\n      padding: 1rem;\n      border: var(--card-radio-border-width) solid\n        var(--card-radio-border-color);\n      border-radius: var(--card-radio-border-radius);\n      flex: 1;\n      align-self: stretch;\n      gap: calc(12 / var(--font-size-base) * 1rem);\n      background-color: var(--card-radio-background-color);\n      outline: var(--card-radio-outline-width, 0) solid\n        var(--card-radio-outline-color);\n      outline-offset: calc(\n        -1 *\n          calc(var(--card-radio-border-width) + var(--card-radio-outline-width))\n      );\n      cursor: pointer;\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within,\n      &:has(input:checked),\n      &:has(input[aria-invalid=\"true\"]) {\n        --card-radio-outline-width: 1px;\n      }\n\n      .af-card-radio-content {\n        display: flex;\n        align-items: center;\n        gap: calc(4 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          display: flex;\n          justify-content: center;\n          gap: calc(\n            var(--card-radio-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-radio-title-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-radio-subtitle-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  }\n\n  &__container[aria-invalid=\"true\"]\n    .af-card-radio-label:not(:has(input:checked)) {\n    --card-radio-outline-width: 1px;\n\n    &:hover,\n    &:focus-visible,\n    &:focus-within,\n    &:focus {\n      --card-radio-outline-width: 2px;\n    }\n  }\n}\n","@use \"CardRadioCommon\";\n\n.af-card-radio {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-radio-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-radio-color: var(--color-gray-700);\n  }\n\n  &__content {\n    & > svg {\n      --card-radio-color: var(--color-axa);\n      --card-radio-fill: var(--color-axa);\n    }\n\n    &-description {\n      & > span:first-child {\n        --card-radio-color: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-color: var(--color-gray-700);\n      }\n    }\n  }\n\n  & ~ &__error {\n    --error-box-color: var(--color-red-700);\n\n    & > svg {\n      --error-box-color: var(--color-red-700);\n      --error-box-fill: var(--color-red-700);\n    }\n  }\n\n  &-group--vertical {\n    --card-radio-flex-direction: row;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n      --card-radio-align-items: flex-start;\n      --card-radio-justify-content: flex-start;\n\n      .af-radio {\n        position: absolute;\n      }\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: column;\n        --card-radio-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    --card-radio-flex-direction: column;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n      --card-radio-align-items: center;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: row;\n        --card-radio-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: flex-start;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    .af-card-radio-label {\n      --card-radio-border-color: var(--color-gray-700);\n      --card-radio-outline-color: var(--card-radio-border-color);\n      --card-radio-border-radius: calc(6 / var(--font-size-base) * 1rem);\n      --card-radio-background-color: var(--color-white);\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within {\n        --card-radio-border-color: var(--color-axa);\n      }\n\n      &:hover {\n        & > span:first-child {\n          --radio-border-color: var(--color-axa);\n        }\n      }\n\n      .af-card-radio-content\n        .af-card-radio-content-description\n        > span:first-child {\n        --card-radio-label-text-color: var(--color-black);\n      }\n\n      &:has(input:checked) {\n        --card-radio-border-color: var(--color-axa);\n        --card-radio-background-color: var(--color-blue-2);\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  &__container[aria-invalid=\"true\"] .af-card-radio-label {\n    --card-radio-border-color: var(--color-red-700);\n\n    &:hover,\n    &:focus-within,\n    &:focus {\n      --card-radio-outline-width: 2px;\n\n      & > span:first-child {\n        --radio-outline-width: 2px;\n      }\n    }\n\n    /* stylelint-disable-next-line no-descending-specificity */\n    & > span:first-child {\n      --radio-border-color: var(--color-red-700);\n      --radio-outline-width: 1px;\n    }\n  }\n}\n","@use \"CardRadioCommon\";\n\n.af-card-radio {\n  &__label-container {\n    --font-size-base: calc(16 / var(--font-size-base) * 1rem);\n  }\n\n  &__legend {\n    --card-radio-color: var(--color-gray-900);\n  }\n\n  &__description {\n    --card-radio-color: var(--color-gray-700);\n  }\n\n  &__content {\n    & > svg {\n      --card-radio-color: var(--color-axa);\n      --card-radio-fill: var(--color-axa);\n    }\n\n    &-description {\n      & > span:first-child {\n        --card-radio-color: var(--color-gray-900);\n      }\n\n      & > span:not(:first-child) {\n        --card-radio-color: var(--color-gray-700);\n      }\n    }\n  }\n\n  & ~ &__error {\n    --error-box-color: var(--color-red-700);\n\n    & > svg {\n      --error-box-color: var(--color-red-700);\n      --error-box-fill: var(--color-red-700);\n    }\n  }\n\n  &-group--vertical {\n    --card-radio-flex-direction: row;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n      --card-radio-align-items: flex-start;\n      --card-radio-justify-content: flex-start;\n\n      .af-radio {\n        position: absolute;\n      }\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: column;\n        --card-radio-margin-left: calc(12 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: center;\n        }\n      }\n    }\n  }\n\n  &-group--horizontal {\n    --card-radio-flex-direction: column;\n\n    .af-card-radio-label {\n      --card-radio-flex-direction: row;\n      --card-radio-align-items: center;\n\n      .af-card-radio-content {\n        --card-radio-flex-direction: row;\n        --card-radio-margin-left: calc(2 / var(--font-size-base) * 1rem);\n\n        .af-card-radio-content-description {\n          --card-radio-flex-direction: column;\n          --card-radio-align-item: flex-start;\n        }\n      }\n    }\n  }\n\n  &-group--vertical,\n  &-group--horizontal {\n    .af-card-radio-label {\n      --card-radio-border-color: var(--color-gray-700);\n      --card-radio-outline-color: var(--card-radio-border-color);\n      --card-radio-border-radius: calc(6 / var(--font-size-base) * 1rem);\n      --card-radio-background-color: var(--color-white);\n\n      &:hover,\n      &:focus-visible,\n      &:focus-within {\n        --card-radio-border-color: var(--color-axa);\n      }\n\n      &:hover {\n        & > span:first-child {\n          --radio-border-color: var(--color-axa);\n        }\n      }\n\n      .af-card-radio-content\n        .af-card-radio-content-description\n        > span:first-child {\n        --card-radio-label-text-color: var(--color-black);\n      }\n\n      &:has(input:checked) {\n        --card-radio-border-color: var(--color-axa);\n        --card-radio-background-color: var(--color-blue-2);\n      }\n    }\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  &__container[aria-invalid=\"true\"] .af-card-radio-label {\n    --card-radio-border-color: var(--color-red-700);\n\n    &:hover,\n    &:focus-within,\n    &:focus {\n      --card-radio-outline-width: 2px;\n\n      & > span:first-child {\n        --radio-outline-width: 2px;\n      }\n    }\n\n    /* stylelint-disable-next-line no-descending-specificity */\n    & > span:first-child {\n      --radio-border-color: var(--color-red-700);\n      --radio-outline-width: 1px;\n    }\n  }\n}\n"]}

package/dist/Form/Radio/CardRadio/CardRadioLF.scss

@@ -119,17 +119,20 @@
   &__container[aria-invalid="true"] .af-card-radio-label {
     --card-radio-border-color: var(--color-red-700);
 
-    /* stylelint-disable-next-line no-descending-specificity */
-    & > span:first-child {
-      --radio-border-color: var(--color-red-700);
-    }
-
-    &:has(input:checked) {
-      --card-radio-border-color: var(--color-red-700);
+    &:hover,
+    &:focus-within,
+    &:focus {
+      --card-radio-outline-width: 2px;
 
       & > span:first-child {
-        --radio-border-color: var(--color-red-700);
+        --radio-outline-width: 2px;
       }
     }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    & > span:first-child {
+      --radio-border-color: var(--color-red-700);
+      --radio-outline-width: 1px;
+    }
   }
 }

package/dist/Form/Radio/Radio/RadioApollo.css

@@ -1 +1 @@
-.af-radio{align-items:center;border:var(--radio-border-width,1px) solid var(--radio-border-color);display:flex;gap:calc(12/var(--font-size-base)*1rem);justify-content:center;width:calc(24/var(--font-size-base)*1rem)}.af-radio,.af-radio__icons{aspect-ratio:1;border-radius:50%}.af-radio__icons{background-color:var(--radio-background-color);display:none;width:var(--radio-width)}.af-radio:focus-within,.af-radio:has(:checked),.af-radio:hover{outline:1px solid var(--radio-outline-color)}.af-radio input[type=radio]{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-radio input[type=radio]:checked~.af-radio__icons{display:block}.af-radio{--radio-border-color:var(--axa-blue-65);--radio-outline-color:var(--radio-border-color)}.af-radio__icons{--radio-width:calc(12/var(--font-size-base)*1rem);--radio-background-color:var(--axa-blue-100)}.af-radio:focus-within,.af-radio:has(:checked),.af-radio:hover{--radio-border-color:var(--axa-blue-100)}.af-radio[aria-invalid=true]{--radio-border-color:var(--red-alert-100)}
+.af-radio{--radio-border-width:1px;align-items:center;background-color:var(--radio-background-color);border:var(--radio-border-width) solid var(--radio-border-color);display:flex;gap:calc(12/var(--font-size-base)*1rem);justify-content:center;outline:var(--radio-outline-width) solid var(--radio-outline-color);outline-offset:calc((var(--radio-border-width) + var(--radio-outline-width))*-1);width:calc(24/var(--font-size-base)*1rem)}.af-radio,.af-radio__icons{aspect-ratio:1;border-radius:50%}.af-radio__icons{background-color:var(--radio-icon-background-color);display:none;width:var(--radio-width)}.af-radio input[type=radio]{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-radio input[type=radio]:checked~.af-radio__icons{display:block}.af-radio{--radio-border-color:var(--axa-blue-65);--radio-outline-color:var(--radio-border-color);--radio-background-color:var(--white)}.af-radio__icons{--radio-width:calc(12/var(--font-size-base)*1rem);--radio-icon-background-color:var(--axa-blue-100)}.af-radio:focus-within,.af-radio:has(:checked),.af-radio:hover{--radio-border-color:var(--axa-blue-100);--radio-outline-width:1px}.af-radio:not(:has(:checked)):has([aria-invalid=true]){--radio-border-color:var(--red-alert-100);--radio-outline-width:1px}.af-radio:not(:has(:checked)):has([aria-invalid=true]):focus-within,.af-radio:not(:has(:checked)):has([aria-invalid=true]):hover{--radio-outline-width:2px}

package/dist/Form/Radio/Radio/RadioApollo.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Radio/Radio/RadioCommon.scss","../../../../src/Form/Radio/Radio/RadioApollo.scss","../../../../src/Form/Radio/Radio/RadioApollo.scss%23sass"],"names":[],"mappings":"AAAA,UAME,kBAAA,CAFA,oEAAA,CAHA,YAAA,CAOA,uCAAA,CADA,sBAAA,CCLF,yCAOA,CDCE,2BAPA,cAAA,CAEA,iBCWF,CDNE,iBAKE,8CAAA,CAJA,YAAA,CACA,wBCIJ,CDEE,+DAGE,4CCFJ,CDKE,4BAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDKI,qDACE,aCHN,CC5BA,UACE,uCAAA,CACA,+CD+BF,CC7BE,iBACE,iDAAA,CACA,4CD+BJ,CC5BE,+DAGE,wCD4BJ,CCzBE,6BACE,yCD2BJ","file":"RadioApollo.css","sourcesContent":[".af-radio {\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  aspect-ratio: 1;\n  border: var(--radio-border-width, 1px) solid var(--radio-border-color);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  gap: calc(12 / var(--font-size-base) * 1rem);\n\n  &__icons {\n    display: none;\n    width: var(--radio-width);\n    aspect-ratio: 1;\n    border-radius: 50%;\n    background-color: var(--radio-background-color);\n  }\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    outline: 1px solid var(--radio-outline-color);\n  }\n\n  input[type=\"radio\"] {\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    &:checked ~ .af-radio__icons {\n      display: block;\n    }\n  }\n}\n","@use \"RadioCommon\";\n\n.af-radio {\n  --radio-border-color: var(--axa-blue-65);\n  --radio-outline-color: var(--radio-border-color);\n\n  &__icons {\n    --radio-width: calc(12 / var(--font-size-base) * 1rem);\n    --radio-background-color: var(--axa-blue-100);\n  }\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --radio-border-color: var(--axa-blue-100);\n  }\n\n  &[aria-invalid=\"true\"] {\n    --radio-border-color: var(--red-alert-100);\n  }\n}\n","@use \"RadioCommon\";\n\n.af-radio {\n  --radio-border-color: var(--axa-blue-65);\n  --radio-outline-color: var(--radio-border-color);\n\n  &__icons {\n    --radio-width: calc(12 / var(--font-size-base) * 1rem);\n    --radio-background-color: var(--axa-blue-100);\n  }\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --radio-border-color: var(--axa-blue-100);\n  }\n\n  &[aria-invalid=\"true\"] {\n    --radio-border-color: var(--red-alert-100);\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Radio/Radio/RadioCommon.scss","../../../../src/Form/Radio/Radio/RadioApollo.scss","../../../../src/Form/Radio/Radio/RadioApollo.scss%23sass"],"names":[],"mappings":"AAAA,UACE,wBAAA,CAOA,kBAAA,CAGA,8CAAA,CALA,gEAAA,CCJF,YAAA,CDQE,uCAAA,CADA,sBAAA,CAGA,mEAAA,CACA,gFAAA,CATA,yCCSF,CDIE,2BAZA,cAAA,CAEA,iBCaF,CDHE,iBAKE,mDAAA,CAJA,YAAA,CACA,wBCCJ,CDKE,4BAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDKI,qDACE,aCHN,CC7BA,UACE,uCAAA,CACA,+CAAA,CACA,qCDgCF,CC9BE,iBACE,iDAAA,CACA,iDDgCJ,CC7BE,+DAGE,wCAAA,CACA,yBD6BJ,CC1BE,uDACE,yCAAA,CACA,yBD4BJ,CC1BI,iIAEE,yBD2BN","file":"RadioApollo.css","sourcesContent":[".af-radio {\n  --radio-border-width: 1px;\n\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  aspect-ratio: 1;\n  border: var(--radio-border-width) solid var(--radio-border-color);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  gap: calc(12 / var(--font-size-base) * 1rem);\n  background-color: var(--radio-background-color);\n  outline: var(--radio-outline-width) solid var(--radio-outline-color);\n  outline-offset: calc(\n    -1 * calc(var(--radio-border-width) + var(--radio-outline-width))\n  );\n\n  &__icons {\n    display: none;\n    width: var(--radio-width);\n    aspect-ratio: 1;\n    border-radius: 50%;\n    background-color: var(--radio-icon-background-color);\n  }\n\n  input[type=\"radio\"] {\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    &:checked ~ .af-radio__icons {\n      display: block;\n    }\n  }\n}\n","@use \"RadioCommon\";\n\n.af-radio {\n  --radio-border-color: var(--axa-blue-65);\n  --radio-outline-color: var(--radio-border-color);\n  --radio-background-color: var(--white);\n\n  &__icons {\n    --radio-width: calc(12 / var(--font-size-base) * 1rem);\n    --radio-icon-background-color: var(--axa-blue-100);\n  }\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --radio-border-color: var(--axa-blue-100);\n    --radio-outline-width: 1px;\n  }\n\n  &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n    --radio-border-color: var(--red-alert-100);\n    --radio-outline-width: 1px;\n\n    &:hover,\n    &:focus-within {\n      --radio-outline-width: 2px;\n    }\n  }\n}\n","@use \"RadioCommon\";\n\n.af-radio {\n  --radio-border-color: var(--axa-blue-65);\n  --radio-outline-color: var(--radio-border-color);\n  --radio-background-color: var(--white);\n\n  &__icons {\n    --radio-width: calc(12 / var(--font-size-base) * 1rem);\n    --radio-icon-background-color: var(--axa-blue-100);\n  }\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    --radio-border-color: var(--axa-blue-100);\n    --radio-outline-width: 1px;\n  }\n\n  &:not(:has(:checked)):has([aria-invalid=\"true\"]) {\n    --radio-border-color: var(--red-alert-100);\n    --radio-outline-width: 1px;\n\n    &:hover,\n    &:focus-within {\n      --radio-outline-width: 2px;\n    }\n  }\n}\n"]}

package/dist/Form/Radio/Radio/RadioApollo.scss

@@ -3,19 +3,27 @@
 .af-radio {
   --radio-border-color: var(--axa-blue-65);
   --radio-outline-color: var(--radio-border-color);
+  --radio-background-color: var(--white);
 
   &__icons {
     --radio-width: calc(12 / var(--font-size-base) * 1rem);
-    --radio-background-color: var(--axa-blue-100);
+    --radio-icon-background-color: var(--axa-blue-100);
   }
 
   &:hover,
   &:focus-within,
   &:has(:checked) {
     --radio-border-color: var(--axa-blue-100);
+    --radio-outline-width: 1px;
   }
 
-  &[aria-invalid="true"] {
+  &:not(:has(:checked)):has([aria-invalid="true"]) {
     --radio-border-color: var(--red-alert-100);
+    --radio-outline-width: 1px;
+
+    &:hover,
+    &:focus-within {
+      --radio-outline-width: 2px;
+    }
   }
 }

package/dist/Form/Radio/Radio/RadioCommon.css

@@ -1 +1 @@
-.af-radio{align-items:center;border:var(--radio-border-width,1px) solid var(--radio-border-color);display:flex;gap:calc(12/var(--font-size-base)*1rem);justify-content:center;width:calc(24/var(--font-size-base)*1rem)}.af-radio,.af-radio__icons{aspect-ratio:1;border-radius:50%}.af-radio__icons{background-color:var(--radio-background-color);display:none;width:var(--radio-width)}.af-radio:focus-within,.af-radio:has(:checked),.af-radio:hover{outline:1px solid var(--radio-outline-color)}.af-radio input[type=radio]{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-radio input[type=radio]:checked~.af-radio__icons{display:block}
+.af-radio{--radio-border-width:1px;align-items:center;background-color:var(--radio-background-color);border:var(--radio-border-width) solid var(--radio-border-color);display:flex;gap:calc(12/var(--font-size-base)*1rem);justify-content:center;outline:var(--radio-outline-width) solid var(--radio-outline-color);outline-offset:calc((var(--radio-border-width) + var(--radio-outline-width))*-1);width:calc(24/var(--font-size-base)*1rem)}.af-radio,.af-radio__icons{aspect-ratio:1;border-radius:50%}.af-radio__icons{background-color:var(--radio-icon-background-color);display:none;width:var(--radio-width)}.af-radio input[type=radio]{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-radio input[type=radio]:checked~.af-radio__icons{display:block}

package/dist/Form/Radio/Radio/RadioCommon.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Form/Radio/Radio/RadioCommon.scss%23sass","../../../../src/Form/Radio/Radio/RadioCommon.scss"],"names":[],"mappings":"AAAA,UAME,kBAAA,CAFA,oEAAA,CAHA,YAAA,CAOA,uCAAA,CADA,sBAAA,CALA,yCCOF,CDCE,2BAPA,cAAA,CAEA,iBCWF,CDNE,iBAKE,8CAAA,CAJA,YAAA,CACA,wBCIJ,CDEE,+DAGE,4CCFJ,CDKE,4BAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDKI,qDACE,aCHN","file":"RadioCommon.css","sourcesContent":[".af-radio {\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  aspect-ratio: 1;\n  border: var(--radio-border-width, 1px) solid var(--radio-border-color);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  gap: calc(12 / var(--font-size-base) * 1rem);\n\n  &__icons {\n    display: none;\n    width: var(--radio-width);\n    aspect-ratio: 1;\n    border-radius: 50%;\n    background-color: var(--radio-background-color);\n  }\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    outline: 1px solid var(--radio-outline-color);\n  }\n\n  input[type=\"radio\"] {\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    &:checked ~ .af-radio__icons {\n      display: block;\n    }\n  }\n}\n",".af-radio {\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  aspect-ratio: 1;\n  border: var(--radio-border-width, 1px) solid var(--radio-border-color);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  gap: calc(12 / var(--font-size-base) * 1rem);\n\n  &__icons {\n    display: none;\n    width: var(--radio-width);\n    aspect-ratio: 1;\n    border-radius: 50%;\n    background-color: var(--radio-background-color);\n  }\n\n  &:hover,\n  &:focus-within,\n  &:has(:checked) {\n    outline: 1px solid var(--radio-outline-color);\n  }\n\n  input[type=\"radio\"] {\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    &:checked ~ .af-radio__icons {\n      display: block;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Form/Radio/Radio/RadioCommon.scss%23sass","../../../../src/Form/Radio/Radio/RadioCommon.scss"],"names":[],"mappings":"AAAA,UACE,wBAAA,CAOA,kBAAA,CAGA,8CAAA,CALA,gEAAA,CAHA,YAAA,CAOA,uCAAA,CADA,sBAAA,CAGA,mEAAA,CACA,gFAAA,CATA,yCCSF,CDIE,2BAZA,cAAA,CAEA,iBCaF,CDHE,iBAKE,mDAAA,CAJA,YAAA,CACA,wBCCJ,CDKE,4BAME,cAAA,CAHA,0CAAA,CACA,QAAA,CACA,SAAA,CAJA,iBAAA,CACA,yCCCJ,CDKI,qDACE,aCHN","file":"RadioCommon.css","sourcesContent":[".af-radio {\n  --radio-border-width: 1px;\n\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  aspect-ratio: 1;\n  border: var(--radio-border-width) solid var(--radio-border-color);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  gap: calc(12 / var(--font-size-base) * 1rem);\n  background-color: var(--radio-background-color);\n  outline: var(--radio-outline-width) solid var(--radio-outline-color);\n  outline-offset: calc(\n    -1 * calc(var(--radio-border-width) + var(--radio-outline-width))\n  );\n\n  &__icons {\n    display: none;\n    width: var(--radio-width);\n    aspect-ratio: 1;\n    border-radius: 50%;\n    background-color: var(--radio-icon-background-color);\n  }\n\n  input[type=\"radio\"] {\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    &:checked ~ .af-radio__icons {\n      display: block;\n    }\n  }\n}\n",".af-radio {\n  --radio-border-width: 1px;\n\n  display: flex;\n  width: calc(24 / var(--font-size-base) * 1rem);\n  aspect-ratio: 1;\n  border: var(--radio-border-width) solid var(--radio-border-color);\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  gap: calc(12 / var(--font-size-base) * 1rem);\n  background-color: var(--radio-background-color);\n  outline: var(--radio-outline-width) solid var(--radio-outline-color);\n  outline-offset: calc(\n    -1 * calc(var(--radio-border-width) + var(--radio-outline-width))\n  );\n\n  &__icons {\n    display: none;\n    width: var(--radio-width);\n    aspect-ratio: 1;\n    border-radius: 50%;\n    background-color: var(--radio-icon-background-color);\n  }\n\n  input[type=\"radio\"] {\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    &:checked ~ .af-radio__icons {\n      display: block;\n    }\n  }\n}\n"]}

package/dist/Form/Radio/Radio/RadioCommon.scss

@@ -1,25 +1,26 @@
 .af-radio {
+  --radio-border-width: 1px;
+
   display: flex;
   width: calc(24 / var(--font-size-base) * 1rem);
   aspect-ratio: 1;
-  border: var(--radio-border-width, 1px) solid var(--radio-border-color);
+  border: var(--radio-border-width) solid var(--radio-border-color);
   border-radius: 50%;
   align-items: center;
   justify-content: center;
   gap: calc(12 / var(--font-size-base) * 1rem);
+  background-color: var(--radio-background-color);
+  outline: var(--radio-outline-width) solid var(--radio-outline-color);
+  outline-offset: calc(
+    -1 * calc(var(--radio-border-width) + var(--radio-outline-width))
+  );
 
   &__icons {
     display: none;
     width: var(--radio-width);
     aspect-ratio: 1;
     border-radius: 50%;
-    background-color: var(--radio-background-color);
-  }
-
-  &:hover,
-  &:focus-within,
-  &:has(:checked) {
-    outline: 1px solid var(--radio-outline-color);
+    background-color: var(--radio-icon-background-color);
   }
 
   input[type="radio"] {

package/dist/Form/Radio/Radio/RadioLF.css

@@ -1 +1 @@
-.af-radio{align-items:center;border:var(--radio-border-width,1px) solid var(--radio-border-color);display:flex;gap:calc(12/var(--font-size-base)*1rem);justify-content:center;width:calc(24/var(--font-size-base)*1rem)}.af-radio,.af-radio__icons{aspect-ratio:1;border-radius:50%}.af-radio__icons{background-color:var(--radio-background-color);display:none;width:var(--radio-width)}.af-radio:focus-within,.af-radio:has(:checked),.af-radio:hover{outline:1px solid var(--radio-outline-color)}.af-radio input[type=radio]{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-radio input[type=radio]:checked~.af-radio__icons{display:block}.af-radio{--radio-border-color:var(--color-gray-700);--radio-outline-color:var(--radio-border-color);--radio-border-width:2px}.af-radio__icons{--radio-width:calc(12/var(--font-size-base)*1rem);--radio-background-color:var(--color-axa)}.af-radio:focus-within,.af-radio:has(:checked),.af-radio:hover{--radio-border-color:var(--color-axa)}.af-radio[aria-invalid=true]{--radio-border-color:var(--color-red-700)}
+.af-radio{--radio-border-width:1px;align-items:center;background-color:var(--radio-background-color);border:var(--radio-border-width) solid var(--radio-border-color);display:flex;gap:calc(12/var(--font-size-base)*1rem);justify-content:center;outline:var(--radio-outline-width) solid var(--radio-outline-color);outline-offset:calc((var(--radio-border-width) + var(--radio-outline-width))*-1);width:calc(24/var(--font-size-base)*1rem)}.af-radio,.af-radio__icons{aspect-ratio:1;border-radius:50%}.af-radio__icons{background-color:var(--radio-icon-background-color);display:none;width:var(--radio-width)}.af-radio input[type=radio]{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-radio input[type=radio]:checked~.af-radio__icons{display:block}.af-radio{--radio-border-color:var(--color-gray-700);--radio-outline-color:var(--radio-border-color);--radio-outline-width:1px;--radio-background-color:var(--color-white)}.af-radio__icons{--radio-width:calc(10/var(--font-size-base)*1rem);--radio-icon-background-color:var(--color-axa)}.af-radio:focus-within,.af-radio:has(:checked),.af-radio:hover{--radio-border-color:var(--color-axa)}.af-radio:focus-within,.af-radio:hover{--radio-outline-width:2px}.af-radio:has(:checked){--radio-outline-width:1px}.af-radio:not(:has(:checked)):has([aria-invalid=true]){--radio-border-color:var(--color-red-700)}