@axa-fr/design-system-look-and-feel-css 1.0.4-ci.9 → 1.0.5-alpha.243

package/dist/Layout/Header/BurgerMenu/BurgerMenu.scss

@@ -0,0 +1,48 @@
+@use "../../../common/common" as common;
+
+.af-burger-menu.af-card {
+  display: none;
+
+  @include common.media-breakpoint-down(md) {
+    position: absolute;
+    width: 100%;
+    padding: 0;
+    border-radius: 0 0 common.rem(8) common.rem(8);
+    list-style-type: none;
+
+    & > ul {
+      padding: 0;
+      list-style-type: none;
+    }
+
+    .af-list__item {
+      padding: 0;
+
+      .af-click-item {
+        gap: common.rem(16);
+        box-shadow: none;
+
+        & > svg {
+          fill: var(--color-axa);
+        }
+
+        &__label {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: common.rem(16);
+          font-size: common.rem(16);
+          font-weight: 400;
+
+          & > svg {
+            fill: var(--color-axa);
+          }
+        }
+      }
+    }
+
+    &.open {
+      display: block;
+    }
+  }
+}

package/dist/Layout/Header/Header.css

@@ -1 +1 @@
-.af-header{background-color:var(--color-white);position:sticky;top:0;z-index:100}.af-header-container{align-items:center;border-bottom:1px solid var(--color-gray-300);border-top:2px solid var(--color-axa);color:var(--color-axa);display:flex;flex-direction:row;font-family:var(--font-family-sans-serif);font-size:1.25rem;font-weight:600;height:72px;justify-content:space-between;padding:0 1rem;width:100%}.af-header-container .af-btn-client{min-width:auto}.af-header-container .af-btn-client>svg{display:none}.af-logo{align-self:center;height:40px;width:40px}.af-header-left-item>nav{display:none}.af-header-right-item{align-items:center;display:flex;flex-direction:row;gap:var(--spacing-u1);margin:0 var(--spacing-u1)}@media only screen and (width >= 1023px){.af-header-container{border-top:2px solid var(--color-axa);height:80px;padding:0 3.75rem;width:auto}.af-header-container .af-btn-client>svg{display:block}.af-logo{height:56px;width:56px}.af-header-left-item{align-items:center;display:flex;flex-direction:row;gap:1.5rem;height:5rem}.af-header-left-item>nav{display:block}.af-header-right-item{gap:var(--spacing-u2);margin:0}}
+.af-header{background-color:var(--color-white);position:sticky;top:0;z-index:2}.af-header>.af-header-container{align-items:center;border-bottom:1px solid var(--color-gray-300);border-top:2px solid var(--color-axa);color:var(--color-axa);display:flex;flex-direction:row;font-family:var(--font-family-sans-serif);font-size:1.25rem;font-weight:600;height:5rem;justify-content:space-between;padding:0 3.75rem;width:auto}@media (max-width:1278.98px){.af-header>.af-header-container{height:72px;padding:0 1rem;width:100%}}.af-header>.af-header-container>.af-header-left-item{align-items:center;display:flex;flex-direction:row;gap:1.5rem;height:5rem}.af-header>.af-header-container>.af-header-left-item>.af-logo{height:56px;width:56px}@media (max-width:1278.98px){.af-header>.af-header-container>.af-header-left-item>.af-logo{align-self:center;height:40px;width:40px}}.af-header>.af-header-container>.af-header-left-item>nav{display:block}@media (max-width:1278.98px){.af-header>.af-header-container>.af-header-left-item>nav{display:none}}.af-header>.af-header-container>.af-header-right-item{display:flex;flex-direction:row;gap:var(--spacing-u2);margin:0}@media (max-width:1278.98px){.af-header>.af-header-container>.af-header-right-item{display:none}}.af-header>.af-header-container>.af-btn-client{display:none}@media (max-width:1278.98px){.af-header>.af-header-container>.af-btn-client{display:block}}.af-header-overlay{display:none}@media (max-width:1278.98px){.af-header-overlay.open{background:var(--color-gray-900);display:block;inset:0;opacity:.5;position:fixed;z-index:1}}

