@adyen/kyc-components 3.50.2 → 3.51.0

package/dist/style.css

@@ -1,5 +1,6 @@
 /* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -22,8 +23,10 @@
 .adyen-kyc-summary-section {
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
 }
-.adyen-layout-lg .adyen-kyc-summary-section {
-  padding-left: var(--adyen-sdk-spacer-120, 48px);
+@container main (min-width: 1024px) {
+  .adyen-kyc-summary-section {
+    padding-left: var(--adyen-sdk-spacer-120, 48px);
+  }
 }
 .adyen-kyc-summary-section__header {
   display: flex;
@@ -43,8 +46,10 @@
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   margin-bottom: var(--adyen-sdk-spacer-060, 12px);
 }
-.adyen-layout-xs-only .adyen-kyc-summary-section__field {
-  flex-direction: column;
+@container main (max-width: 680px) {
+  .adyen-kyc-summary-section__field {
+    flex-direction: column;
+  }
 }
 .adyen-kyc-summary-section__field:last-child {
   margin-bottom: var(--adyen-sdk-spacer-000, 0px);
@@ -59,8 +64,10 @@
 .adyen-kyc-summary-section__data {
   margin: var(--adyen-sdk-spacer-000, 0px);
 }
-.adyen-layout-xs-only .adyen-kyc-summary-section__data {
-  margin-top: var(--adyen-sdk-spacer-010, 2px);
+@container main (max-width: 680px) {
+  .adyen-kyc-summary-section__data {
+    margin-top: var(--adyen-sdk-spacer-010, 2px);
+  }
 }
 .adyen-kyc-summary__legal-caption {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
@@ -70,6 +77,7 @@
   line-height: var(--adyen-sdk-text-caption-line-height, 18px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -218,6 +226,7 @@ button[disabled]:hover {
   color: var(--adyen-sdk-color-label-disabled, #8d95a3);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -296,6 +305,7 @@ button[disabled]:hover {
   display: inline-block;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -379,6 +389,7 @@ button[disabled]:hover {
   margin-bottom: var(--adyen-sdk-spacer-080, 20px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -683,6 +694,7 @@ button[disabled]:hover {
   padding-left: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -878,6 +890,7 @@ button[disabled]:hover {
   right: 32px;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -955,6 +968,7 @@ button[disabled]:hover {
   display: flex;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1013,9 +1027,11 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-title-line-height, 26px);
   letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
 }
-.adyen-layout-xs-only .adyen-kyc-typography--title {
-  font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
-  line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title {
+    font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
+    line-height: var(--adyen-sdk-text-title-mobile-line-height, 26px);
+  }
 }
 .adyen-kyc-typography--title-m {
   font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
@@ -1024,9 +1040,11 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
   letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
 }
-.adyen-layout-xs-only .adyen-kyc-typography--title-m {
-  font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
-  line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title-m {
+    font-size: var(--adyen-sdk-text-title-m-mobile-font-size, 18px);
+    line-height: var(--adyen-sdk-text-title-m-mobile-line-height, 28px);
+  }
 }
 .adyen-kyc-typography--title-l {
   font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
@@ -1035,9 +1053,11 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
   letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
 }
-.adyen-layout-xs-only .adyen-kyc-typography--title-l {
-  font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
-  line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
+@container main (max-width: 680px) {
+  .adyen-kyc-typography--title-l {
+    font-size: var(--adyen-sdk-text-title-l-mobile-font-size, 20px);
+    line-height: var(--adyen-sdk-text-title-l-mobile-line-height, 30px);
+  }
 }
 .adyen-kyc-typography--primary {
   color: var(--adyen-sdk-color-label-primary, #00112c);
@@ -1138,6 +1158,7 @@ button[disabled]:hover {
   z-index: 0;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1161,6 +1182,7 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-title-line-height, 26px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1288,18 +1310,21 @@ button[disabled]:hover {
   right: 0;
 }
 
-.adyen-layout-xs-only [class*=adyen-kyc-field--col-] {
-  width: 100%;
-}
-
-.adyen-layout-md .adyen-kyc-field-wrapper {
-  flex-wrap: nowrap;
-}
-.adyen-layout-md .adyen-kyc-field-wrapper > .adyen-kyc-field:first-child {
-  margin-right: var(--adyen-sdk-spacer-040, 8px);
+@container main (max-width: 680px) {
+  [class*=adyen-kyc-field--col-] {
+    width: 100%;
+  }
 }
-.adyen-layout-md .adyen-kyc-field-wrapper > .adyen-kyc-field:nth-child(2) {
-  margin-left: var(--adyen-sdk-spacer-040, 8px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-field-wrapper {
+    flex-wrap: nowrap;
+  }
+  .adyen-kyc-field-wrapper > .adyen-kyc-field:first-child {
+    margin-right: var(--adyen-sdk-spacer-040, 8px);
+  }
+  .adyen-kyc-field-wrapper > .adyen-kyc-field:nth-child(2) {
+    margin-left: var(--adyen-sdk-spacer-040, 8px);
+  }
 }.adyen-kyc-company-registration-details fieldset {
   border: 0;
   padding: 0;
@@ -1351,6 +1376,7 @@ button[disabled]:hover {
   color: inherit;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1487,6 +1513,7 @@ button[disabled]:hover {
   font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1505,8 +1532,10 @@ button[disabled]:hover {
   padding-right: var(--adyen-sdk-spacer-070, 16px);
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }
-.adyen-layout-md .adyen-kyc-radio-group-card__label {
-  padding-right: var(--adyen-sdk-spacer-000, 0px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-radio-group-card__label {
+    padding-right: var(--adyen-sdk-spacer-000, 0px);
+  }
 }
 .adyen-kyc-radio-group-card__subtitle {
   color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
@@ -1532,6 +1561,7 @@ button[disabled]:hover {
   top: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1585,6 +1615,7 @@ button[disabled]:hover {
   margin-bottom: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1601,7 +1632,7 @@ button[disabled]:hover {
   grid-template-columns: repeat(auto-fill, 50%);
 }
 
-@container (min-width: 560px) {
+@container main (min-width: 680px) {
   .adyen-kyc-document-guidance__container {
     grid-template-columns: repeat(auto-fill, 25%);
   }
@@ -1612,7 +1643,7 @@ button[disabled]:hover {
   align-items: center;
   margin: var(--adyen-sdk-spacer-060, 12px);
 }
-@container (max-width: 560px) {
+@container main (max-width: 680px) {
   .adyen-kyc-document-guidance__item .adyen-kyc-document-guidance__container {
     margin: var(--adyen-sdk-spacer-000, 0px);
   }
@@ -1644,6 +1675,7 @@ button[disabled]:hover {
   background-color: var(--adyen-sdk-color-background-critical-strong, #e22d2d);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1696,6 +1728,7 @@ button[disabled]:hover {
   margin-top: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1758,6 +1791,7 @@ button[disabled]:hover {
   margin: var(--adyen-sdk-spacer-060, 12px) 0;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1802,6 +1836,7 @@ button[disabled]:hover {
   list-style-type: decimal;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1819,15 +1854,17 @@ fieldset {
   flex-direction: column;
   gap: 0;
 }
-.adyen-layout-md .adyen-kyc-address__condensed-fields {
-  flex-direction: row;
-  gap: var(--adyen-sdk-spacer-080, 20px);
-}
-.adyen-layout-md .adyen-kyc-address__condensed-fields > *:first-child {
-  flex: 0 0 50%;
-}
-.adyen-layout-md .adyen-kyc-address__condensed-fields > *:not(:first-child) {
-  flex: 1;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-address__condensed-fields {
+    flex-direction: row;
+    gap: var(--adyen-sdk-spacer-080, 20px);
+  }
+  .adyen-kyc-address__condensed-fields > *:first-child {
+    flex: 0 0 50%;
+  }
+  .adyen-kyc-address__condensed-fields > *:not(:first-child) {
+    flex: 1;
+  }
 }
 
 .adyen-kyc-search-address {
@@ -1867,6 +1904,7 @@ fieldset {
   text-align: center;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -1880,8 +1918,10 @@ fieldset {
 .adyen-kyc-id-verification {
   min-height: 250px;
 }
-.adyen-layout-xs-only .adyen-kyc-id-verification {
-  height: 380px;
+@container main (max-width: 680px) {
+  .adyen-kyc-id-verification {
+    height: 380px;
+  }
 }
 .adyen-kyc-id-verification .onfido-sdk-ui-Modal-inner {
   border: 0 !important;
@@ -1937,6 +1977,7 @@ fieldset {
   margin-bottom: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2061,6 +2102,7 @@ fieldset {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2092,40 +2134,7 @@ fieldset {
   flex: 1;
 }/* #region Borders */
 /* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.adyen-action-bar {
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  display: flex;
-  align-items: center;
-  margin: var(--adyen-sdk-spacer-120, 48px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-layout-xs-only .adyen-action-bar {
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-layout-md .adyen-action-bar {
-  flex-flow: row-reverse;
-  justify-content: space-between;
-}
-
-.adyen-action-bar__action {
-  display: flex;
-  align-items: center;
-  gap: var(--adyen-sdk-spacer-040, 8px);
-}
-.adyen-layout-xs-only .adyen-action-bar__action {
-  width: 100%;
-}
-
-.adyen-action-bar__button {
-  flex: 1;
-}/* #region Borders */
-/* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2147,8 +2156,10 @@ fieldset {
 .adyen-kyc-bank-verification-widget-container--plaid-modal {
   height: 650px;
 }
-.adyen-layout-xs-only .adyen-kyc-bank-verification-widget-container--plaid-modal {
-  height: 500px;
+@container main (max-width: 680px) {
+  .adyen-kyc-bank-verification-widget-container--plaid-modal {
+    height: 500px;
+  }
 }
 .adyen-kyc-bank-verification-widget-container--fullscreen {
   position: fixed;
@@ -2174,6 +2185,47 @@ fieldset {
   to {
     opacity: 1;
   }
+}/* #region Borders */
+/* #endregion */
+/* for container queries */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+.adyen-action-bar {
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  display: flex;
+  align-items: center;
+  margin: var(--adyen-sdk-spacer-120, 48px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+}
+@container main (max-width: 680px) {
+  .adyen-action-bar {
+    flex-direction: column;
+    gap: var(--adyen-sdk-spacer-040, 8px);
+  }
+}
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-action-bar {
+    flex-flow: row-reverse;
+    justify-content: space-between;
+  }
+}
+
+.adyen-action-bar__action {
+  display: flex;
+  align-items: center;
+  gap: var(--adyen-sdk-spacer-040, 8px);
+}
+@container main (max-width: 680px) {
+  .adyen-action-bar__action {
+    width: 100%;
+  }
+}
+
+.adyen-action-bar__button {
+  flex: 1;
 }.adyen-kyc-check-guidance {
   margin: var(--adyen-sdk-spacer-090, 24px) 0 var(--adyen-sdk-spacer-030, 6px);
   position: relative;
@@ -2193,6 +2245,7 @@ fieldset {
   fill: var(--adyen-sdk-color-label-highlight, #0070f5);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2203,14 +2256,18 @@ fieldset {
   display: flex;
   gap: var(--adyen-sdk-spacer-060, 12px);
 }
-.adyen-layout-xs-only .adyen-kyc-field-verification-methods {
-  flex-direction: column;
+@container main (max-width: 680px) {
+  .adyen-kyc-field-verification-methods {
+    flex-direction: column;
+  }
 }
 .adyen-kyc-field-verification-methods__card {
   display: flex;
 }
-.adyen-layout-md .adyen-kyc-field-verification-methods__card {
-  display: block;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-field-verification-methods__card {
+    display: block;
+  }
 }
 .adyen-kyc-field-verification-methods .adyen-kyc-radio-card {
   width: 100%;
@@ -2218,16 +2275,20 @@ fieldset {
 .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__icon {
   display: none;
 }
-.adyen-layout-md .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__icon {
-  display: block;
-  margin-right: var(--adyen-sdk-spacer-000, 0px);
-  width: auto;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__icon {
+    display: block;
+    margin-right: var(--adyen-sdk-spacer-000, 0px);
+    width: auto;
+  }
 }
 .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
   width: 100%;
 }
-.adyen-layout-md .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
-  width: auto;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-field-verification-methods .adyen-kyc-radio-card__content {
+    width: auto;
+  }
 }
 .adyen-kyc-field-verification-methods__footer {
   align-items: center;
@@ -2247,8 +2308,10 @@ fieldset {
 .adyen-kyc-radio-group-card__illustration svg {
   height: 75px;
 }
-.adyen-layout-md .adyen-kyc-radio-group-card__illustration svg {
-  height: 125px;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-radio-group-card__illustration svg {
+    height: 125px;
+  }
 }
 
 .adyen-kyc-instant-verification-error {
@@ -2265,8 +2328,10 @@ fieldset {
 .adyen-kyc-payout-verification-method__image svg {
   height: 125px;
 }
-.adyen-layout-md .adyen-kyc-payout-verification-method__image svg {
-  height: 150px;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-payout-verification-method__image svg {
+    height: 150px;
+  }
 }
 .adyen-kyc-payout-verification-method__description {
   margin: var(--adyen-sdk-spacer-040, 8px) 0 var(--adyen-sdk-spacer-120, 48px);
@@ -2292,96 +2357,14 @@ fieldset {
   gap: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
-.adyen-kyc-card {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
-  border-radius: var(--adyen-sdk-border-radius-l, 12px);
-  display: block;
-  outline: none;
-}
-.adyen-kyc-card--secondary {
-  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-}
-
-.adyen-kyc-card.adyen-kyc-card--stateful {
-  border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
-  cursor: pointer;
-  transition-duration: 0.2s;
-  transition-property: border-color, box-shadow;
-  transition-timing-function: ease;
-  position: relative;
-  z-index: 0;
-}
-.adyen-kyc-card.adyen-kyc-card--stateful:hover {
-  border-color: var(--adyen-sdk-color-outline-primary-hover, #c9cdd3);
-  z-index: 1;
-}
-.adyen-kyc-card.adyen-kyc-card--stateful:focus, .adyen-kyc-card.adyen-kyc-card--stateful:active {
-  z-index: 2;
-  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
-}
-
-.adyen-kyc-card.adyen-kyc-card--active {
-  border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
-  cursor: pointer;
-  transition-duration: 0.2s;
-  transition-property: border-color, box-shadow;
-  transition-timing-function: ease;
-}
-.adyen-kyc-card.adyen-kyc-card--active, .adyen-kyc-card.adyen-kyc-card--active:active, .adyen-kyc-card.adyen-kyc-card--active:hover {
-  border-color: var(--adyen-sdk-color-outline-primary-active, #00112c);
-}
-.adyen-kyc-card.adyen-kyc-card--active:focus, .adyen-kyc-card.adyen-kyc-card--active:active {
-  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
-}
-
-.adyen-kyc-card.adyen-kyc-card--disabled {
-  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
-  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
-  cursor: not-allowed;
-}
-
-.adyen-kyc-card__header {
-  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
-}
-.adyen-kyc-card__header--button {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.adyen-kyc-card__header .adyen-kyc-card-title {
-  display: flex;
-  flex-direction: column;
-}
-
-.adyen-kyc-card__body {
-  padding: var(--adyen-sdk-spacer-070, 16px);
-}
-.adyen-kyc-card__header + .adyen-kyc-card__body {
-  padding-top: var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-card__footer {
-  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
-}
-.adyen-kyc-card__body + .adyen-kyc-card__footer {
-  margin-top: calc(var(--adyen-sdk-spacer-070, 16px) * -1);
-}
-
-.adyen-kyc-card__warning {
-  border-radius: 0 0 var(--adyen-sdk-border-radius-s, 4px) var(--adyen-sdk-border-radius-s, 4px);
-}.adyen-kyc-modal {
+.adyen-kyc-modal {
   border: none;
   display: flex;
   flex-direction: column;
@@ -2501,88 +2484,183 @@ fieldset {
   100% {
     top: 0;
   }
-}.adyen-kyc-additional-information {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-120, 48px);
-}
-.adyen-kyc-additional-information__section-heading {
-  margin: 0 0 var(--adyen-sdk-spacer-090, 24px);
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-050, 10px);
-}
-.adyen-kyc-additional-information fieldset {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-.adyen-kyc-additional-information .adyen-kyc-field-wrapper {
-  flex-direction: column;
-}
-.adyen-kyc-additional-information .adyen-kyc-form-header {
-  margin: 0 !important;
-}
-.adyen-kyc-additional-information .adyen-kyc__address {
-  margin-bottom: 0 !important;
-}.adyen-kyc-verified-business-card {
-  display: flex;
-  flex-direction: column;
-  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-}
-.adyen-kyc-verified-business-card__address {
-  display: flex;
-  flex-direction: column;
-}
-.adyen-kyc-verified-business-card__address a {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-}
-.adyen-kyc-verified-business-card__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--adyen-sdk-spacer-080, 20px);
-  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
-  transition: max-height 0.5s ease, padding-left 0.35s ease, opacity 0.35s ease;
-}
-.adyen-kyc-verified-business-card__content--collapsed {
-  overflow: hidden;
-  max-height: 0;
-  opacity: 0;
-  margin: 0;
-  padding-left: var(--adyen-sdk-spacer-080, 20px);
-}
-.adyen-kyc-verified-business-card__content--expanded {
-  max-height: 480px;
-}
-.adyen-kyc-verified-business-card__expand-button {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  text-decoration: underline;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
-.adyen-kyc-structured-list {
-  width: 100%;
+.adyen-kyc-card {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  margin: var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-structured-list-list-item {
-  display: flex;
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
+  border-radius: var(--adyen-sdk-border-radius-l, 12px);
+  display: block;
+  outline: none;
+}
+.adyen-kyc-card--secondary {
+  background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+}
+
+.adyen-kyc-card.adyen-kyc-card--stateful {
+  border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
+  cursor: pointer;
+  transition-duration: 0.2s;
+  transition-property: border-color, box-shadow;
+  transition-timing-function: ease;
+  position: relative;
+  z-index: 0;
+}
+.adyen-kyc-card.adyen-kyc-card--stateful:hover {
+  border-color: var(--adyen-sdk-color-outline-primary-hover, #c9cdd3);
+  z-index: 1;
+}
+.adyen-kyc-card.adyen-kyc-card--stateful:focus, .adyen-kyc-card.adyen-kyc-card--stateful:active {
+  z-index: 2;
+  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
+}
+
+.adyen-kyc-card.adyen-kyc-card--active {
+  border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
+  cursor: pointer;
+  transition-duration: 0.2s;
+  transition-property: border-color, box-shadow;
+  transition-timing-function: ease;
+}
+.adyen-kyc-card.adyen-kyc-card--active, .adyen-kyc-card.adyen-kyc-card--active:active, .adyen-kyc-card.adyen-kyc-card--active:hover {
+  border-color: var(--adyen-sdk-color-outline-primary-active, #00112c);
+}
+.adyen-kyc-card.adyen-kyc-card--active:focus, .adyen-kyc-card.adyen-kyc-card--active:active {
+  box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
+}
+
+.adyen-kyc-card.adyen-kyc-card--disabled {
+  background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
+  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
+  cursor: not-allowed;
+}
+
+.adyen-kyc-card__header {
+  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
+}
+.adyen-kyc-card__header--button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.adyen-kyc-card__header .adyen-kyc-card-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.adyen-kyc-card__body {
+  padding: var(--adyen-sdk-spacer-070, 16px);
+}
+.adyen-kyc-card__header + .adyen-kyc-card__body {
+  padding-top: var(--adyen-sdk-spacer-000, 0px);
+}
+
+.adyen-kyc-card__footer {
+  padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
+}
+.adyen-kyc-card__body + .adyen-kyc-card__footer {
+  margin-top: calc(var(--adyen-sdk-spacer-070, 16px) * -1);
+}
+
+.adyen-kyc-card__warning {
+  border-radius: 0 0 var(--adyen-sdk-border-radius-s, 4px) var(--adyen-sdk-border-radius-s, 4px);
+}.adyen-kyc-additional-information {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-120, 48px);
+}
+.adyen-kyc-additional-information__section-heading {
+  margin: 0 0 var(--adyen-sdk-spacer-090, 24px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-050, 10px);
+}
+.adyen-kyc-additional-information fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.adyen-kyc-additional-information .adyen-kyc-field-wrapper {
+  flex-direction: column;
+}
+.adyen-kyc-additional-information .adyen-kyc-form-header {
+  margin: 0 !important;
+}
+.adyen-kyc-additional-information .adyen-kyc__address {
+  margin-bottom: 0 !important;
+}.adyen-kyc-verified-business-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+}
+.adyen-kyc-verified-business-card__address {
+  display: flex;
+  flex-direction: column;
+}
+.adyen-kyc-verified-business-card__address a {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+}
+.adyen-kyc-verified-business-card__content {
+  display: flex;
   flex-direction: column;
+  gap: var(--adyen-sdk-spacer-080, 20px);
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
+  transition: max-height 0.5s ease, padding-left 0.35s ease, opacity 0.35s ease;
+}
+.adyen-kyc-verified-business-card__content--collapsed {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  margin: 0;
+  padding-left: var(--adyen-sdk-spacer-080, 20px);
+}
+.adyen-kyc-verified-business-card__content--expanded {
+  max-height: 480px;
 }
-.adyen-layout-md .adyen-kyc-structured-list-list-item {
+.adyen-kyc-verified-business-card__expand-button {
+  display: flex;
   flex-direction: row;
-  align-items: center;
+  justify-content: flex-start;
+  text-decoration: underline;
+}/* #region Borders */
+/* #endregion */
+/* for container queries */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+.adyen-kyc-structured-list {
+  width: 100%;
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+  margin: var(--adyen-sdk-spacer-000, 0px);
+}
+
+.adyen-kyc-structured-list-list-item {
+  display: flex;
+  flex-direction: column;
+}
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-structured-list-list-item {
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .adyen-kyc-structured-list-list-item:not(:last-of-type) {
@@ -2601,8 +2679,10 @@ fieldset {
   margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
   overflow-x: auto;
 }
-.adyen-layout-md .adyen-kyc-structured-list-value {
-  margin: var(--adyen-sdk-spacer-000, 0px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-structured-list-value {
+    margin: var(--adyen-sdk-spacer-000, 0px);
+  }
 }.adyen-kyc-basic-information {
   display: flex;
   flex-direction: column;
@@ -2633,6 +2713,7 @@ fieldset {
   text-wrap: nowrap;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2725,6 +2806,7 @@ fieldset {
   color: var(--adyen-sdk-color-label-primary, #00112c);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2734,8 +2816,10 @@ fieldset {
 .adyen-kyc-form-container {
   width: 100%;
 }
-.adyen-layout-md .adyen-kyc-form-container {
-  flex: 1;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-form-container {
+    flex: 1;
+  }
 }
 
 .adyen-kyc-form-wrapper--hidden {
@@ -2755,15 +2839,142 @@ fieldset {
   flex: 1;
 }
 
-.adyen-layout-xs-only .adyen-kyc-dropin__content-main,
-.adyen-layout-xs-only .adyen-kyc-form-with-sidebar {
-  flex-direction: column;
+@container main (max-width: 680px) {
+  .adyen-kyc-dropin__content-main,
+  .adyen-kyc-form-with-sidebar {
+    flex-direction: column;
+  }
 }.adyen-kyc-expiry-modal__footer {
   display: flex;
   flex-direction: row;
   justify-content: end;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
+.adyen-kyc-toast {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-highlight-strong, #0070f5);
+  border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  display: flex;
+  align-items: right;
+  gap: var(--adyen-sdk-spacer-060, 12px);
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  height: auto;
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  opacity: 0;
+  overflow: hidden;
+  padding: var(--adyen-sdk-spacer-050, 10px);
+  transform: translateY(2%);
+  transition: ease 200ms;
+  transition-property: opacity, transform, visibility;
+  user-select: none;
+  visibility: hidden;
+  white-space: normal;
+  z-index: 1;
+}
+.adyen-kyc-toast--visible {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+}
+
+.adyen-kyc-loading {
+  border: var(--adyen-sdk-border-width-s, 1px) solid;
+}
+
+.adyen-kyc-toast__success {
+  background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-success-strong, #07893c);
+}
+
+.adyen-kyc-toast__error {
+  background-color: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
+  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-critical-strong, #e22d2d);
+}
+
+.adyen-kyc-toast__message {
+  flex: 1;
+}
+
+.adyen-kyc-toast__actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: end;
+}
+
+.adyen-kyc-toast__title {
+  display: block;
+  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
+  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px);
+}
+
+.adyen-kyc-toast__subtitle,
+.adyen-kyc-toast__action {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  display: block;
+  margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
+  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-020, 4px);
+}
+
+.adyen-kyc-toast__close {
+  background: none;
+  border: none;
+  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  height: 16px;
+  margin: var(--adyen-sdk-spacer-030, 6px);
+  padding: var(--adyen-sdk-spacer-000, 0px);
+}
+
+.adyen-kyc-toast__action {
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  text-decoration: underline;
+}
+
+.adyen-kyc-toast__loader {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  margin: var(--adyen-sdk-spacer-030, 6px);
+}
+
+.adyen-kyc-dropin__toast-stack {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  margin-top: var(--adyen-sdk-spacer-090, 24px);
+  z-index: 500;
+}
+@container main (max-width: 680px) {
+  .adyen-kyc-dropin__toast-stack {
+    bottom: var(--adyen-sdk-spacer-070, 16px);
+    position: fixed;
+  }
+}
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-dropin__toast-stack {
+    top: var(--adyen-sdk-spacer-070, 16px);
+  }
+}/* #region Borders */
+/* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2830,6 +3041,7 @@ fieldset {
   margin: 0 calc(var(--step-progress-internal-height) / 2);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2839,27 +3051,33 @@ fieldset {
 .adyen-kyc-form-navigation {
   width: 100%;
 }
-.adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
-  display: none;
-}
-.adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
-  font-size: 0;
-}
-.adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
-  font-size: var(--adyen-sdk-text-title-font-size, 16px);
-  font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
-  line-height: var(--adyen-sdk-text-title-line-height, 26px);
-  padding-left: var(--adyen-sdk-spacer-000, 0px);
-}
-.adyen-layout-md .adyen-kyc-form-navigation {
-  padding-right: var(--adyen-sdk-spacer-100, 32px);
+@container main (max-width: 680px) {
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
+    display: none;
+  }
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-button__text {
+    font-size: 0;
+  }
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__home-button-item .adyen-kyc-form-navigation__home-button {
+    font-size: var(--adyen-sdk-text-title-font-size, 16px);
+    font-family: var(--adyen-sdk-text-title-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+    font-weight: var(--adyen-sdk-text-title-font-weight, 600);
+    line-height: var(--adyen-sdk-text-title-line-height, 26px);
+    padding-left: var(--adyen-sdk-spacer-000, 0px);
+  }
 }
-.adyen-layout-md .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
-  display: none;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-form-navigation {
+    padding-right: var(--adyen-sdk-spacer-100, 32px);
+  }
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__step-count {
+    display: none;
+  }
 }
-.adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
-  display: none;
+@container main (max-width: 680px) {
+  .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
+    display: none;
+  }
 }
 .adyen-kyc-form-navigation .adyen-kyc-form-navigation__header {
   color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
@@ -2887,6 +3105,7 @@ fieldset {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2940,6 +3159,7 @@ fieldset {
   margin-left: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -2974,8 +3194,10 @@ fieldset {
   height: calc(100% - 56px);
   overflow: auto;
 }
-.adyen-layout-md .adyen-kyc-dropin__content {
-  height: calc(100% - 72px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-dropin__content {
+    height: calc(100% - 72px);
+  }
 }
 
 /* padding in dropins, not used in modal view */
@@ -2985,11 +3207,15 @@ fieldset {
   padding: var(--adyen-sdk-spacer-070, 16px);
   width: 100%;
 }
-.adyen-layout-md .adyen-kyc-dropin__content-main {
-  padding: var(--adyen-sdk-spacer-090, 24px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-dropin__content-main {
+    padding: var(--adyen-sdk-spacer-090, 24px);
+  }
 }
-.adyen-layout-lg .adyen-kyc-dropin__content-main {
-  padding: var(--adyen-sdk-spacer-110, 40px);
+@container main (min-width: 1024px) {
+  .adyen-kyc-dropin__content-main {
+    padding: var(--adyen-sdk-spacer-110, 40px);
+  }
 }
 
 .adyen-kyc-dropin__main {
@@ -3029,6 +3255,7 @@ fieldset {
   margin-left: auto;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3042,13 +3269,15 @@ fieldset {
   font-weight: var(--adyen-sdk-text-body-font-weight, 400);
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
 }
-.adyen-layout-md .adyen-kyc-decision-makers__container {
-  display: flex;
-  flex-direction: column;
-}
-.adyen-layout-md .adyen-kyc-decision-makers__box {
-  margin-right: var(--adyen-sdk-spacer-090, 24px);
-  width: 33.3%;
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-kyc-decision-makers__container {
+    display: flex;
+    flex-direction: column;
+  }
+  .adyen-kyc-decision-makers__box {
+    margin-right: var(--adyen-sdk-spacer-090, 24px);
+    width: 33.3%;
+  }
 }
 .adyen-kyc-decision-makers__container {
   margin-bottom: var(--adyen-sdk-spacer-090, 24px);
@@ -3093,6 +3322,7 @@ fieldset {
   margin-bottom: var(--adyen-sdk-spacer-020, 4px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3170,6 +3400,7 @@ fieldset {
   padding: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3241,10 +3472,13 @@ fieldset {
   font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
 }
 
-.adyen-layout-xs-only .adyen-kyc-status__text {
-  display: none;
+@container main (max-width: 680px) {
+  .adyen-kyc-status__text {
+    display: none;
+  }
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3274,6 +3508,7 @@ fieldset {
   width: 100%;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3329,6 +3564,7 @@ fieldset {
   color: var(--adyen-sdk-color-label-on-background-success-weak, #067934);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3466,6 +3702,7 @@ fieldset {
   width: 92px;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3553,6 +3790,7 @@ fieldset {
   align-items: center;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3575,8 +3813,10 @@ fieldset {
 .adyen-task-item__header {
   flex-wrap: wrap-reverse;
 }
-.adyen-layout-md .adyen-task-item__status {
-  gap: var(--adyen-sdk-spacer-040, 8px);
+@container main (min-width: 680px) and (max-width: 1024px) {
+  .adyen-task-item__status {
+    gap: var(--adyen-sdk-spacer-040, 8px);
+  }
 }
 .adyen-task-item__body {
   display: flex;
@@ -3669,6 +3909,7 @@ fieldset {
   padding-top: 1px;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3684,8 +3925,10 @@ fieldset {
   align-items: flex-start;
   background: var(--adyen-sdk-color-background-primary, #ffffff);
 }
-.adyen-layout-xs-only .adyen-task-list-group {
-  border: 0;
+@container main (max-width: 680px) {
+  .adyen-task-list-group {
+    border: 0;
+  }
 }
 .adyen-task-list-group__header {
   padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-070, 16px);
@@ -3700,6 +3943,7 @@ fieldset {
   margin-top: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3748,6 +3992,7 @@ fieldset {
   --adv-accordion-content-padding: 0;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3824,6 +4069,7 @@ fieldset {
   margin-top: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3906,6 +4152,7 @@ fieldset {
   margin-left: var(--adyen-sdk-spacer-070, 16px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -3950,6 +4197,7 @@ fieldset {
   width: 100%;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -4121,6 +4369,7 @@ fieldset {
   border-radius: 50%;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -4140,8 +4389,10 @@ fieldset {
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   margin-bottom: var(--adyen-sdk-spacer-060, 12px);
 }
-.adyen-layout-xs-only .adyen-kyc-description-section-field {
-  flex-direction: column;
+@container main (max-width: 680px) {
+  .adyen-kyc-description-section-field {
+    flex-direction: column;
+  }
 }
 .adyen-kyc-description-section-field:last-child {
   margin-bottom: var(--adyen-sdk-spacer-000, 0px);
@@ -4159,10 +4410,13 @@ fieldset {
   flex-direction: column;
   width: 100%;
 }
-.adyen-layout-xs-only .adyen-kyc-description-section-data {
-  margin-top: var(--adyen-sdk-spacer-010, 2px);
+@container main (max-width: 680px) {
+  .adyen-kyc-description-section-data {
+    margin-top: var(--adyen-sdk-spacer-010, 2px);
+  }
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -4235,6 +4489,7 @@ fieldset {
   overflow-x: auto;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -4309,6 +4564,7 @@ fieldset {
   height: var(--adyen-sdk-spacer-120, 48px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -4333,6 +4589,7 @@ fieldset {
   margin: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-060, 12px) var(--adyen-sdk-spacer-000, 0px);
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -4899,9 +5156,19 @@ fieldset {
   position: relative;
   padding: var(--adyen-sdk-spacer-100, 32px);
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
+  /**
+  * main container query, used similarly to a @media query
+  * considering our Component can be embedded in a container of arbitrary size
+  * that does not necessarily match the whole window/screen size.
+  * Uses s and l breakpoints defined in variables.
+  */
+  container-type: inline-size;
+  container-name: main;
 }
-.adyen-layout-xs-only .adyen-kyc-ui-element-container {
-  padding: var(--adyen-sdk-spacer-070, 16px);
+@container main (max-width: 680px) {
+  .adyen-kyc-ui-element-container {
+    padding: var(--adyen-sdk-spacer-070, 16px);
+  }
 }
 
 /*
@@ -4914,124 +5181,7 @@ fieldset {
   padding: 0;
 }/* #region Borders */
 /* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.adyen-kyc-toast {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  font-family: var(--adyen-sdk-text-body-font-family, 'Adyen Variable', Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-highlight-strong, #0070f5);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  display: flex;
-  align-items: right;
-  gap: var(--adyen-sdk-spacer-060, 12px);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  height: auto;
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  opacity: 0;
-  overflow: hidden;
-  padding: var(--adyen-sdk-spacer-050, 10px);
-  transform: translateY(2%);
-  transition: ease 200ms;
-  transition-property: opacity, transform, visibility;
-  user-select: none;
-  visibility: hidden;
-  white-space: normal;
-  z-index: 1;
-}
-.adyen-kyc-toast--visible {
-  opacity: 1;
-  transform: translateY(0);
-  visibility: visible;
-}
-
-.adyen-kyc-loading {
-  border: var(--adyen-sdk-border-width-s, 1px) solid;
-}
-
-.adyen-kyc-toast__success {
-  background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-success-strong, #07893c);
-}
-
-.adyen-kyc-toast__error {
-  background-color: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
-  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-critical-strong, #e22d2d);
-}
-
-.adyen-kyc-toast__message {
-  flex: 1;
-}
-
-.adyen-kyc-toast__actions {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  align-items: end;
-}
-
-.adyen-kyc-toast__title {
-  display: block;
-  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
-  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-toast__subtitle,
-.adyen-kyc-toast__action {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  display: block;
-  margin: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
-  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-020, 4px);
-}
-
-.adyen-kyc-toast__close {
-  background: none;
-  border: none;
-  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  height: 16px;
-  margin: var(--adyen-sdk-spacer-030, 6px);
-  padding: var(--adyen-sdk-spacer-000, 0px);
-}
-
-.adyen-kyc-toast__action {
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  text-decoration: underline;
-}
-
-.adyen-kyc-toast__loader {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  margin: var(--adyen-sdk-spacer-030, 6px);
-}
-
-.adyen-kyc-dropin__toast-stack {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, 0);
-  z-index: 500;
-}
-.adyen-layout-xs-only .adyen-kyc-dropin__toast-stack {
-  bottom: var(--adyen-sdk-spacer-070, 16px);
-  position: fixed;
-}
-.adyen-layout-md .adyen-kyc-dropin__toast-stack {
-  top: var(--adyen-sdk-spacer-070, 16px);
-}/* #region Borders */
-/* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */
@@ -5083,6 +5233,7 @@ fieldset {
   margin: 0 1em;
 }/* #region Borders */
 /* #endregion */
+/* for container queries */
 /* #region Z-index */
 /* #endregion */
 /* #region Timing functions */