package/dist/Layout/Header/Header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Layout/Header/Header.scss%23sass","../../../src/Layout/Header/Header.scss"],"names":[],"mappings":"AAEA,WAIE,mCAAA,CAHA,eAAA,CAEA,KAAA,CCHF,WAGA,CDIA,qBAQE,kBAAA,CAFA,6CAAA,CADA,qCAAA,CAQA,sBAAA,CAZA,YAAA,CAMA,kBAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CATA,WAAA,CAMA,6BAAA,CALA,cAAA,CCJF,UAYA,CDGE,oCACE,cCDJ,CDGI,wCACE,YCDN,CDMA,SAGE,iBAAA,CCLF,WAAA,CDGE,UCDF,CDMA,yBACE,YCHF,CDMA,sBCAA,kBAAA,CDCE,YAAA,CAEA,kBAAA,CAEA,qBAAA,CCPF,0BAIA,CDMA,yCACE,qBCAA,qCAAA,CDEE,WAAA,CCHJ,iBAAA,CAFA,UAIE,CDKE,wCACE,aCHJ,CDOA,SAEE,WAAA,CADA,UCJF,CDQA,qBAIE,kBAAA,CAHA,YAAA,CAEA,kBAAA,CCLF,UAAA,CAHA,WAIA,CDQE,yBACE,aCNJ,CDUA,sBAEE,qBAAA,CADA,QCPF,CACF","file":"Header.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 100;\n  top: 0;\n  background-color: var(--color-white);\n}\n\n.af-header-container {\n  display: flex;\n  width: 100%;\n  height: 72px;\n  padding: 0 1rem;\n  border-top: 2px solid var(--color-axa);\n  border-bottom: 1px solid var(--color-gray-300);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  font-family: var(--font-family-sans-serif);\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--color-axa);\n\n  & .af-btn-client {\n    min-width: initial;\n\n    & > svg {\n      display: none;\n    }\n  }\n}\n\n.af-logo {\n  width: 40px;\n  height: 40px;\n  align-self: center;\n}\n\n.af-header-left-item > nav {\n  display: none;\n}\n\n.af-header-right-item {\n  display: flex;\n  margin: 0 var(--spacing-u1);\n  flex-direction: row;\n  align-items: center;\n  gap: var(--spacing-u1);\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-container {\n    width: auto;\n    height: 80px;\n    padding: 0 3.75rem;\n    border-top: 2px solid var(--color-axa);\n\n    & .af-btn-client > svg {\n      display: block;\n    }\n  }\n\n  .af-logo {\n    width: 56px;\n    height: 56px;\n  }\n\n  .af-header-left-item {\n    display: flex;\n    height: 5rem;\n    flex-direction: row;\n    align-items: center;\n    gap: 1.5rem;\n\n    & > nav {\n      display: block;\n    }\n  }\n\n  .af-header-right-item {\n    margin: 0;\n    gap: var(--spacing-u2);\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 100;\n  top: 0;\n  background-color: var(--color-white);\n}\n\n.af-header-container {\n  display: flex;\n  width: 100%;\n  height: 72px;\n  padding: 0 1rem;\n  border-top: 2px solid var(--color-axa);\n  border-bottom: 1px solid var(--color-gray-300);\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  font-family: var(--font-family-sans-serif);\n  font-size: 1.25rem;\n  font-weight: 600;\n  color: var(--color-axa);\n\n  & .af-btn-client {\n    min-width: initial;\n\n    & > svg {\n      display: none;\n    }\n  }\n}\n\n.af-logo {\n  width: 40px;\n  height: 40px;\n  align-self: center;\n}\n\n.af-header-left-item > nav {\n  display: none;\n}\n\n.af-header-right-item {\n  display: flex;\n  margin: 0 var(--spacing-u1);\n  flex-direction: row;\n  align-items: center;\n  gap: var(--spacing-u1);\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-container {\n    width: auto;\n    height: 80px;\n    padding: 0 3.75rem;\n    border-top: 2px solid var(--color-axa);\n\n    & .af-btn-client > svg {\n      display: block;\n    }\n  }\n\n  .af-logo {\n    width: 56px;\n    height: 56px;\n  }\n\n  .af-header-left-item {\n    display: flex;\n    height: 5rem;\n    flex-direction: row;\n    align-items: center;\n    gap: 1.5rem;\n\n    & > nav {\n      display: block;\n    }\n  }\n\n  .af-header-right-item {\n    margin: 0;\n    gap: var(--spacing-u2);\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/Layout/Header/Header.scss%23sass","../../../src/Layout/Header/Header.scss","../../../src/common/common.scss"],"names":[],"mappings":"AAEA,WAIE,mCAAA,CAHA,eAAA,CAEA,KAAA,CCHF,SAGA,CDGE,gCAQE,kBAAA,CAFA,6CAAA,CADA,qCAAA,CAQA,sBAAA,CAZA,YAAA,CAMA,kBAAA,CAGA,yCAAA,CACA,iBAAA,CACA,eAAA,CATA,WAAA,CAMA,6BAAA,CALA,iBAAA,CAFA,UCUJ,CC4LI,6BFxMF,gCAiBI,WAAA,CACA,cAAA,CAFA,UCEJ,CACF,CDEI,qDAIE,kBAAA,CAHA,YAAA,CAEA,kBAAA,CAEA,UAAA,CAHA,WCGN,CDEM,8DAEE,WAAA,CADA,UCCR,CC0KI,6BF5KE,8DAOI,iBAAA,CADA,WAAA,CADA,UCGR,CACF,CDEM,yDACE,aCAR,CCgKI,6BF5JI,yDACE,YCDR,CACF,CDKI,sDACE,YAAA,CAEA,kBAAA,CACA,qBAAA,CAFA,QCDN,CCqJI,6BFtJA,sDAOI,YCFN,CACF,CDKI,+CACE,YCHN,CC6II,6BF3IA,+CAII,aCFN,CACF,CDOA,mBACE,YCJF,CCoII,6BF7HA,wBAME,gCAAA,CCPJ,aAAA,CDII,OAAA,CAEA,UAAA,CCTN,cAAA,CACE,SAKA,CACF","file":"Header.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  background-color: var(--color-white);\n\n  & > .af-header-container {\n    display: flex;\n    width: auto;\n    height: common.rem(80);\n    padding: 0 3.75rem;\n    border-top: 2px solid var(--color-axa);\n    border-bottom: 1px solid var(--color-gray-300);\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    font-family: var(--font-family-sans-serif);\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: var(--color-axa);\n\n    @include common.media-breakpoint-down(md) {\n      width: 100%;\n      height: 72px;\n      padding: 0 1rem;\n    }\n\n    & > .af-header-left-item {\n      display: flex;\n      height: 5rem;\n      flex-direction: row;\n      align-items: center;\n      gap: 1.5rem;\n\n      & > .af-logo {\n        width: 56px;\n        height: 56px;\n\n        @include common.media-breakpoint-down(md) {\n          width: 40px;\n          height: 40px;\n          align-self: center;\n        }\n      }\n\n      & > nav {\n        display: block;\n      }\n\n      @include common.media-breakpoint-down(md) {\n        & > nav {\n          display: none;\n        }\n      }\n    }\n\n    & > .af-header-right-item {\n      display: flex;\n      margin: 0;\n      flex-direction: row;\n      gap: var(--spacing-u2);\n\n      @include common.media-breakpoint-down(md) {\n        display: none;\n      }\n    }\n\n    & > .af-btn-client {\n      display: none;\n\n      @include common.media-breakpoint-down(md) {\n        display: block;\n      }\n    }\n  }\n}\n\n.af-header-overlay {\n  display: none;\n\n  @include common.media-breakpoint-down(md) {\n    &.open {\n      position: fixed;\n      z-index: 1;\n      inset: 0;\n      display: block;\n      opacity: 0.5;\n      background: var(--color-gray-900);\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-header {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  background-color: var(--color-white);\n\n  & > .af-header-container {\n    display: flex;\n    width: auto;\n    height: common.rem(80);\n    padding: 0 3.75rem;\n    border-top: 2px solid var(--color-axa);\n    border-bottom: 1px solid var(--color-gray-300);\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    font-family: var(--font-family-sans-serif);\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: var(--color-axa);\n\n    @include common.media-breakpoint-down(md) {\n      width: 100%;\n      height: 72px;\n      padding: 0 1rem;\n    }\n\n    & > .af-header-left-item {\n      display: flex;\n      height: 5rem;\n      flex-direction: row;\n      align-items: center;\n      gap: 1.5rem;\n\n      & > .af-logo {\n        width: 56px;\n        height: 56px;\n\n        @include common.media-breakpoint-down(md) {\n          width: 40px;\n          height: 40px;\n          align-self: center;\n        }\n      }\n\n      & > nav {\n        display: block;\n      }\n\n      @include common.media-breakpoint-down(md) {\n        & > nav {\n          display: none;\n        }\n      }\n    }\n\n    & > .af-header-right-item {\n      display: flex;\n      margin: 0;\n      flex-direction: row;\n      gap: var(--spacing-u2);\n\n      @include common.media-breakpoint-down(md) {\n        display: none;\n      }\n    }\n\n    & > .af-btn-client {\n      display: none;\n\n      @include common.media-breakpoint-down(md) {\n        display: block;\n      }\n    }\n  }\n}\n\n.af-header-overlay {\n  display: none;\n\n  @include common.media-breakpoint-down(md) {\n    &.open {\n      position: fixed;\n      z-index: 1;\n      inset: 0;\n      display: block;\n      opacity: 0.5;\n      background: var(--color-gray-900);\n    }\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./mixins\";\n\n$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-600: #d4435b !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-blue-200: #eef !default;\n$color-blue-400: #cccce9 !default;\n$color-blue-800: #00008f !default; // prefer use $color-axa\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-32: #5c5c5c;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default; // prefer use $color-gray-200\n$color-focus: #36f !default; // prefer use $color-blue-3\n\n// others\n\n$default-border-radius: 4px !default;\n$radius-8: 8px !default;\n$radius-12: 12px;\n$radius-32: 32px;\n$radius-100: 100% !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n$color-orange-100: #fff8f3 !default;\n$color-orange-700: #c94e14 !default;\n\n// Grid breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n  xs: $breakpoint-xs,\n  sm: $breakpoint-sm,\n  md: $breakpoint-md,\n  lg: $breakpoint-lg,\n  xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n//    (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next(\n  $name,\n  $breakpoints: $grid-breakpoints,\n  $breakpoint-names: map.keys($breakpoints)\n) {\n  $n: list.index($breakpoint-names, $name);\n\n  @return if(\n    $n < list.length($breakpoint-names),\n    list.nth($breakpoint-names, $n + 1),\n    null\n  );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n//    >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map.get($breakpoints, $name);\n\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n//    >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $next: breakpoint-next($name, $breakpoints);\n\n  @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n"]}

package/dist/Layout/Header/Header.scss

@@ -2,84 +2,92 @@
 
 .af-header {
   position: sticky;
-  z-index: 100;
+  z-index: 2;
   top: 0;
   background-color: var(--color-white);
-}
-
-.af-header-container {
-  display: flex;
-  width: 100%;
-  height: 72px;
-  padding: 0 1rem;
-  border-top: 2px solid var(--color-axa);
-  border-bottom: 1px solid var(--color-gray-300);
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-family: var(--font-family-sans-serif);
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-axa);
 
-  & .af-btn-client {
-    min-width: initial;
+  & > .af-header-container {
+    display: flex;
+    width: auto;
+    height: common.rem(80);
+    padding: 0 3.75rem;
+    border-top: 2px solid var(--color-axa);
+    border-bottom: 1px solid var(--color-gray-300);
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--font-family-sans-serif);
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--color-axa);
 
-    & > svg {
-      display: none;
+    @include common.media-breakpoint-down(md) {
+      width: 100%;
+      height: 72px;
+      padding: 0 1rem;
     }
-  }
-}
 
-.af-logo {
-  width: 40px;
-  height: 40px;
-  align-self: center;
-}
+    & > .af-header-left-item {
+      display: flex;
+      height: 5rem;
+      flex-direction: row;
+      align-items: center;
+      gap: 1.5rem;
 
-.af-header-left-item > nav {
-  display: none;
-}
+      & > .af-logo {
+        width: 56px;
+        height: 56px;
 
-.af-header-right-item {
-  display: flex;
-  margin: 0 var(--spacing-u1);
-  flex-direction: row;
-  align-items: center;
-  gap: var(--spacing-u1);
-}
+        @include common.media-breakpoint-down(md) {
+          width: 40px;
+          height: 40px;
+          align-self: center;
+        }
+      }
 
-@media only screen and (width >= #{common.$breakpoint-md}) {
-  .af-header-container {
-    width: auto;
-    height: 80px;
-    padding: 0 3.75rem;
-    border-top: 2px solid var(--color-axa);
+      & > nav {
+        display: block;
+      }
 
-    & .af-btn-client > svg {
-      display: block;
+      @include common.media-breakpoint-down(md) {
+        & > nav {
+          display: none;
+        }
+      }
     }
-  }
 
-  .af-logo {
-    width: 56px;
-    height: 56px;
-  }
+    & > .af-header-right-item {
+      display: flex;
+      margin: 0;
+      flex-direction: row;
+      gap: var(--spacing-u2);
 
-  .af-header-left-item {
-    display: flex;
-    height: 5rem;
-    flex-direction: row;
-    align-items: center;
-    gap: 1.5rem;
+      @include common.media-breakpoint-down(md) {
+        display: none;
+      }
+    }
 
-    & > nav {
-      display: block;
+    & > .af-btn-client {
+      display: none;
+
+      @include common.media-breakpoint-down(md) {
+        display: block;
+      }
     }
   }
+}
 
-  .af-header-right-item {
-    margin: 0;
-    gap: var(--spacing-u2);
+.af-header-overlay {
+  display: none;
+
+  @include common.media-breakpoint-down(md) {
+    &.open {
+      position: fixed;
+      z-index: 1;
+      inset: 0;
+      display: block;
+      opacity: 0.5;
+      background: var(--color-gray-900);
+    }
   }
 }

package/dist/Layout/Header/NavBar/NavBar.css

@@ -1 +1 @@
-.af-navbar-container{align-items:center;display:flex;flex-direction:row;gap:1.6rem;height:5rem;list-style-type:none;margin:0;padding:0}.af-navbar-item{cursor:pointer;height:100%}.af-navbar-item__link{box-sizing:border-box;color:var(--color-gray-900);display:inline-block;font-family:var(--font-family-base);font-size:1.125rem;font-weight:400;height:100%;line-height:1.4rem;min-width:8.4rem;padding:1.625rem 1.5rem;text-align:center;text-decoration:none}.af-navbar-item__link--active,.af-navbar-item__link:focus{border-bottom:4px solid var(--color-axa);color:var(--color-axa);font-weight:600;line-height:1.6rem;outline:none;text-decoration:none}.af-navbar-item__link:not(:focus,--active):hover{border-bottom:2px solid var(--color-gray-300);color:var(--color-gray-900);font-weight:400;line-height:1.4rem;text-decoration:none}
+.af-navbar-container{align-items:center;display:flex;flex-direction:row;gap:1.6rem;height:5rem;list-style-type:none;margin:0;padding:0}.af-navbar-container .af-navbar-item{cursor:pointer;height:100%}.af-navbar-container .af-navbar-item__link{box-sizing:border-box;color:var(--color-gray-900);display:inline-block;font-family:var(--font-family-base);font-size:1.125rem;font-weight:400;height:100%;line-height:1.4rem;min-width:8.4rem;padding:1.625rem 1.5rem;text-align:center;text-decoration:none}.af-navbar-container .af-navbar-item__link>svg{display:none}.af-navbar-container .af-navbar-item__link--active,.af-navbar-container .af-navbar-item__link:focus{border-bottom:4px solid var(--color-axa);color:var(--color-axa);font-weight:600;line-height:1.6rem;outline:none;text-decoration:none}.af-navbar-container .af-navbar-item__link:not(:focus,--active):hover{border-bottom:2px solid var(--color-gray-300);color:var(--color-gray-900);font-weight:400;line-height:1.4rem;text-decoration:none}

package/dist/Layout/Header/NavBar/NavBar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Layout/Header/NavBar/NavBar.scss%23sass","../../../../src/Layout/Header/NavBar/NavBar.scss"],"names":[],"mappings":"AAAA,qBAME,kBAAA,CALA,YAAA,CAIA,kBAAA,CAEA,UAAA,CALA,WAAA,CAMA,oBAAA,CALA,QAAA,CACA,SCKF,CDEA,gBAEE,cAAA,CADA,WCEF,CDCE,sBAEE,qBAAA,CAUA,2BAAA,CAXA,oBAAA,CAKA,mCAAA,CACA,kBAAA,CACA,eAAA,CAJA,WAAA,CAKA,kBAAA,CANA,gBAAA,CAEA,uBAAA,CAKA,iBAAA,CACA,oBCEJ,CDCI,0DAEE,wCAAA,CAIA,sBAAA,CAHA,eAAA,CACA,kBAAA,CAGA,YAAA,CAFA,oBCEN,CDGI,iDACE,6CAAA,CAIA,2BAAA,CAHA,eAAA,CACA,kBAAA,CACA,oBCAN","file":"NavBar.css","sourcesContent":[".af-navbar-container {\n  display: flex;\n  height: 5rem;\n  margin: 0;\n  padding: 0;\n  flex-direction: row;\n  align-items: center;\n  gap: 1.6rem;\n  list-style-type: none;\n}\n\n.af-navbar-item {\n  height: 100%;\n  cursor: pointer;\n\n  &__link {\n    display: inline-block;\n    box-sizing: border-box;\n    min-width: 8.4rem;\n    height: 100%;\n    padding: 1.625rem 1.5rem;\n    font-family: var(--font-family-base);\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.4rem;\n    text-align: center;\n    text-decoration: none;\n    color: var(--color-gray-900);\n\n    &:focus,\n    &--active {\n      border-bottom: 4px solid var(--color-axa);\n      font-weight: 600;\n      line-height: 1.6rem;\n      text-decoration: none;\n      color: var(--color-axa);\n      outline: none;\n    }\n\n    &:not(:focus, --active):hover {\n      border-bottom: 2px solid var(--color-gray-300);\n      font-weight: 400;\n      line-height: 1.4rem;\n      text-decoration: none;\n      color: var(--color-gray-900);\n    }\n  }\n}\n",".af-navbar-container {\n  display: flex;\n  height: 5rem;\n  margin: 0;\n  padding: 0;\n  flex-direction: row;\n  align-items: center;\n  gap: 1.6rem;\n  list-style-type: none;\n}\n\n.af-navbar-item {\n  height: 100%;\n  cursor: pointer;\n\n  &__link {\n    display: inline-block;\n    box-sizing: border-box;\n    min-width: 8.4rem;\n    height: 100%;\n    padding: 1.625rem 1.5rem;\n    font-family: var(--font-family-base);\n    font-size: 1.125rem;\n    font-weight: 400;\n    line-height: 1.4rem;\n    text-align: center;\n    text-decoration: none;\n    color: var(--color-gray-900);\n\n    &:focus,\n    &--active {\n      border-bottom: 4px solid var(--color-axa);\n      font-weight: 600;\n      line-height: 1.6rem;\n      text-decoration: none;\n      color: var(--color-axa);\n      outline: none;\n    }\n\n    &:not(:focus, --active):hover {\n      border-bottom: 2px solid var(--color-gray-300);\n      font-weight: 400;\n      line-height: 1.4rem;\n      text-decoration: none;\n      color: var(--color-gray-900);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Layout/Header/NavBar/NavBar.scss%23sass","../../../../src/Layout/Header/NavBar/NavBar.scss"],"names":[],"mappings":"AAEA,qBAME,kBAAA,CALA,YAAA,CAIA,kBAAA,CAEA,UAAA,CCPF,WAAA,CDQE,oBAAA,CALA,QAAA,CACA,SCGF,CDGE,qCAEE,cAAA,CADA,WCAJ,CDGI,2CAEE,qBAAA,CAUA,2BAAA,CAXA,oBAAA,CAKA,mCAAA,CACA,kBAAA,CACA,eAAA,CAJA,WAAA,CAKA,kBAAA,CANA,gBAAA,CAEA,uBAAA,CAKA,iBAAA,CACA,oBCAN,CDGM,+CACE,YCDR,CDIM,oGAEE,wCAAA,CAIA,sBAAA,CAHA,eAAA,CACA,kBAAA,CAGA,YAAA,CAFA,oBCDR,CDMM,sEACE,6CAAA,CAIA,2BAAA,CAHA,eAAA,CACA,kBAAA,CACA,oBCHR","file":"NavBar.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-navbar-container {\n  display: flex;\n  height: 5rem;\n  margin: 0;\n  padding: 0;\n  flex-direction: row;\n  align-items: center;\n  gap: 1.6rem;\n  list-style-type: none;\n\n  .af-navbar-item {\n    height: 100%;\n    cursor: pointer;\n\n    &__link {\n      display: inline-block;\n      box-sizing: border-box;\n      min-width: 8.4rem;\n      height: 100%;\n      padding: 1.625rem 1.5rem;\n      font-family: var(--font-family-base);\n      font-size: 1.125rem;\n      font-weight: 400;\n      line-height: 1.4rem;\n      text-align: center;\n      text-decoration: none;\n      color: var(--color-gray-900);\n\n      & > svg {\n        display: none;\n      }\n\n      &:focus,\n      &--active {\n        border-bottom: 4px solid var(--color-axa);\n        font-weight: 600;\n        line-height: 1.6rem;\n        text-decoration: none;\n        color: var(--color-axa);\n        outline: none;\n      }\n\n      &:not(:focus, --active):hover {\n        border-bottom: 2px solid var(--color-gray-300);\n        font-weight: 400;\n        line-height: 1.4rem;\n        text-decoration: none;\n        color: var(--color-gray-900);\n      }\n    }\n  }\n}\n","@use \"../../../common/common\" as common;\n\n.af-navbar-container {\n  display: flex;\n  height: 5rem;\n  margin: 0;\n  padding: 0;\n  flex-direction: row;\n  align-items: center;\n  gap: 1.6rem;\n  list-style-type: none;\n\n  .af-navbar-item {\n    height: 100%;\n    cursor: pointer;\n\n    &__link {\n      display: inline-block;\n      box-sizing: border-box;\n      min-width: 8.4rem;\n      height: 100%;\n      padding: 1.625rem 1.5rem;\n      font-family: var(--font-family-base);\n      font-size: 1.125rem;\n      font-weight: 400;\n      line-height: 1.4rem;\n      text-align: center;\n      text-decoration: none;\n      color: var(--color-gray-900);\n\n      & > svg {\n        display: none;\n      }\n\n      &:focus,\n      &--active {\n        border-bottom: 4px solid var(--color-axa);\n        font-weight: 600;\n        line-height: 1.6rem;\n        text-decoration: none;\n        color: var(--color-axa);\n        outline: none;\n      }\n\n      &:not(:focus, --active):hover {\n        border-bottom: 2px solid var(--color-gray-300);\n        font-weight: 400;\n        line-height: 1.4rem;\n        text-decoration: none;\n        color: var(--color-gray-900);\n      }\n    }\n  }\n}\n"]}

package/dist/Layout/Header/NavBar/NavBar.scss

@@ -1,3 +1,5 @@
+@use "../../../common/common" as common;
+
 .af-navbar-container {
   display: flex;
   height: 5rem;
@@ -7,42 +9,46 @@
   align-items: center;
   gap: 1.6rem;
   list-style-type: none;
-}
-
-.af-navbar-item {
-  height: 100%;
-  cursor: pointer;
 
-  &__link {
-    display: inline-block;
-    box-sizing: border-box;
-    min-width: 8.4rem;
+  .af-navbar-item {
     height: 100%;
-    padding: 1.625rem 1.5rem;
-    font-family: var(--font-family-base);
-    font-size: 1.125rem;
-    font-weight: 400;
-    line-height: 1.4rem;
-    text-align: center;
-    text-decoration: none;
-    color: var(--color-gray-900);
+    cursor: pointer;
 
-    &:focus,
-    &--active {
-      border-bottom: 4px solid var(--color-axa);
-      font-weight: 600;
-      line-height: 1.6rem;
-      text-decoration: none;
-      color: var(--color-axa);
-      outline: none;
-    }
-
-    &:not(:focus, --active):hover {
-      border-bottom: 2px solid var(--color-gray-300);
+    &__link {
+      display: inline-block;
+      box-sizing: border-box;
+      min-width: 8.4rem;
+      height: 100%;
+      padding: 1.625rem 1.5rem;
+      font-family: var(--font-family-base);
+      font-size: 1.125rem;
       font-weight: 400;
       line-height: 1.4rem;
+      text-align: center;
       text-decoration: none;
       color: var(--color-gray-900);
+
+      & > svg {
+        display: none;
+      }
+
+      &:focus,
+      &--active {
+        border-bottom: 4px solid var(--color-axa);
+        font-weight: 600;
+        line-height: 1.6rem;
+        text-decoration: none;
+        color: var(--color-axa);
+        outline: none;
+      }
+
+      &:not(:focus, --active):hover {
+        border-bottom: 2px solid var(--color-gray-300);
+        font-weight: 400;
+        line-height: 1.4rem;
+        text-decoration: none;
+        color: var(--color-gray-900);
+      }
     }
   }
 }

package/dist/Layout/Header/PreviousLink/PreviousLink.css

@@ -1 +1 @@
-.af-header-previous-link-container{align-items:center;display:flex;gap:.25rem;padding-top:1rem}.af-header-previous-link-container .af-btn-client--header-previous-link{color:var(--color-gray-700);font-size:1rem;font-weight:400;line-height:1.25rem}.af-header-previous-link-container .af-btn-client--header-previous-link svg{fill:var(--color-gray-700)}@media only screen and (width >= 1023px){.af-header-previous-link-container{padding:1.5rem 0 0 7.5rem}.af-header-previous-link-container .af-btn-client--header-previous-link{font-size:1.125rem;line-height:1.40625rem}}
+.af-header-previous-link-container{align-items:center;display:flex;gap:.25rem;padding-top:1rem}@media (min-width:1023px){.af-header-previous-link-container{padding:1.5rem 0 0 7.5rem}}.af-header-previous-link-container .af-btn-client--header-previous-link{color:var(--color-gray-700);font-size:1rem;font-weight:400;line-height:1.25rem}.af-header-previous-link-container .af-btn-client--header-previous-link svg{fill:var(--color-gray-700)}@media (min-width:1023px){.af-header-previous-link-container .af-btn-client--header-previous-link{font-size:1.125rem;line-height:1.40625rem}}

package/dist/Layout/Header/PreviousLink/PreviousLink.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Layout/Header/PreviousLink/PreviousLink.scss%23sass","../../../../src/Layout/Header/PreviousLink/PreviousLink.scss"],"names":[],"mappings":"AAEA,mCAGE,kBAAA,CAFA,YAAA,CAGA,UAAA,CCJF,gBAGA,CDGE,wEAIE,2BAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCAJ,CDGI,4EACE,0BCDN,CDMA,yCACE,mCCHF,yBACE,CACF,wEACE,kBAAA,CDKI,sBCHJ,CACF","file":"PreviousLink.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-header-previous-link-container {\n  display: flex;\n  padding-top: 1rem;\n  align-items: center;\n  gap: 0.25rem;\n\n  .af-btn-client--header-previous-link {\n    font-size: common.rem(16);\n    font-weight: 400;\n    line-height: common.rem(20);\n    color: var(--color-gray-700);\n\n    svg {\n      fill: var(--color-gray-700);\n    }\n  }\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-previous-link-container {\n    padding: 1.5rem 0 0 7.5rem;\n\n    .af-btn-client--header-previous-link {\n      font-size: common.rem(18);\n      line-height: common.rem(22.5);\n    }\n  }\n}\n","@use \"../../../common/common\" as common;\n\n.af-header-previous-link-container {\n  display: flex;\n  padding-top: 1rem;\n  align-items: center;\n  gap: 0.25rem;\n\n  .af-btn-client--header-previous-link {\n    font-size: common.rem(16);\n    font-weight: 400;\n    line-height: common.rem(20);\n    color: var(--color-gray-700);\n\n    svg {\n      fill: var(--color-gray-700);\n    }\n  }\n}\n\n@media only screen and (width >= #{common.$breakpoint-md}) {\n  .af-header-previous-link-container {\n    padding: 1.5rem 0 0 7.5rem;\n\n    .af-btn-client--header-previous-link {\n      font-size: common.rem(18);\n      line-height: common.rem(22.5);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/Layout/Header/PreviousLink/PreviousLink.scss%23sass","../../../../src/Layout/Header/PreviousLink/PreviousLink.scss","../../../../src/common/common.scss"],"names":[],"mappings":"AAEA,mCAGE,kBAAA,CAFA,YAAA,CAGA,UAAA,CCJF,gBAGA,CC6LI,0BFhMJ,mCCME,yBACA,CACF,CDEE,wEAIE,2BAAA,CAHA,cAAA,CACA,eAAA,CACA,mBCCJ,CDEI,4EACE,0BCAN,CC+KI,0BFtLF,wEAWI,kBAAA,CACA,sBCAJ,CACF","file":"PreviousLink.css","sourcesContent":["@use \"../../../common/common\" as common;\n\n.af-header-previous-link-container {\n  display: flex;\n  padding-top: 1rem;\n  align-items: center;\n  gap: 0.25rem;\n\n  @include common.media-breakpoint-up(md) {\n    padding: 1.5rem 0 0 7.5rem;\n  }\n\n  .af-btn-client--header-previous-link {\n    font-size: common.rem(16);\n    font-weight: 400;\n    line-height: common.rem(20);\n    color: var(--color-gray-700);\n\n    svg {\n      fill: var(--color-gray-700);\n    }\n\n    @include common.media-breakpoint-up(md) {\n      font-size: common.rem(18);\n      line-height: common.rem(22.5);\n    }\n  }\n}\n","@use \"../../../common/common\" as common;\n\n.af-header-previous-link-container {\n  display: flex;\n  padding-top: 1rem;\n  align-items: center;\n  gap: 0.25rem;\n\n  @include common.media-breakpoint-up(md) {\n    padding: 1.5rem 0 0 7.5rem;\n  }\n\n  .af-btn-client--header-previous-link {\n    font-size: common.rem(16);\n    font-weight: 400;\n    line-height: common.rem(20);\n    color: var(--color-gray-700);\n\n    svg {\n      fill: var(--color-gray-700);\n    }\n\n    @include common.media-breakpoint-up(md) {\n      font-size: common.rem(18);\n      line-height: common.rem(22.5);\n    }\n  }\n}\n","@use \"sass:map\";\n@use \"sass:list\";\n\n@forward \"./mixins\";\n\n$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-600: #d4435b !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-blue-200: #eef !default;\n$color-blue-400: #cccce9 !default;\n$color-blue-800: #00008f !default; // prefer use $color-axa\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-32: #5c5c5c;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default; // prefer use $color-gray-200\n$color-focus: #36f !default; // prefer use $color-blue-3\n\n// others\n\n$default-border-radius: 4px !default;\n$radius-8: 8px !default;\n$radius-12: 12px;\n$radius-32: 32px;\n$radius-100: 100% !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n$color-orange-100: #fff8f3 !default;\n$color-orange-700: #c94e14 !default;\n\n// Grid breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n  xs: $breakpoint-xs,\n  sm: $breakpoint-sm,\n  md: $breakpoint-md,\n  lg: $breakpoint-lg,\n  xl: $breakpoint-xl,\n);\n\n// Breakpoint viewport sizes and media queries.\n\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n\n//    (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px)\n\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n// Name of the next breakpoint, or null for the last breakpoint.\n\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next(\n  $name,\n  $breakpoints: $grid-breakpoints,\n  $breakpoint-names: map.keys($breakpoints)\n) {\n  $n: list.index($breakpoint-names, $name);\n\n  @return if(\n    $n < list.length($breakpoint-names),\n    list.nth($breakpoint-names, $n + 1),\n    null\n  );\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n\n//    >> breakpoint-min(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    667px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map.get($breakpoints, $name);\n\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n\n//    >> breakpoint-max(sm, (xs: 0, sm: 667px, md: 1023px, lg: 1279px, xl: 1599px))\n//    1022.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $next: breakpoint-next($name, $breakpoints);\n\n  @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null);\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n"]}

package/dist/Layout/Header/PreviousLink/PreviousLink.scss

@@ -6,6 +6,10 @@
   align-items: center;
   gap: 0.25rem;
 
+  @include common.media-breakpoint-up(md) {
+    padding: 1.5rem 0 0 7.5rem;
+  }
+
   .af-btn-client--header-previous-link {
     font-size: common.rem(16);
     font-weight: 400;
@@ -15,14 +19,8 @@
     svg {
       fill: var(--color-gray-700);
     }
-  }
-}
-
-@media only screen and (width >= #{common.$breakpoint-md}) {
-  .af-header-previous-link-container {
-    padding: 1.5rem 0 0 7.5rem;
 
-    .af-btn-client--header-previous-link {
+    @include common.media-breakpoint-up(md) {
       font-size: common.rem(18);
       line-height: common.rem(22.5);
     }

package/dist/List/ClickItem/ClickItem.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/reboot.scss","../../../src/List/ClickItem/ClickItem.scss","../../../src/List/ClickItem/ClickItem.scss%23sass"],"names":[],"mappings":"AAAA,iBCGA,qBACA,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KAQE,qBAAA,CADA,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CACA,QAAA,CACA,gBCCF,CDEA,kBAOE,mBAAA,CADA,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QCIA,aAAA,CDCE,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFACE,CAEF,aCDF,CDIA,IAEE,kBAAA,CADA,YAAA,CAEA,aCDF,CDIA,OACE,eCDF,CDIA,IACE,iBCAF,CDIA,QAHE,qBCIF,CDDA,IAEE,eCDF,CDIA,MACE,wBCDF,CDIA,QAGE,mBAAA,CAEA,aAAA,CAHA,oBAAA,CADA,iBAAA,CAGA,eCAF,CDIA,GACE,kBCDF,CDIA,OACE,eCDF,CDIA,sCAME,mBAAA,CACA,iBAAA,CACA,mBAAA,CAHA,QCEF,CDIA,aAEE,gBCDF,CDIA,cAEE,mBCDF,CDIA,OACE,gBCDF,CDIA,gDAIE,yBAAA,CAAA,iBCDF,CDIA,aACE,kBAAA,CACA,yCCDF,CDIA,4GAIE,cCDF,CDIA,wHAKE,iBAAA,CADA,SCAF,CDIA,uCAEE,qBAAA,CACA,SCDF,CDIA,+EAIE,0BAAA,CAAA,kBCDF,CDIA,SACE,aAAA,CACA,eCDF,CDIA,SAIE,QAAA,CAFA,QAAA,CADA,WAAA,CAEA,SCAF,CDIA,OASE,aAAA,CARA,aAAA,CAKA,gBAAA,CACA,mBAAA,CAHA,mBAAA,CADA,cAAA,CAEA,SAAA,CAGA,kBAAA,CANA,UCMF,CDIA,SACE,sBCDF,CDIA,kFAEE,WCDF,CDIA,cAEE,uBAAA,CAAA,eAAA,CADA,mBCAF,CDIA,yCACE,uBAAA,CAAA,eCDF,CDIA,6BAEE,yBAAA,CAAA,iBAAA,CADA,YCAF,CDIA,OACE,oBCDF,CDIA,QAEE,cAAA,CADA,iBCAF,CDIA,SACE,YCDF,CDIA,SACE,sBCDF,CCvUA,eAME,kBAAA,CAEA,eAAA,CAJA,WAAA,CACA,0CAAA,CAIA,cAAA,CARA,YAAA,CAMA,SAAA,CAJA,YAAA,CAOA,wBAAA,CAAA,gBAAA,CARA,UDkVF,CCxUE,wEAGE,YDwUJ,CCrUE,qBACE,oBDuUJ,CCpUE,6BACE,mCDsUJ,CCnUE,wBAEE,kBAAA,CADA,YAAA,CAEA,UDqUJ,CClUE,oDAGE,aAAA,CADA,YAAA,CAEA,qBDmUJ,CChUE,qEAGE,kBAAA,CACA,kBDgUJ,CC7TE,yEAGE,QD6TJ,CC1TE,sBAEE,2BAAA,CADA,eD6TJ,CCzTE,sBAEE,2BAAA,CADA,eD4TJ,CCnTE,mDAHE,2BAAA,CADA,eDiUJ,CC7TE,0BACE,iBAAA,CAEA,kBD0TJ,CCtTE,uBACE,gBDwTJ,CCrTE,4CACE,cAAA,CACA,mBDuTJ,CCpTE,4CACE,eDsTJ,CCnTE,uCACE,mBDqTJ,CClTM,kIAEE,0BDmTR,CChTM,2PAIE,2BD+SR,CCzSI,mDACE,gCD2SN,CCxSI,oDACE,sCD0SN,CCrSA,wBAEI,6BACE,WAAA,CACA,mCDuSJ,CCpSE,qEAGE,cAAA,CACA,mBDoSJ,CCjSE,4CACE,iBAAA,CACA,kBDmSJ,CC7RI,gGACE,eDkSN,CC/RQ,2SAIE,sBD8RV,CCzRI,oDACE,eD2RN,CCxRQ,+SAIE,yBDuRV,CACF","file":"ClickItem.css","sourcesContent":["*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n  line-height: 1.15;\n  text-size-adjust: 100%;\n  -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n  display: block;\n}\n\nbody {\n  margin: 0;\n  font-family: \"Source Sans Pro\", Arial, sans-serif;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: left;\n  color: #333;\n  background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n  outline: 0 !important;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n  border-bottom: 0;\n  text-decoration: underline;\n  text-decoration: underline dotted;\n  text-decoration-skip-ink: none;\n  cursor: help;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\ndl,\nol,\nul {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  position: relative;\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  text-decoration: none;\n  color: #00008f;\n  background-color: transparent;\n}\n\na:hover {\n  text-decoration: underline;\n  color: #000043;\n}\n\na:not([href], [tabindex]) {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n  text-decoration: none;\n  color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n  outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family:\n    SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\",\n    monospace;\n  font-size: 1em;\n}\n\npre {\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg {\n  border-style: none;\n  vertical-align: middle;\n}\n\nsvg {\n  vertical-align: middle;\n  overflow: hidden;\n}\n\ntable {\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  caption-side: bottom;\n  text-align: left;\n  color: #6c757d;\n}\n\nth {\n  text-align: inherit;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\ninput {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nselect {\n  word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n  appearance: button;\n}\n\nbutton:focus {\n  outline: 1px dotted;\n  outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n  cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n  appearance: listbox;\n}\n\ntextarea {\n  overflow: auto;\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n\nlegend {\n  display: block;\n  width: 100%;\n  max-width: 100%;\n  margin-bottom: 0.5rem;\n  padding: 0;\n  font-size: 1.5rem;\n  line-height: inherit;\n  white-space: normal;\n  color: inherit;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  outline-offset: -2px;\n  appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n  appearance: none;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\ntemplate {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n","@use \"../../common/reboot\";\n@use \"../../common/common\" as common;\n\n.af-click-item {\n  display: flex;\n  width: 100%;\n  padding: 1rem;\n  border: none;\n  border-radius: var(--default-border-radius);\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  cursor: pointer;\n  user-select: none;\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    border: 2px solid var(--color-focus);\n  }\n\n  &__content {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n  }\n\n  &__icon svg,\n  &__action svg {\n    width: 1.5rem;\n    height: 1.5rem;\n    fill: var(--color-axa);\n  }\n\n  &__title,\n  &__subtitle,\n  &__label {\n    font-size: 1.125rem;\n    line-height: 1.4rem;\n  }\n\n  &__title,\n  &__subtitle,\n  &__secondary {\n    margin: 0;\n  }\n\n  &__label {\n    text-align: left;\n    color: var(--color-gray-900);\n  }\n\n  &__title {\n    font-weight: 600;\n    color: var(--color-gray-900);\n  }\n\n  &__subtitle {\n    font-weight: 400;\n    color: var(--color-gray-700);\n  }\n\n  &__secondary {\n    font-size: 0.875rem;\n    font-weight: 400;\n    line-height: 1.1rem;\n    color: var(--color-gray-700);\n  }\n\n  &__action {\n    margin-left: auto;\n  }\n\n  &--small &__label {\n    font-size: 1rem;\n    line-height: 1.25rem;\n  }\n\n  &--large &__label {\n    font-weight: 600;\n  }\n\n  &.af-click-item--disabled {\n    pointer-events: none;\n\n    .af-click-item {\n      &__action svg,\n      &__icon svg {\n        fill: var(--color-gray-500);\n      }\n\n      &__label,\n      &__title,\n      &__subtitle,\n      &__secondary {\n        color: var(--color-gray-500);\n      }\n    }\n  }\n\n  &:not(.af-click-item--disabled) {\n    &:hover {\n      box-shadow: 0 4px 8px 0 hsla(230deg, 60%, 16%, 8%);\n    }\n\n    &:active {\n      box-shadow: 0 2px 8px 0 hsla(0deg, 0%, 0%, 15%) inset;\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-click-item {\n    &:focus-visible {\n      border: none;\n      border: 1px solid var(--color-focus);\n    }\n\n    &__label,\n    &__title,\n    &__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n\n    &--small &__label {\n      font-size: 0.875rem;\n      line-height: 1.1rem;\n    }\n\n    &:not(.af-click-item--disabled) {\n      box-shadow: none;\n\n      &:hover {\n        box-shadow: none;\n\n        .af-click-item {\n          &__label,\n          &__title,\n          &__subtitle,\n          &__secondary {\n            color: var(--color-axa);\n          }\n        }\n      }\n\n      &:active {\n        box-shadow: none;\n\n        .af-click-item {\n          &__label,\n          &__title,\n          &__subtitle,\n          &__secondary {\n            color: var(--color-blue-1);\n          }\n        }\n      }\n    }\n  }\n}\n","@use \"../../common/reboot\";\n@use \"../../common/common\" as common;\n\n.af-click-item {\n  display: flex;\n  width: 100%;\n  padding: 1rem;\n  border: none;\n  border-radius: var(--default-border-radius);\n  align-items: center;\n  gap: 0.5rem;\n  background: none;\n  cursor: pointer;\n  user-select: none;\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:focus-visible {\n    border: 2px solid var(--color-focus);\n  }\n\n  &__content {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n  }\n\n  &__icon svg,\n  &__action svg {\n    width: 1.5rem;\n    height: 1.5rem;\n    fill: var(--color-axa);\n  }\n\n  &__title,\n  &__subtitle,\n  &__label {\n    font-size: 1.125rem;\n    line-height: 1.4rem;\n  }\n\n  &__title,\n  &__subtitle,\n  &__secondary {\n    margin: 0;\n  }\n\n  &__label {\n    text-align: left;\n    color: var(--color-gray-900);\n  }\n\n  &__title {\n    font-weight: 600;\n    color: var(--color-gray-900);\n  }\n\n  &__subtitle {\n    font-weight: 400;\n    color: var(--color-gray-700);\n  }\n\n  &__secondary {\n    font-size: 0.875rem;\n    font-weight: 400;\n    line-height: 1.1rem;\n    color: var(--color-gray-700);\n  }\n\n  &__action {\n    margin-left: auto;\n  }\n\n  &--small &__label {\n    font-size: 1rem;\n    line-height: 1.25rem;\n  }\n\n  &--large &__label {\n    font-weight: 600;\n  }\n\n  &.af-click-item--disabled {\n    pointer-events: none;\n\n    .af-click-item {\n      &__action svg,\n      &__icon svg {\n        fill: var(--color-gray-500);\n      }\n\n      &__label,\n      &__title,\n      &__subtitle,\n      &__secondary {\n        color: var(--color-gray-500);\n      }\n    }\n  }\n\n  &:not(.af-click-item--disabled) {\n    &:hover {\n      box-shadow: 0 4px 8px 0 hsla(230deg, 60%, 16%, 8%);\n    }\n\n    &:active {\n      box-shadow: 0 2px 8px 0 hsla(0deg, 0%, 0%, 15%) inset;\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-click-item {\n    &:focus-visible {\n      border: none;\n      border: 1px solid var(--color-focus);\n    }\n\n    &__label,\n    &__title,\n    &__subtitle {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n\n    &--small &__label {\n      font-size: 0.875rem;\n      line-height: 1.1rem;\n    }\n\n    &:not(.af-click-item--disabled) {\n      box-shadow: none;\n\n      &:hover {\n        box-shadow: none;\n\n        .af-click-item {\n          &__label,\n          &__title,\n          &__subtitle,\n          &__secondary {\n            color: var(--color-axa);\n          }\n        }\n      }\n\n      &:active {\n        box-shadow: none;\n\n        .af-click-item {\n          &__label,\n          &__title,\n          &__subtitle,\n          &__secondary {\n            color: var(--color-blue-1);\n          }\n        }\n      }\n    }\n  }\n}\n"]}

package/dist/List/ContentItemDuo/ContentItemDuo.css

@@ -1 +1 @@
-.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:.5rem;width:100%}.af-content-item-duo__icon{grid-area:icon;margin-right:.75rem;margin-top:.125rem}.af-content-item-duo__icon svg{height:1.5rem;width:1.5rem}.af-content-item-duo__icon--done svg{fill:var(--color-axa)}.af-content-item-duo__icon--close svg{fill:var(--color-red-700)}.af-content-item-duo__label,.af-content-item-duo__value{font-family:var(--font-family-base);font-size:1rem;line-height:1.25rem;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:var(--color-gray-700);font-weight:400;grid-area:label;margin-right:1rem}.af-content-item-duo__value{color:var(--color-gray-900);font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large{row-gap:.75rem}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:.25rem}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:1.125rem;line-height:1.4rem}.af-content-item-duo--large .af-content-item-duo__label{margin-right:2.5rem}.af-content-item-duo--large .af-content-item-duo__value{text-align:start}.af-content-item-duo--large .af-content-item-duo__button{justify-self:start}.af-content-item-duo--vertical{gap:.375rem .75rem;grid-template:"icon label button" ". value value";grid-template-columns:auto 1fr auto}.af-content-item-duo--vertical .af-content-item-duo__icon{margin-right:0;margin-top:.125rem}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:1.125rem;line-height:1.4rem;margin-right:0;text-align:start}.af-content-item-duo--vertical .af-content-item-duo__value{margin:0}.af-content-item-duo--vertical .af-content-item-duo__button{justify-self:end;margin-left:0}@media (width <= 667px){.af-content-item-duo--large{row-gap:.5rem}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:.125rem}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:1rem;line-height:1.25rem}.af-content-item-duo--large .af-content-item-duo__label{margin-right:1rem}.af-content-item-duo--large .af-content-item-duo__value{text-align:end}.af-content-item-duo--large .af-content-item-duo__button{justify-self:end;margin-left:0}.af-content-item-duo--vertical{row-gap:.375rem}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:1rem;line-height:1.25rem;text-align:start}}
+.af-content-item-duo{display:grid;grid-template:"icon label value" "icon label button";grid-template-columns:auto 1fr 1fr;row-gap:.5rem;width:100%}.af-content-item-duo__icon{grid-area:icon;margin-right:.75rem;margin-top:.125rem}.af-content-item-duo__icon svg{height:1.5rem;width:1.5rem}.af-content-item-duo__icon--done svg{fill:var(--color-axa)}.af-content-item-duo__icon--close svg{fill:var(--color-red-700)}.af-content-item-duo__label,.af-content-item-duo__value{font-family:var(--font-family-base);font-size:1rem;line-height:1.25rem;margin:0;overflow-wrap:break-word}.af-content-item-duo__label{color:var(--color-gray-700);font-weight:400;grid-area:label;margin-right:1rem}.af-content-item-duo__value{color:var(--color-gray-900);font-weight:600;grid-area:value;text-align:end}.af-content-item-duo__button{grid-area:button;justify-self:end}.af-content-item-duo--large{row-gap:.75rem}.af-content-item-duo--large :not(:has(.af-content-item-duo__button)){row-gap:0}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:.25rem}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:1.125rem;line-height:1.4rem}.af-content-item-duo--large .af-content-item-duo__label{margin-right:2.5rem}.af-content-item-duo--large .af-content-item-duo__value{text-align:start}.af-content-item-duo--large .af-content-item-duo__button{justify-self:start}.af-content-item-duo--vertical{gap:.375rem .75rem;grid-template:"icon label button" ". value value";grid-template-columns:auto 1fr auto}.af-content-item-duo--vertical .af-content-item-duo__icon{margin-right:0;margin-top:.125rem}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:1.125rem;line-height:1.4rem;margin-right:0;text-align:start}.af-content-item-duo--vertical .af-content-item-duo__value{margin:0}.af-content-item-duo--vertical .af-content-item-duo__button{justify-self:end;margin-left:0}@media (width <= 667px){.af-content-item-duo--large{row-gap:.5rem}.af-content-item-duo--large .af-content-item-duo__icon{margin-top:.125rem}.af-content-item-duo--large .af-content-item-duo__label,.af-content-item-duo--large .af-content-item-duo__value{font-size:1rem;line-height:1.25rem}.af-content-item-duo--large .af-content-item-duo__label{margin-right:1rem}.af-content-item-duo--large .af-content-item-duo__value{text-align:end}.af-content-item-duo--large .af-content-item-duo__button{justify-self:end;margin-left:0}.af-content-item-duo--vertical{row-gap:.375rem}.af-content-item-duo--vertical .af-content-item-duo__label,.af-content-item-duo--vertical .af-content-item-duo__value{font-size:1rem;line-height:1.25rem;text-align:start}}@media (width >= 1279px){.af-content-item-duo__label{max-width:14.375rem}}

package/dist/List/ContentItemDuo/ContentItemDuo.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuo.scss%23sass","../../../src/List/ContentItemDuo/ContentItemDuo.scss"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,aAAA,CCPF,UAIA,CDKE,2BAGE,cAAA,CADA,mBAAA,CADA,kBCDJ,CDKI,+BAEE,aAAA,CADA,YCFN,CDOM,qCACE,qBCLR,CDUM,sCACE,yBCRR,CDaE,wDAGE,mCAAA,CACA,cAAA,CACA,mBAAA,CAHA,QAAA,CAIA,wBCZJ,CDeE,4BAIE,2BAAA,CADA,eAAA,CADA,eAAA,CADA,iBCVJ,CDgBE,4BAIE,2BAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCbJ,CDiBE,6BACE,gBAAA,CACA,gBCfJ,CDkBE,4BACE,cChBJ,CDmBM,uDACE,iBCjBR,CDoBM,gHAEE,kBAAA,CACA,kBCnBR,CDsBM,wDACE,mBCpBR,CDuBM,wDACE,gBCrBR,CDwBM,yDACE,kBCtBR,CD2BE,+BAKE,kBAAA,CAJA,iDAAA,CAGA,mCC1BJ,CD8BM,0DAEE,cAAA,CADA,kBC3BR,CD+BM,sHAGE,kBAAA,CACA,kBAAA,CAFA,cAAA,CAGA,gBC9BR,CDiCM,2DACE,QC/BR,CDkCM,4DAEE,gBAAA,CADA,aC/BR,CDsCA,wBAEI,4BACE,aCpCJ,CDuCM,uDACE,kBCrCR,CDwCM,gHAEE,cAAA,CACA,mBCvCR,CD0CM,wDACE,iBCxCR,CD2CM,wDACE,cCzCR,CD4CM,yDAEE,gBAAA,CADA,aCzCR,CD+CE,+BACE,eC7CJ,CDgDM,sHAEE,cAAA,CACA,mBAAA,CACA,gBC/CR,CACF","file":"ContentItemDuo.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-content-item-duo {\n  display: grid;\n  width: 100%;\n  grid-template:\n    \"icon label value\"\n    \"icon label button\";\n  grid-template-columns: auto 1fr 1fr;\n  row-gap: 0.5rem;\n\n  &__icon {\n    margin-top: 0.125rem;\n    margin-right: 0.75rem;\n    grid-area: icon;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &--done {\n      svg {\n        fill: var(--color-axa);\n      }\n    }\n\n    &--close {\n      svg {\n        fill: var(--color-red-700);\n      }\n    }\n  }\n\n  &__label,\n  &__value {\n    margin: 0;\n    font-family: var(--font-family-base);\n    font-size: 1rem;\n    line-height: 1.25rem;\n    overflow-wrap: break-word;\n  }\n\n  &__label {\n    margin-right: 1rem;\n    grid-area: label;\n    font-weight: 400;\n    color: var(--color-gray-700);\n  }\n\n  &__value {\n    grid-area: value;\n    font-weight: 600;\n    text-align: end;\n    color: var(--color-gray-900);\n  }\n\n  &__button {\n    grid-area: button;\n    justify-self: end;\n  }\n\n  &--large {\n    row-gap: 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.25rem;\n      }\n\n      &__label,\n      &__value {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      &__label {\n        margin-right: 2.5rem;\n      }\n\n      &__value {\n        text-align: start;\n      }\n\n      &__button {\n        justify-self: start;\n      }\n    }\n  }\n\n  &--vertical {\n    grid-template:\n      \"icon label button\"\n      \". value value\";\n    grid-template-columns: auto 1fr auto;\n    gap: 0.375rem 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.125rem;\n        margin-right: 0;\n      }\n\n      &__label,\n      &__value {\n        margin-right: 0;\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n        text-align: start;\n      }\n\n      &__value {\n        margin: 0;\n      }\n\n      &__button {\n        margin-left: 0;\n        justify-self: end;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-duo {\n    &--large {\n      row-gap: 0.5rem;\n\n      .af-content-item-duo {\n        &__icon {\n          margin-top: 0.125rem;\n        }\n\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__label {\n          margin-right: 1rem;\n        }\n\n        &__value {\n          text-align: end;\n        }\n\n        &__button {\n          margin-left: 0;\n          justify-self: end;\n        }\n      }\n    }\n\n    &--vertical {\n      row-gap: 0.375rem;\n\n      .af-content-item-duo {\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          text-align: start;\n        }\n      }\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-content-item-duo {\n  display: grid;\n  width: 100%;\n  grid-template:\n    \"icon label value\"\n    \"icon label button\";\n  grid-template-columns: auto 1fr 1fr;\n  row-gap: 0.5rem;\n\n  &__icon {\n    margin-top: 0.125rem;\n    margin-right: 0.75rem;\n    grid-area: icon;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &--done {\n      svg {\n        fill: var(--color-axa);\n      }\n    }\n\n    &--close {\n      svg {\n        fill: var(--color-red-700);\n      }\n    }\n  }\n\n  &__label,\n  &__value {\n    margin: 0;\n    font-family: var(--font-family-base);\n    font-size: 1rem;\n    line-height: 1.25rem;\n    overflow-wrap: break-word;\n  }\n\n  &__label {\n    margin-right: 1rem;\n    grid-area: label;\n    font-weight: 400;\n    color: var(--color-gray-700);\n  }\n\n  &__value {\n    grid-area: value;\n    font-weight: 600;\n    text-align: end;\n    color: var(--color-gray-900);\n  }\n\n  &__button {\n    grid-area: button;\n    justify-self: end;\n  }\n\n  &--large {\n    row-gap: 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.25rem;\n      }\n\n      &__label,\n      &__value {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      &__label {\n        margin-right: 2.5rem;\n      }\n\n      &__value {\n        text-align: start;\n      }\n\n      &__button {\n        justify-self: start;\n      }\n    }\n  }\n\n  &--vertical {\n    grid-template:\n      \"icon label button\"\n      \". value value\";\n    grid-template-columns: auto 1fr auto;\n    gap: 0.375rem 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.125rem;\n        margin-right: 0;\n      }\n\n      &__label,\n      &__value {\n        margin-right: 0;\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n        text-align: start;\n      }\n\n      &__value {\n        margin: 0;\n      }\n\n      &__button {\n        margin-left: 0;\n        justify-self: end;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-duo {\n    &--large {\n      row-gap: 0.5rem;\n\n      .af-content-item-duo {\n        &__icon {\n          margin-top: 0.125rem;\n        }\n\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__label {\n          margin-right: 1rem;\n        }\n\n        &__value {\n          text-align: end;\n        }\n\n        &__button {\n          margin-left: 0;\n          justify-self: end;\n        }\n      }\n    }\n\n    &--vertical {\n      row-gap: 0.375rem;\n\n      .af-content-item-duo {\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          text-align: start;\n        }\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/List/ContentItemDuo/ContentItemDuo.scss%23sass","../../../src/List/ContentItemDuo/ContentItemDuo.scss"],"names":[],"mappings":"AAEA,qBACE,YAAA,CAEA,oDAAA,CAGA,kCAAA,CACA,aAAA,CCPF,UAIA,CDKE,2BAGE,cAAA,CADA,mBAAA,CADA,kBCDJ,CDKI,+BAEE,aAAA,CADA,YCFN,CDOM,qCACE,qBCLR,CDUM,sCACE,yBCRR,CDaE,wDAGE,mCAAA,CACA,cAAA,CACA,mBAAA,CAHA,QAAA,CAIA,wBCZJ,CDeE,4BAIE,2BAAA,CADA,eAAA,CADA,eAAA,CADA,iBCVJ,CDgBE,4BAIE,2BAAA,CAFA,eAAA,CADA,eAAA,CAEA,cCbJ,CDiBE,6BACE,gBAAA,CACA,gBCfJ,CDkBE,4BAKE,cCpBJ,CDgBI,qEACE,SCdN,CDoBM,uDACE,iBClBR,CDqBM,gHAEE,kBAAA,CACA,kBCpBR,CDuBM,wDACE,mBCrBR,CDwBM,wDACE,gBCtBR,CDyBM,yDACE,kBCvBR,CD4BE,+BAKE,kBAAA,CAJA,iDACE,CAEF,mCC3BJ,CD+BM,0DAEE,cAAA,CADA,kBC5BR,CDgCM,sHAGE,kBAAA,CACA,kBAAA,CAFA,cAAA,CAGA,gBC/BR,CDkCM,2DACE,QChCR,CDmCM,4DAEE,gBAAA,CADA,aChCR,CDuCA,wBAEI,4BCrCF,aACA,CDwCM,uDACE,kBCtCR,CDyCM,gHAEE,cAAA,CACA,mBCxCR,CD2CM,wDACE,iBCzCR,CD4CM,wDACE,cC1CR,CD6CM,yDAEE,gBAAA,CADA,aC1CR,CDgDE,+BACE,eC9CJ,CDiDM,sHAEE,cAAA,CACA,mBAAA,CACA,gBChDR,CACF,CDsDA,yBACE,4BACE,mBCpDF,CACF","file":"ContentItemDuo.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-content-item-duo {\n  display: grid;\n  width: 100%;\n  grid-template:\n    \"icon label value\"\n    \"icon label button\";\n  grid-template-columns: auto 1fr 1fr;\n  row-gap: 0.5rem;\n\n  &__icon {\n    margin-top: 0.125rem;\n    margin-right: 0.75rem;\n    grid-area: icon;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &--done {\n      svg {\n        fill: var(--color-axa);\n      }\n    }\n\n    &--close {\n      svg {\n        fill: var(--color-red-700);\n      }\n    }\n  }\n\n  &__label,\n  &__value {\n    margin: 0;\n    font-family: var(--font-family-base);\n    font-size: 1rem;\n    line-height: 1.25rem;\n    overflow-wrap: break-word;\n  }\n\n  &__label {\n    margin-right: 1rem;\n    grid-area: label;\n    font-weight: 400;\n    color: var(--color-gray-700);\n  }\n\n  &__value {\n    grid-area: value;\n    font-weight: 600;\n    text-align: end;\n    color: var(--color-gray-900);\n  }\n\n  &__button {\n    grid-area: button;\n    justify-self: end;\n  }\n\n  &--large {\n    :not(:has(.af-content-item-duo__button)) {\n      row-gap: 0;\n    }\n\n    row-gap: 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.25rem;\n      }\n\n      &__label,\n      &__value {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      &__label {\n        margin-right: 2.5rem;\n      }\n\n      &__value {\n        text-align: start;\n      }\n\n      &__button {\n        justify-self: start;\n      }\n    }\n  }\n\n  &--vertical {\n    grid-template:\n      \"icon label button\"\n      \". value value\";\n    grid-template-columns: auto 1fr auto;\n    gap: 0.375rem 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.125rem;\n        margin-right: 0;\n      }\n\n      &__label,\n      &__value {\n        margin-right: 0;\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n        text-align: start;\n      }\n\n      &__value {\n        margin: 0;\n      }\n\n      &__button {\n        margin-left: 0;\n        justify-self: end;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-duo {\n    &--large {\n      row-gap: 0.5rem;\n\n      .af-content-item-duo {\n        &__icon {\n          margin-top: 0.125rem;\n        }\n\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__label {\n          margin-right: 1rem;\n        }\n\n        &__value {\n          text-align: end;\n        }\n\n        &__button {\n          margin-left: 0;\n          justify-self: end;\n        }\n      }\n    }\n\n    &--vertical {\n      row-gap: 0.375rem;\n\n      .af-content-item-duo {\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          text-align: start;\n        }\n      }\n    }\n  }\n}\n\n@media (width >= #{common.$breakpoint-lg}) {\n  .af-content-item-duo__label {\n    max-width: common.rem(230);\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-content-item-duo {\n  display: grid;\n  width: 100%;\n  grid-template:\n    \"icon label value\"\n    \"icon label button\";\n  grid-template-columns: auto 1fr 1fr;\n  row-gap: 0.5rem;\n\n  &__icon {\n    margin-top: 0.125rem;\n    margin-right: 0.75rem;\n    grid-area: icon;\n\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n    }\n\n    &--done {\n      svg {\n        fill: var(--color-axa);\n      }\n    }\n\n    &--close {\n      svg {\n        fill: var(--color-red-700);\n      }\n    }\n  }\n\n  &__label,\n  &__value {\n    margin: 0;\n    font-family: var(--font-family-base);\n    font-size: 1rem;\n    line-height: 1.25rem;\n    overflow-wrap: break-word;\n  }\n\n  &__label {\n    margin-right: 1rem;\n    grid-area: label;\n    font-weight: 400;\n    color: var(--color-gray-700);\n  }\n\n  &__value {\n    grid-area: value;\n    font-weight: 600;\n    text-align: end;\n    color: var(--color-gray-900);\n  }\n\n  &__button {\n    grid-area: button;\n    justify-self: end;\n  }\n\n  &--large {\n    :not(:has(.af-content-item-duo__button)) {\n      row-gap: 0;\n    }\n\n    row-gap: 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.25rem;\n      }\n\n      &__label,\n      &__value {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      &__label {\n        margin-right: 2.5rem;\n      }\n\n      &__value {\n        text-align: start;\n      }\n\n      &__button {\n        justify-self: start;\n      }\n    }\n  }\n\n  &--vertical {\n    grid-template:\n      \"icon label button\"\n      \". value value\";\n    grid-template-columns: auto 1fr auto;\n    gap: 0.375rem 0.75rem;\n\n    .af-content-item-duo {\n      &__icon {\n        margin-top: 0.125rem;\n        margin-right: 0;\n      }\n\n      &__label,\n      &__value {\n        margin-right: 0;\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n        text-align: start;\n      }\n\n      &__value {\n        margin: 0;\n      }\n\n      &__button {\n        margin-left: 0;\n        justify-self: end;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-duo {\n    &--large {\n      row-gap: 0.5rem;\n\n      .af-content-item-duo {\n        &__icon {\n          margin-top: 0.125rem;\n        }\n\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        &__label {\n          margin-right: 1rem;\n        }\n\n        &__value {\n          text-align: end;\n        }\n\n        &__button {\n          margin-left: 0;\n          justify-self: end;\n        }\n      }\n    }\n\n    &--vertical {\n      row-gap: 0.375rem;\n\n      .af-content-item-duo {\n        &__label,\n        &__value {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          text-align: start;\n        }\n      }\n    }\n  }\n}\n\n@media (width >= #{common.$breakpoint-lg}) {\n  .af-content-item-duo__label {\n    max-width: common.rem(230);\n  }\n}\n"]}

package/dist/List/ContentItemDuo/ContentItemDuo.scss

@@ -61,6 +61,10 @@
   }
 
   &--large {
+    :not(:has(.af-content-item-duo__button)) {
+      row-gap: 0;
+    }
+
     row-gap: 0.75rem;
 
     .af-content-item-duo {
@@ -166,3 +170,9 @@
     }
   }
 }
+
+@media (width >= #{common.$breakpoint-lg}) {
+  .af-content-item-duo__label {
+    max-width: common.rem(230);
+  }
+}

package/dist/List/ContentItemMono/ContentItemMono.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ContentItemMono/ContentItemMono.scss%23sass","../../../src/List/ContentItemMono/ContentItemMono.scss"],"names":[],"mappings":"AAEA,sBACE,YAAA,CCDF,UACA,CDGE,6BAGE,iCAAA,CADA,qBAAA,CADA,YCCJ,CDKI,0CAEE,aAAA,CADA,YAAA,CAEA,qBCHN,CDMI,8CAEE,kBAAA,CADA,YCHN,CDSI,6DACE,sCCPN,CDUI,0EACE,0BCRN,CDYE,sCACE,YAAA,CACA,WCVJ,CDYI,wCACE,QCVN,CDaI,uEACE,2BCXN,CDcI,4EACE,mCAAA,CACA,eCZN,CDiBI,iGACE,sCAAA,CACA,gBAAA,CACA,eAAA,CACA,oBCfN,CDkBI,sGAGE,2BAAA,CAFA,kBAAA,CACA,kBCfN,CDsBM,gGACE,mCAAA,CACA,kBAAA,CACA,eAAA,CACA,kBCpBR,CDuBM,qGACE,kBAAA,CACA,kBCrBR,CDwBM,oGAKE,2BAAA,CAJA,mCAAA,CACA,cAAA,CACA,eAAA,CACA,mBCrBR,CD0BQ,qJAGE,2BAAA,CAFA,cAAA,CACA,mBCvBV,CD8BM,kIACE,cAAA,CACA,mBC5BR,CDyCM,uQACE,cAAA,CACA,eAAA,CACA,mBCvCR,CD6CA,wBAGM,iGACE,iBAAA,CACA,mBC5CN,CD4DM,2SACE,cAAA,CACA,mBClDR,CDqDM,oGACE,iBAAA,CACA,kBCnDR,CDuDQ,qJACE,iBAAA,CACA,kBCrDV,CD2DM,kIACE,iBAAA,CACA,kBCzDR,CDsEM,uQACE,iBAAA,CACA,eAAA,CACA,kBCpER,CACF","file":"ContentItemMono.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-content-item-mono {\n  display: flex;\n  gap: 0.75rem;\n\n  &__stick {\n    width: 0.25rem;\n    border-radius: 0.125rem;\n    background-color: var(--color-axa);\n  }\n\n  &__left-container {\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n      fill: var(--color-axa);\n    }\n\n    &--center {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  &--disabled {\n    .af-content-item-mono__stick {\n      background-color: var(--color-gray-900);\n    }\n\n    .af-content-item-mono__left-container svg {\n      fill: var(--color-gray-900);\n    }\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.125rem;\n\n    p {\n      margin: 0;\n    }\n\n    .af-content-item-mono__main-text {\n      color: var(--color-gray-900);\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-family: var(--font-family-base);\n      font-weight: 400;\n    }\n  }\n\n  &--xl .af-content-item-mono__text-container {\n    .af-content-item-mono__main-text {\n      font-family: var(--font-family-publico);\n      font-size: 1.5rem;\n      font-weight: 700;\n      line-height: 1.875rem;\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-size: 1.125rem;\n      line-height: 1.4rem;\n      color: var(--color-gray-700);\n    }\n  }\n\n  &--m {\n    .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-family: var(--font-family-base);\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__tertiary-text {\n        font-family: var(--font-family-base);\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: var(--color-gray-700);\n      }\n\n      &:not(:has(.af-content-item-mono__tertiary-text)) {\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          color: var(--color-gray-700);\n        }\n      }\n    }\n\n    &:has(.af-content-item-mono__stick) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &:not(\n        :has(\n            .af-content-item-mono__text-container\n              .af-content-item-mono__secondary-text\n          )\n      ):has(\n        .af-content-item-mono__text-container\n          .af-content-item-mono__tertiary-text\n      ) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-mono {\n    &--xl .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &--m {\n      .af-content-item-mono__text-container {\n        .af-content-item-mono__main-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__tertiary-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n\n        &:not(:has(.af-content-item-mono__tertiary-text)) {\n          .af-content-item-mono__secondary-text {\n            font-size: 0.875rem;\n            line-height: 1.1rem;\n          }\n        }\n      }\n\n      &:has(.af-content-item-mono__stick) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n      }\n\n      &:not(\n          :has(\n              .af-content-item-mono__text-container\n                .af-content-item-mono__secondary-text\n            )\n        ):has(\n          .af-content-item-mono__text-container\n            .af-content-item-mono__tertiary-text\n        ) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          font-weight: 400;\n          line-height: 1.1rem;\n        }\n      }\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-content-item-mono {\n  display: flex;\n  gap: 0.75rem;\n\n  &__stick {\n    width: 0.25rem;\n    border-radius: 0.125rem;\n    background-color: var(--color-axa);\n  }\n\n  &__left-container {\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n      fill: var(--color-axa);\n    }\n\n    &--center {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  &--disabled {\n    .af-content-item-mono__stick {\n      background-color: var(--color-gray-900);\n    }\n\n    .af-content-item-mono__left-container svg {\n      fill: var(--color-gray-900);\n    }\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.125rem;\n\n    p {\n      margin: 0;\n    }\n\n    .af-content-item-mono__main-text {\n      color: var(--color-gray-900);\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-family: var(--font-family-base);\n      font-weight: 400;\n    }\n  }\n\n  &--xl .af-content-item-mono__text-container {\n    .af-content-item-mono__main-text {\n      font-family: var(--font-family-publico);\n      font-size: 1.5rem;\n      font-weight: 700;\n      line-height: 1.875rem;\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-size: 1.125rem;\n      line-height: 1.4rem;\n      color: var(--color-gray-700);\n    }\n  }\n\n  &--m {\n    .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-family: var(--font-family-base);\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__tertiary-text {\n        font-family: var(--font-family-base);\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: var(--color-gray-700);\n      }\n\n      &:not(:has(.af-content-item-mono__tertiary-text)) {\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          color: var(--color-gray-700);\n        }\n      }\n    }\n\n    &:has(.af-content-item-mono__stick) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &:not(\n        :has(\n            .af-content-item-mono__text-container\n              .af-content-item-mono__secondary-text\n          )\n      ):has(\n        .af-content-item-mono__text-container\n          .af-content-item-mono__tertiary-text\n      ) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-mono {\n    &--xl .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &--m {\n      .af-content-item-mono__text-container {\n        .af-content-item-mono__main-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__tertiary-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n\n        &:not(:has(.af-content-item-mono__tertiary-text)) {\n          .af-content-item-mono__secondary-text {\n            font-size: 0.875rem;\n            line-height: 1.1rem;\n          }\n        }\n      }\n\n      &:has(.af-content-item-mono__stick) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n      }\n\n      &:not(\n          :has(\n              .af-content-item-mono__text-container\n                .af-content-item-mono__secondary-text\n            )\n        ):has(\n          .af-content-item-mono__text-container\n            .af-content-item-mono__tertiary-text\n        ) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          font-weight: 400;\n          line-height: 1.1rem;\n        }\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../../src/List/ContentItemMono/ContentItemMono.scss%23sass","../../../src/List/ContentItemMono/ContentItemMono.scss"],"names":[],"mappings":"AAEA,sBACE,YAAA,CCDF,UACA,CDGE,6BAGE,iCAAA,CADA,qBAAA,CADA,YCCJ,CDKI,0CAEE,aAAA,CADA,YAAA,CAEA,qBCHN,CDMI,8CAEE,kBAAA,CADA,YCHN,CDSI,6DACE,sCCPN,CDUI,0EACE,0BCRN,CDYE,sCACE,YAAA,CACA,WCVJ,CDYI,wCACE,QCVN,CDaI,uEACE,2BCXN,CDcI,4EACE,mCAAA,CACA,eCZN,CDiBI,iGACE,sCAAA,CACA,gBAAA,CACA,eAAA,CACA,oBCfN,CDkBI,sGAGE,2BAAA,CAFA,kBAAA,CACA,kBCfN,CDsBM,gGACE,mCAAA,CACA,kBAAA,CACA,eAAA,CACA,kBCpBR,CDuBM,qGACE,kBAAA,CACA,kBCrBR,CDwBM,oGAKE,2BAAA,CAJA,mCAAA,CACA,cAAA,CACA,eAAA,CACA,mBCrBR,CD0BQ,qJAGE,2BAAA,CAFA,cAAA,CACA,mBCvBV,CD8BM,kIACE,cAAA,CACA,mBC5BR,CDyCM,uQACE,cAAA,CACA,eAAA,CACA,mBCvCR,CD6CA,wBAGM,iGACE,iBAAA,CACA,mBC5CN,CD4DM,2SACE,cAAA,CACA,mBClDR,CDqDM,oGACE,iBAAA,CACA,kBCnDR,CDuDQ,qJACE,iBAAA,CACA,kBCrDV,CD2DM,kIACE,iBAAA,CACA,kBCzDR,CDsEM,uQACE,iBAAA,CACA,eAAA,CACA,kBCpER,CACF","file":"ContentItemMono.css","sourcesContent":["@use \"../../common/common\" as common;\n\n.af-content-item-mono {\n  display: flex;\n  gap: 0.75rem;\n\n  &__stick {\n    width: 0.25rem;\n    border-radius: 0.125rem;\n    background-color: var(--color-axa);\n  }\n\n  &__left-container {\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n      fill: var(--color-axa);\n    }\n\n    &--center {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  &--disabled {\n    .af-content-item-mono__stick {\n      background-color: var(--color-gray-900);\n    }\n\n    .af-content-item-mono__left-container svg {\n      fill: var(--color-gray-900);\n    }\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.125rem;\n\n    p {\n      margin: 0;\n    }\n\n    .af-content-item-mono__main-text {\n      color: var(--color-gray-900);\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-family: var(--font-family-base);\n      font-weight: 400;\n    }\n  }\n\n  &--xl .af-content-item-mono__text-container {\n    .af-content-item-mono__main-text {\n      font-family: var(--font-family-publico);\n      font-size: 1.5rem;\n      font-weight: 700;\n      line-height: 1.875rem;\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-size: 1.125rem;\n      line-height: 1.4rem;\n      color: var(--color-gray-700);\n    }\n  }\n\n  &--m {\n    .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-family: var(--font-family-base);\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__tertiary-text {\n        font-family: var(--font-family-base);\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: var(--color-gray-700);\n      }\n\n      &:not(:has(.af-content-item-mono__tertiary-text)) {\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          color: var(--color-gray-700);\n        }\n      }\n    }\n\n    &:has(.af-content-item-mono__stick) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &:not(\n        :has(\n          .af-content-item-mono__text-container\n            .af-content-item-mono__secondary-text\n        )\n      ):has(\n        .af-content-item-mono__text-container\n          .af-content-item-mono__tertiary-text\n      ) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-mono {\n    &--xl .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &--m {\n      .af-content-item-mono__text-container {\n        .af-content-item-mono__main-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__tertiary-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n\n        &:not(:has(.af-content-item-mono__tertiary-text)) {\n          .af-content-item-mono__secondary-text {\n            font-size: 0.875rem;\n            line-height: 1.1rem;\n          }\n        }\n      }\n\n      &:has(.af-content-item-mono__stick) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n      }\n\n      &:not(\n          :has(\n            .af-content-item-mono__text-container\n              .af-content-item-mono__secondary-text\n          )\n        ):has(\n          .af-content-item-mono__text-container\n            .af-content-item-mono__tertiary-text\n        ) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          font-weight: 400;\n          line-height: 1.1rem;\n        }\n      }\n    }\n  }\n}\n","@use \"../../common/common\" as common;\n\n.af-content-item-mono {\n  display: flex;\n  gap: 0.75rem;\n\n  &__stick {\n    width: 0.25rem;\n    border-radius: 0.125rem;\n    background-color: var(--color-axa);\n  }\n\n  &__left-container {\n    svg {\n      width: 1.5rem;\n      height: 1.5rem;\n      fill: var(--color-axa);\n    }\n\n    &--center {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  &--disabled {\n    .af-content-item-mono__stick {\n      background-color: var(--color-gray-900);\n    }\n\n    .af-content-item-mono__left-container svg {\n      fill: var(--color-gray-900);\n    }\n  }\n\n  &__text-container {\n    display: grid;\n    gap: 0.125rem;\n\n    p {\n      margin: 0;\n    }\n\n    .af-content-item-mono__main-text {\n      color: var(--color-gray-900);\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-family: var(--font-family-base);\n      font-weight: 400;\n    }\n  }\n\n  &--xl .af-content-item-mono__text-container {\n    .af-content-item-mono__main-text {\n      font-family: var(--font-family-publico);\n      font-size: 1.5rem;\n      font-weight: 700;\n      line-height: 1.875rem;\n    }\n\n    .af-content-item-mono__secondary-text {\n      font-size: 1.125rem;\n      line-height: 1.4rem;\n      color: var(--color-gray-700);\n    }\n  }\n\n  &--m {\n    .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-family: var(--font-family-base);\n        font-size: 1.125rem;\n        font-weight: 600;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1.125rem;\n        line-height: 1.4rem;\n      }\n\n      .af-content-item-mono__tertiary-text {\n        font-family: var(--font-family-base);\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        color: var(--color-gray-700);\n      }\n\n      &:not(:has(.af-content-item-mono__tertiary-text)) {\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n          color: var(--color-gray-700);\n        }\n      }\n    }\n\n    &:has(.af-content-item-mono__stick) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &:not(\n        :has(\n          .af-content-item-mono__text-container\n            .af-content-item-mono__secondary-text\n        )\n      ):has(\n        .af-content-item-mono__text-container\n          .af-content-item-mono__tertiary-text\n      ) {\n      .af-content-item-mono__text-container .af-content-item-mono__main-text {\n        font-size: 1rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n      }\n    }\n  }\n}\n\n@media (width <= #{common.$breakpoint-sm}) {\n  .af-content-item-mono {\n    &--xl .af-content-item-mono__text-container {\n      .af-content-item-mono__main-text {\n        font-size: 1.25rem;\n        line-height: 1.56rem;\n      }\n\n      .af-content-item-mono__secondary-text {\n        font-size: 1rem;\n        line-height: 1.25rem;\n      }\n    }\n\n    &--m {\n      .af-content-item-mono__text-container {\n        .af-content-item-mono__main-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__secondary-text {\n          font-size: 1rem;\n          line-height: 1.25rem;\n        }\n\n        .af-content-item-mono__tertiary-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n\n        &:not(:has(.af-content-item-mono__tertiary-text)) {\n          .af-content-item-mono__secondary-text {\n            font-size: 0.875rem;\n            line-height: 1.1rem;\n          }\n        }\n      }\n\n      &:has(.af-content-item-mono__stick) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          line-height: 1.1rem;\n        }\n      }\n\n      &:not(\n          :has(\n            .af-content-item-mono__text-container\n              .af-content-item-mono__secondary-text\n          )\n        ):has(\n          .af-content-item-mono__text-container\n            .af-content-item-mono__tertiary-text\n        ) {\n        .af-content-item-mono__text-container .af-content-item-mono__main-text {\n          font-size: 0.875rem;\n          font-weight: 400;\n          line-height: 1.1rem;\n        }\n      }\n    }\n  }\n}\n"]}

package/dist/List/ContentItemMono/ContentItemMono.scss

@@ -106,9 +106,9 @@
 
     &:not(
         :has(
-            .af-content-item-mono__text-container
-              .af-content-item-mono__secondary-text
-          )
+          .af-content-item-mono__text-container
+            .af-content-item-mono__secondary-text
+        )
       ):has(
         .af-content-item-mono__text-container
           .af-content-item-mono__tertiary-text
@@ -170,9 +170,9 @@
 
       &:not(
           :has(
-              .af-content-item-mono__text-container
-                .af-content-item-mono__secondary-text
-            )
+            .af-content-item-mono__text-container
+              .af-content-item-mono__secondary-text
+          )
         ):has(
           .af-content-item-mono__text-container
             .af-content-item-mono__tertiary-text

package/dist/Modal/Modal.css

@@ -1 +1 @@
-.af-modal{background-color:var(--color-white);border:none;border-radius:.5rem;margin:0 auto;padding:0 0 1.5rem;position:fixed;width:100%}.af-modal::backdrop{background:var(--color-gray-900);opacity:.4}.af-modal__top{align-items:center;background-color:var(--color-white);border-bottom:1px solid var(--color-gray-400);display:flex;gap:1rem;padding:1.5rem;position:sticky;top:0;z-index:5}.af-modal__top-title{align-items:start;color:var(--color-gray-900);display:flex;justify-content:space-between;margin:0;width:100%}.af-modal__top-title-text{font-family:var(--font-family-publico);font-size:1.5rem;line-height:1.875rem}.af-modal__top-title-subtitle{color:var(--color-gray-700);font-family:var(--font-family-sans-serif);font-size:1.125rem;font-weight:400;line-height:1.406rem}.af-modal__top-title-close-btn{all:unset;align-items:center;cursor:pointer;display:flex;height:2rem;justify-content:center;width:2rem;fill:var(--color-axa)}.af-modal__top-title :hover{background:none}.af-modal__top-title :focus{background:none;border:none}.af-modal__content{display:flex;flex-direction:column;font-family:var(--font-family-base);font-size:1.125rem;font-weight:400;gap:2.5rem;margin-top:2.5rem;padding:0 1.5rem;z-index:0}.af-modal__actions{align-items:flex-end;display:flex;flex-direction:column-reverse;gap:1rem;justify-content:flex-end;padding-top:0}.af-modal__actions *,.af-modal__actions--fullWidth *{flex-grow:1;width:100%}@media only screen and (width >= 1024px){.af-modal{margin:auto;max-width:72rem;min-width:48rem}.af-modal__actions{flex-direction:row-reverse;justify-content:flex-start}.af-modal__actions *{flex-grow:unset;width:auto}.af-modal__actions--fullWidth *{flex-grow:1;width:100%}}
+.af-modal{--spacing-modal:calc(16/var(--font-size-base)*1rem);--font-size-heading:calc(20/var(--font-size-base)*1rem);--font-size-subtitle:calc(16/var(--font-size-base)*1rem);--line-height-heading:calc(25/var(--font-size-base)*1rem);--line-height-subtitle:calc(20/var(--font-size-base)*1rem);border:none;border-radius:var(--radius-8);padding:var(--spacing-modal) 0}.af-modal::backdrop{background:var(--color-gray-900);opacity:.4}.af-modal__header{border-bottom:1px solid var(--color-gray-400);display:grid;gap:var(--spacing-modal);grid-template-areas:"headertitle closebtn";grid-template-columns:1fr auto;padding-bottom:var(--spacing-modal);padding-inline:var(--spacing-modal)}.af-modal__header>.af-btn-client{align-items:start;grid-area:closebtn;height:fit-content;justify-self:end;width:fit-content}.af-modal__header-title{display:grid;gap:0 1rem;grid-area:headertitle;grid-template-areas:"icon title" "icon subtitle";justify-self:start}.af-modal__header-title-heading{color:var(--color-gray-900);font-family:var(--font-family-publico);font-size:var(--font-size-heading);grid-area:title;line-height:var(--line-height-heading);margin:0}.af-modal__header-title-subtitle{color:var(--color-gray-700);font-size:var(--font-size-subtitle);grid-area:subtitle;line-height:var(--line-height-subtitle)}.af-modal__header-title svg{grid-area:icon;fill:var(--color-axa)}.af-modal__body{padding:var(--spacing-modal)}.af-modal__footer{display:flex;gap:var(--spacing-modal);justify-content:flex-end;padding:var(--spacing-modal) var(--spacing-modal) 0 var(--spacing-modal)}.af-modal__footer .af-btn-client{flex-grow:1}@media (width > 667px){.af-modal{--spacing-modal:calc(24/var(--font-size-base)*1rem);--font-size-heading:calc(24/var(--font-size-base)*1rem);--font-size-subtitle:calc(18/var(--font-size-base)*1rem);--line-height-heading:calc(30/var(--font-size-base)*1rem);--line-height-subtitle:calc(22.5/var(--font-size-base)*1rem);max-width:revert}.af-modal__footer .af-btn-client{flex-grow:inherit;min-width:180px}}