@adyen/kyc-components/dist/style.css

This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.

._svg-icon_cdxs7_1 {
  color: inherit;
  display: inline-flex;
  vertical-align: baseline;
  min-height: 16px;
  min-width: 16px;
}

._svg-icon_cdxs7_1 svg {
  /* for safari */
  height: 100%;
}

._svg-icon_cdxs7_1 svg path {
  fill: currentColor;
}

._svg-image_cdxs7_18 {
  display: inline-block;
}
._typography_1kejo_1 {
  color: var(--adyen-internal-color-label-primary);
  font-family: var(--adyen-internal-text-body-font-family);
  font-size: var(--adyen-internal-text-body-font-size);
  font-weight: var(--adyen-internal-text-body-font-weight);
  line-height: var(--adyen-internal-text-body-line-height);
  margin: var(--adyen-internal-spacer-000);
}

._typography-body_1kejo_10 {
  font-size: var(--adyen-internal-text-body-font-size);
  font-family: var(--adyen-internal-text-body-font-family);
  line-height: var(--adyen-internal-text-body-line-height);
  letter-spacing: var(--adyen-internal-text-body-letter-spacing);
  font-weight: var(--adyen-internal-text-body-font-weight);
}

._typography-body-stronger_1kejo_18 {
  font-size: var(--adyen-internal-text-body-font-size);
  font-family: var(--adyen-internal-text-body-font-family);
  line-height: var(--adyen-internal-text-body-line-height);
  letter-spacing: var(--adyen-internal-text-body-letter-spacing);
  font-weight: var(--adyen-internal-text-body-stronger-font-weight);
}

._typography-body-strongest_1kejo_26 {
  font-size: var(--adyen-internal-text-body-font-size);
  font-family: var(--adyen-internal-text-body-font-family);
  line-height: var(--adyen-internal-text-body-line-height);
  letter-spacing: var(--adyen-internal-text-body-letter-spacing);
  font-weight: var(--adyen-internal-text-body-strongest-font-weight);
}

._typography-caption_1kejo_34 {
  font-size: var(--adyen-internal-text-caption-font-size);
  font-family: var(--adyen-internal-text-caption-font-family);
  font-weight: var(--adyen-internal-text-caption-font-weight);
  line-height: var(--adyen-internal-text-caption-line-height);
  letter-spacing: var(--adyen-internal-text-caption-letter-spacing);
}

._typography-caption-stronger_1kejo_42 {
  font-size: var(--adyen-internal-text-caption-font-size);
  font-family: var(--adyen-internal-text-caption-font-family);
  font-weight: var(--adyen-internal-text-caption-stronger-font-weight);
  line-height: var(--adyen-internal-text-caption-line-height);
  letter-spacing: var(--adyen-internal-text-caption-letter-spacing);
}

._typography-title_1kejo_50 {
  font-size: var(--adyen-internal-text-title-font-size);
  font-family: var(--adyen-internal-text-title-font-family);
  font-weight: var(--adyen-internal-text-title-font-weight);
  line-height: var(--adyen-internal-text-title-line-height);
  letter-spacing: var(--adyen-internal-text-title-letter-spacing);
}

@container main (max-width: 680px) {
  ._typography-title_1kejo_50 {
    font-size: var(--adyen-internal-text-title-mobile-font-size);
    line-height: var(--adyen-internal-text-title-mobile-line-height);
  }
}

._typography-title-m_1kejo_65 {
  font-size: var(--adyen-internal-text-title-m-font-size);
  font-family: var(--adyen-internal-text-title-m-font-family);
  font-weight: var(--adyen-internal-text-title-m-font-weight);
  line-height: var(--adyen-internal-text-title-m-line-height);
  letter-spacing: var(--adyen-internal-text-title-m-letter-spacing);
}

@container main (max-width: 680px) {
  ._typography-title-m_1kejo_65 {
    font-size: var(--adyen-internal-text-title-m-mobile-font-size);
    line-height: var(--adyen-internal-text-title-m-mobile-line-height);
  }
}

._typography-title-l_1kejo_80 {
  font-size: var(--adyen-internal-text-title-l-font-size);
  font-family: var(--adyen-internal-text-title-l-font-family);
  font-weight: var(--adyen-internal-text-title-l-font-weight);
  line-height: var(--adyen-internal-text-title-l-line-height);
  letter-spacing: var(--adyen-internal-text-title-l-letter-spacing);
}

@container main (max-width: 680px) {
  ._typography-title-l_1kejo_80 {
    font-size: var(--adyen-internal-text-title-l-mobile-font-size);
    line-height: var(--adyen-internal-text-title-l-mobile-line-height);
  }
}

._typography-primary_1kejo_95 {
  color: var(--adyen-internal-color-label-primary);
}

._typography-secondary_1kejo_99 {
  color: var(--adyen-internal-color-label-secondary);
}

._typography-tertiary_1kejo_103 {
  color: var(--adyen-internal-color-label-tertiary);
}

._typography-disabled_1kejo_107 {
  color: var(--adyen-internal-color-label-disabled);
}

._typography-success_1kejo_111 {
  color: var(--adyen-internal-color-label-success);
}

._typography-warning_1kejo_115 {
  color: var(--adyen-internal-color-label-warning);
}

._typography-critical_1kejo_119 {
  color: var(--adyen-internal-color-label-critical);
}

._typography-highlight_1kejo_123 {
  color: var(--adyen-internal-color-label-highlight);
}

._typography-inverse-primary_1kejo_127 {
  color: var(--adyen-internal-color-label-inverse-primary);
}

._typography-inverse-secondary_1kejo_131 {
  color: var(--adyen-internal-color-label-inverse-secondary);
}
._status_31vb0_1 {
  align-items: center;
  border-radius: var(--adyen-internal-border-radius-xl);
  display: inline-flex;
  padding: var(--adyen-internal-spacer-020);
}

._status-icon_31vb0_8 {
  height: 18px;
  width: 18px;
  padding: 1px;
}

._status-icon_31vb0_8 svg {
  height: 16px;
  width: 16px;
}

._status-text_31vb0_19 {
  font-size: var(--adyen-internal-text-caption-font-size);
  font-weight: var(--adyen-internal-text-caption-stronger-font-weight);
  line-height: var(--adyen-internal-text-caption-line-height);
  padding-left: var(--adyen-internal-spacer-020);
  padding-right: var(--adyen-internal-spacer-020);
}

._status-text-responsive_31vb0_27 {
  @container main (max-width: 480px) {
    display: none;
  }
}

._status-neutral_31vb0_33 {
  background-color: var(--adyen-internal-color-background-secondary);
  color: var(--adyen-internal-color-label-disabled);
  fill: var(--adyen-internal-color-label-disabled);
}

._status-neutral_31vb0_33 ._status-text_31vb0_19 {
  color: var(--adyen-internal-color-label-secondary);
}

._status-error_31vb0_43 {
  background-color: var(--adyen-internal-color-background-secondary);
  color: var(--adyen-internal-color-label-critical);
  fill: var(--adyen-internal-color-label-critical);
}

._status-warning_31vb0_49 {
  background-color: var(--adyen-internal-color-background-warning-weak);
  color: var(--adyen-internal-color-label-warning);
  fill: var(--adyen-internal-color-label-warning);
}

._status-success_31vb0_55 {
  background-color: var(--adyen-internal-color-background-success-weak);
}

._status-success_31vb0_55 ._status-text_31vb0_19 {
  color: var(--adyen-internal-color-label-primary);
}

._status-success_31vb0_55 ._status-icon_31vb0_8 {
  color: var(--adyen-internal-color-label-success);
  fill: var(--adyen-internal-color-label-success);
}
._skeleton_xa3xt_1 {
  width: 100%;
  height: 100%;
  background-color: var(--adyen-internal-color-outline-secondary);
  border-radius: var(--adyen-internal-border-radius-m);
  /* hidden for by 0.4 seconds to prevent quick flash of skeleton (to content) */
  opacity: 0;
  animation: 2s ease-in-out 0.4s infinite normal none running _skeleton_xa3xt_1;
}

._skeleton-circle_xa3xt_11 {
  border-radius: 50%;
}
._skeleton-text_xa3xt_14 {
  height: 1em !important;
  margin: 0.2em 0 !important;
}

@keyframes _skeleton_xa3xt_1 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
._accordion_1sg6i_1,
._accordion-summary_1sg6i_2 {
  color: var(--adyen-internal-color-label-primary);
  font-size: var(--adyen-internal-text-body-font-size);
  font-family: var(--adyen-internal-text-body-font-family);
  line-height: var(--adyen-internal-text-body-line-height);
  cursor: pointer;
}

._accordion_1sg6i_1 {
  background: none;
  border-radius: var(--adyen-internal-border-radius-l);
  margin-bottom: var(--adyen-internal-spacer-050);
}

._accordion-basic_1sg6i_16 {
  background-color: var(--adyen-internal-color-background-secondary);
}
._accordion-info_1sg6i_19 {
  background-color: var(--adyen-internal-color-background-highlight-weak);
}
._accordion-error_1sg6i_22 {
  background-color: var(--adyen-internal-color-background-critical-weak);
}
._accordion-warning_1sg6i_25 {
  background-color: var(--adyen-internal-color-background-warning-weak);
}
._accordion-success_1sg6i_28 {
  background-color: var(--adyen-internal-color-background-success-weak);
}
._accordion-narrow_1sg6i_31 ._accordion-summary_1sg6i_2 {
  padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-070);
}
._accordion-narrow_1sg6i_31 ._accordion-content_1sg6i_34 {
  padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-070)
    var(--adyen-internal-spacer-060);
}
._accordion-with-icon_1sg6i_38 ._accordion-content_1sg6i_34 {
  margin-left: var(--adyen-internal-spacer-080);
}

._accordion-summary_1sg6i_2 {
  display: flex;
  align-items: center;
  gap: var(--adyen-internal-spacer-050);
  padding: var(--adyen-internal-spacer-080);
  font-weight: var(--adyen-internal-text-title-font-weight);
  transition: margin 150ms ease-out;
  margin-bottom: var(--adyen-internal-spacer-000);
  border-radius: var(--adyen-internal-border-radius-l);
}

._accordion-summary_1sg6i_2 > ._accordion-arrow_1sg6i_53 {
  cursor: pointer;
  user-select: none;
  height: 1em;
}

._accordion-summary_1sg6i_2 > ._accordion-arrow-right_1sg6i_59 {
  margin-left: auto;
  margin-right: var(--adyen-internal-spacer-050);
}

._accordion_1sg6i_1[open] ._accordion-arrow_1sg6i_53 {
  transform: rotate(-180deg);
}
._accordion_1sg6i_1 summary::-webkit-details-marker {
  display: none;
}

._accordion-content_1sg6i_34 {
  cursor: auto;
  padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-080)
    var(--adyen-internal-spacer-080);
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: var(--adyen-internal-spacer-040);
}

._accordion_1sg6i_1[open] summary {
  margin-bottom: var(--adyen-internal-spacer-020);
  user-select: auto;
}
._loader-wrapper_xtjeo_1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--adyen-internal-spacer-040);
  height: 100%;
  justify-content: center;
}

._loader-text_xtjeo_10 {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

._loader-text-visible_xtjeo_18 {
  opacity: 1;
  transform: translateY(0);
}

@keyframes _fadeInText_xtjeo_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._loader_xtjeo_1 {
  animation: _rotateLoader_xtjeo_1 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  border-radius: 50%;
  border: var(--adyen-internal-border-default-l);
  border-top-color: var(--adyen-internal-color-outline-inverse-primary);
  height: 43px;
  width: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._loader-large_xtjeo_46 {
  height: 43px;
  width: 43px;
  max-width: 43px;
}

._loader-small_xtjeo_52 {
  border-width: 2px;
  height: 16px;
  width: 16px;
  max-width: 16px;
}

._loader-medium_xtjeo_59 {
  height: 28px;
  width: 28px;
  max-width: 28px;
}

._loader-xsmall_xtjeo_65 {
  border-width: 2px;
  height: 12px;
  width: 12px;
  max-width: 12px;
}

@keyframes _rotateLoader_xtjeo_1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
._button_1okkl_1 {
  border: 1px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--adyen-internal-text-body-font-family);
  font-size: var(--adyen-internal-text-body-font-size);
  font-weight: var(--adyen-internal-text-body-stronger-font-weight);
  line-height: 1;
  min-height: var(--adyen-internal-tap-target);
  min-width: var(--adyen-internal-tap-target);
  outline-offset: var(--adyen-internal-focus-ring-spacer);
  outline: var(--adyen-internal-focus-ring-outline) solid transparent;
  overflow: hidden;
  padding: var(--adyen-internal-spacer-000);
  position: relative;
  transition: var(--adyen-internal-animation-duration-slow);
  white-space: nowrap;
}

._button_1okkl_1:active {
  transform: scale(0.95);
}

._button_1okkl_1:focus-visible {
  outline-color: var(--adyen-internal-focus-ring-color);
}

._button_1okkl_1[disabled] {
  pointer-events: none;
}

._button-full-width_1okkl_32 {
  width: 100%;
}

._button-label_1okkl_36 {
  align-items: center;
  display: flex;
  gap: var(--adyen-internal-spacer-040);
  justify-content: center;
}

._button-label-padding_1okkl_43 {
  padding: var(--adyen-internal-spacer-040) var(--adyen-internal-spacer-070);
}

._button-shape-rectangle_1okkl_47 {
  border-radius: var(--adyen-internal-border-radius-m);
}

._button-shape-circle_1okkl_51 {
  border-radius: 50%;
}

._button-variant-primary_1okkl_55 {
  background-color: var(--adyen-internal-color-background-inverse-primary);
  color: var(--adyen-internal-color-label-inverse-primary);
  fill: var(--adyen-internal-color-label-inverse-primary);
}

@media (hover: hover) {
  ._button-variant-primary_1okkl_55:hover {
    background-color: var(--adyen-internal-color-background-inverse-primary-hover);
    color: var(--adyen-internal-color-label-inverse-primary-hover);
    fill: var(--adyen-internal-color-label-inverse-primary-hover);
  }
}

._button-variant-primary_1okkl_55[disabled] {
  background-color: var(--adyen-internal-color-background-disabled);
  color: var(--adyen-internal-color-label-disabled);
  fill: var(--adyen-internal-color-label-disabled);
}

._button-variant-secondary_1okkl_75 {
  background-color: var(--adyen-internal-color-background-primary);
  color: var(--adyen-internal-color-label-primary);
  fill: var(--adyen-internal-color-label-primary);
  border: 1px solid var(--adyen-internal-color-outline-primary);
}

@media (hover: hover) {
  ._button-variant-secondary_1okkl_75:hover {
    background-color: var(--adyen-internal-color-background-primary-hover);
    border-color: var(--adyen-internal-color-outline-primary-hover);
    color: var(--adyen-internal-color-label-primary-hover);
    fill: var(--adyen-internal-color-label-primary-hover);
  }
}

._button-variant-secondary_1okkl_75[disabled] {
  border-color: var(--adyen-internal-color-outline-primary-disabled);
  color: var(--adyen-internal-color-label-disabled);
  fill: var(--adyen-internal-color-label-disabled);
}

._button-variant-tertiary_1okkl_97 {
  background-color: transparent;
  color: var(--adyen-internal-color-label-primary);
  fill: var(--adyen-internal-color-label-primary);
}

@media (hover: hover) {
  ._button-variant-tertiary_1okkl_97:hover {
    background-color: var(--adyen-internal-color-background-primary-hover);
    color: var(--adyen-internal-color-label-primary-hover);
    fill: var(--adyen-internal-color-label-primary-hover);
  }
}

._button-variant-tertiary_1okkl_97[disabled] {
  background-color: var(--adyen-internal-color-background-disabled);
  color: var(--adyen-internal-color-label-disabled);
  fill: var(--adyen-internal-color-label-disabled);
}

._button-variant-critical_1okkl_117 {
  background-color: var(--adyen-internal-color-background-critical-strong);
  color: var(--adyen-internal-color-label-on-color);
  fill: var(--adyen-internal-color-label-on-color);
}

@media (hover: hover) {
  ._button-variant-critical_1okkl_117:hover {
    background-color: var(--adyen-internal-color-background-critical-strong-hover);
  }
}

._button-variant-critical_1okkl_117[disabled] {
  background-color: var(--adyen-internal-color-background-disabled);
  color: var(--adyen-internal-color-label-disabled);
  fill: var(--adyen-internal-color-label-disabled);
}

._button-variant-link_1okkl_135 {
  background-color: transparent;
  color: var(--adyen-internal-color-label-primary);
  fill: var(--adyen-internal-color-label-primary);
  padding: var(--adyen-internal-spacer-000);
  text-decoration: underline;
  line-height: unset;
  min-height: unset;
}

@media (hover: hover) {
  ._button-variant-link_1okkl_135:hover {
    color: var(--adyen-internal-color-label-primary-hover);
    fill: var(--adyen-internal-color-label-primary-hover);
    text-decoration: none;
  }
}

._button-variant-surface_1okkl_153 {
  background-color: var(--adyen-internal-color-background-secondary);
  color: var(--adyen-internal-color-label-primary);
  fill: var(--adyen-internal-color-label-primary);
}

@supports (backdrop-filter: blur(10px)) {
  ._button-variant-surface_1okkl_153 {
    backdrop-filter: blur(10px);
    background-color: rgb(from var(--adyen-internal-color-background-secondary) r g b / 0.7);
  }
}

@media (hover: hover) {
  ._button-variant-surface_1okkl_153:hover {
    background-color: var(--adyen-internal-color-background-secondary-hover);
    color: var(--adyen-internal-color-label-primary-hover);
    fill: var(--adyen-internal-color-label-primary-hover);
  }
}

@media (hover: hover) {
  @supports (backdrop-filter: blur(10px)) {
    ._button-variant-surface_1okkl_153:hover {
      background-color: rgb(
        from var(--adyen-internal-color-background-secondary-hover) r g b / 0.7
      );
    }
  }
}

._button-variant-surface_1okkl_153[disabled] {
  background-color: var(--adyen-internal-color-background-secondary);
  color: var(--adyen-internal-color-label-disabled);
  fill: var(--adyen-internal-color-label-disabled);
}

._button-spinner_1okkl_190 {
  animation: _present-spinner_1okkl_1 400ms var(--adyen-internal-animation-easing-enter);
  background-color: inherit;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

@keyframes _present-spinner_1okkl_1 {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
._stack-layout_18zj6_1 {
  display: flex;
  flex-direction: column;
}

._stack-layout-gap-xs_18zj6_6 {
  gap: var(--adyen-internal-spacer-020);
}

._stack-layout-gap-s_18zj6_10 {
  gap: var(--adyen-internal-spacer-040);
}

._stack-layout-gap-m_18zj6_14 {
  gap: var(--adyen-internal-spacer-070);
}

._stack-layout-gap-l_18zj6_18 {
  gap: var(--adyen-internal-spacer-100);
}

._stack-layout-gap-xl_18zj6_22 {
  gap: var(--adyen-internal-spacer-140);
}

._stack-layout-left_18zj6_26 {
  align-items: flex-start;
}

._stack-layout-center_18zj6_30 {
  align-items: center;
}

._stack-layout-right_18zj6_34 {
  align-items: flex-end;
}

._stack-layout-item_18zj6_38 {
  flex-grow: 1;
  width: 100%;
}

@container main (min-width: 480px) {
  ._stack-layout-horizontal_18zj6_44 {
    align-items: flex-start;
    flex-direction: row;
  }

  ._stack-layout-left-horizontal_18zj6_49 {
    justify-content: flex-start;
  }

  ._stack-layout-center-horizontal_18zj6_53 {
    justify-content: center;
  }

  ._stack-layout-right-horizontal_18zj6_57 {
    justify-content: flex-end;
  }
}
/* utility-classes.css */
.u-width-full {
  width: 100% !important;
}
.u-width-half {
  width: 50% !important;
}

/* Topmost/root container class */
.adyen-kyc-ui-element-container-wrapper {
  width: 100%;
  overflow: auto;

  /**
  * 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-kyc-ui-element-container-wrapper *,
.adyen-kyc-ui-element-container-wrapper *::after,
.adyen-kyc-ui-element-container-wrapper *::before {
  box-sizing: border-box;
}

.adyen-kyc-ui-element-container {
  background-color: var(--adyen-internal-color-background-primary);
  position: relative;
  padding: var(--adyen-internal-spacer-100);
  border-radius: var(--adyen-internal-border-radius-m);

  /* Base typography styling */
  font-family: var(--adyen-internal-text-body-font-family);
  font-size: var(--adyen-internal-text-body-font-size);
  font-weight: var(--adyen-internal-text-body-font-weight);
  line-height: var(--adyen-internal-text-body-line-height);
  color: var(--adyen-internal-color-label-primary);
}

.adyen-kyc-ui-element-container p,
.adyen-kyc-ui-element-container ol,
.adyen-kyc-ui-element-container ul {
  margin-bottom: 0;
  margin-top: 0;
}

.adyen-kyc-ui-element-container ul,
.adyen-kyc-ui-element-container ol {
  padding-left: 1.5em;
}

@container main (max-width: 680px) {
  .adyen-kyc-ui-element-container {
    padding: var(--adyen-internal-spacer-070);
  }
}

:host {
  width: 100%; /* fills width when the container is display: flex */
}

/**
 * :root is needed for non-web components, while :host for web components (TODO: change on v4)
 * Token default values are defined in variables.css (src/style/variables.css).
 *
 * The `internal` part matches how we use css variables in the code
 * The `sdk` part is how consumers customize it from outside our code
 * The bare value is the fallback, used when the variable was not customized
 *
 * The reason we have `internal` and `sdk` is because doing something like:
 * --color: var(--color, #0f0) would create a loop, and the browser ignores it.
 *
 */
:root,
:host {
  /** Setting font-family by default to inherit, unless specified otherwise */
  --adyen-internal-text-rich-text-code-font-family: var(
    --adyen-sdk-text-rich-text-code-font-family,
    inherit
  );
  --adyen-internal-text-caption-font-family: var(--adyen-sdk-text-caption-font-family, inherit);
  --adyen-internal-text-caption-font-family-secondary: var(
    --adyen-sdk-text-caption-font-family-secondary,
    inherit
  );
  --adyen-internal-text-body-font-family: var(--adyen-sdk-text-body-font-family, inherit);
  --adyen-internal-text-body-font-family-secondary: var(
    --adyen-sdk-text-body-font-family-secondary,
    inherit
  );
  --adyen-internal-text-subtitle-font-family: var(--adyen-sdk-text-subtitle-font-family, inherit);
  --adyen-internal-text-title-font-family: var(--adyen-sdk-text-title-font-family, inherit);
  --adyen-internal-text-title-font-family-secondary: var(
    --adyen-sdk-text-title-font-family-secondary,
    inherit
  );
  --adyen-internal-text-title-m-font-family: var(--adyen-sdk-text-title-m-font-family, inherit);
  --adyen-internal-text-title-m-font-family-secondary: var(
    --adyen-sdk-text-title-m-font-family-secondary,
    inherit
  );
  --adyen-internal-text-title-l-font-family: var(--adyen-sdk-text-title-l-font-family, inherit);
  --adyen-internal-text-title-l-font-family-secondary: var(
    --adyen-sdk-text-title-l-font-family-secondary,
    inherit
  );

  --adyen-internal-tap-target: 44px;

  --adyen-internal-border-default-s: var(--adyen-internal-border-width-s) solid
    var(--adyen-internal-color-outline-primary);
  --adyen-internal-border-default-m: var(--adyen-internal-border-width-m) solid
    var(--adyen-internal-color-outline-primary);
  --adyen-internal-border-default-l: var(--adyen-internal-border-width-l) solid
    var(--adyen-internal-color-outline-primary);
}

.u-screen-reader-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
/* Flex */

.u-display-flex {
  display: flex !important;
}

.u-display-inline-flex {
  display: inline-flex !important;
}

.u-flex-direction-row {
  flex-direction: row !important;
}

.u-flex-direction-row-reverse {
  flex-direction: row-reverse !important;
}

.u-flex-direction-column {
  flex-direction: column !important;
}

.u-flex-direction-column-reverse {
  flex-direction: column-reverse !important;
}

.u-flex-wrap-wrap {
  flex-wrap: wrap !important;
}

.u-flex-wrap-nowrap {
  flex-wrap: nowrap !important;
}

.u-align-items-start {
  align-items: start !important;
}

.u-align-items-flex-start {
  align-items: flex-start !important;
}

.u-align-items-flex-end {
  align-items: flex-end !important;
}

.u-align-items-center {
  align-items: center !important;
}

.u-align-items-stretch {
  align-items: stretch !important;
}

.u-align-items-baseline {
  align-items: baseline !important;
}

.u-align-items-end {
  align-items: end !important;
}

.u-justify-content-center {
  justify-content: center !important;
}

.u-justify-content-flex-start {
  justify-content: flex-start !important;
}

.u-justify-content-flex-end {
  justify-content: flex-end !important;
}

.u-justify-content-start {
  justify-content: start !important;
}

.u-justify-content-end {
  justify-content: end !important;
}

.u-justify-content-left {
  justify-content: left !important;
}

.u-justify-content-right {
  justify-content: right !important;
}

.u-justify-content-space-between {
  justify-content: space-between !important;
}

.u-justify-content-space-around {
  justify-content: space-around !important;
}

.u-justify-content-space-evenly {
  justify-content: space-evenly !important;
}

.u-justify-content-stretch {
  justify-content: stretch !important;
}

.u-flex-1 {
  flex: 1 !important;
}

.u-flex-2 {
  flex: 2 !important;
}

.u-flex-3 {
  flex: 3 !important;
}

.u-flex-4 {
  flex: 4 !important;
}

/* Spacing */

.u-margin-auto {
  margin: auto !important;
}

.u-margin-bottom-auto {
  margin-bottom: auto !important;
}

.u-margin-left-auto {
  margin-left: auto !important;
}

.u-margin-right-auto {
  margin-right: auto !important;
}

.u-margin-top-auto {
  margin-top: auto !important;
}

.u-margin-x-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.u-margin-y-auto {
  margin-bottom: auto !important;
  margin-top: auto !important;
}

.u-margin-0 {
  margin: var(--adyen-internal-spacer-000) !important;
}

.u-margin-bottom-0 {
  margin-bottom: var(--adyen-internal-spacer-000) !important;
}

.u-margin-left-0 {
  margin-left: var(--adyen-internal-spacer-000) !important;
}

.u-margin-right-0 {
  margin-right: var(--adyen-internal-spacer-000) !important;
}

.u-margin-top-0 {
  margin-top: var(--adyen-internal-spacer-000) !important;
}

.u-margin-x-0 {
  margin-left: var(--adyen-internal-spacer-000) !important;
  margin-right: var(--adyen-internal-spacer-000) !important;
}

.u-margin-y-0 {
  margin-bottom: var(--adyen-internal-spacer-000) !important;
  margin-top: var(--adyen-internal-spacer-000) !important;
}

.u-margin-2 {
  margin: var(--adyen-internal-spacer-010) !important;
}

.u-margin-bottom-2 {
  margin-bottom: var(--adyen-internal-spacer-010) !important;
}

.u-margin-left-2 {
  margin-left: var(--adyen-internal-spacer-010) !important;
}

.u-margin-right-2 {
  margin-right: var(--adyen-internal-spacer-010) !important;
}

.u-margin-top-2 {
  margin-top: var(--adyen-internal-spacer-010) !important;
}

.u-margin-x-2 {
  margin-left: var(--adyen-internal-spacer-010) !important;
  margin-right: var(--adyen-internal-spacer-010) !important;
}

.u-margin-y-2 {
  margin-bottom: var(--adyen-internal-spacer-010) !important;
  margin-top: var(--adyen-internal-spacer-010) !important;
}

.u-margin-4 {
  margin: var(--adyen-internal-spacer-020) !important;
}

.u-margin-bottom-4 {
  margin-bottom: var(--adyen-internal-spacer-020) !important;
}

.u-margin-left-4 {
  margin-left: var(--adyen-internal-spacer-020) !important;
}

.u-margin-right-4 {
  margin-right: var(--adyen-internal-spacer-020) !important;
}

.u-margin-top-4 {
  margin-top: var(--adyen-internal-spacer-020) !important;
}

.u-margin-x-4 {
  margin-left: var(--adyen-internal-spacer-020) !important;
  margin-right: var(--adyen-internal-spacer-020) !important;
}

.u-margin-y-4 {
  margin-bottom: var(--adyen-internal-spacer-020) !important;
  margin-top: var(--adyen-internal-spacer-020) !important;
}

.u-margin-6 {
  margin: var(--adyen-internal-spacer-030) !important;
}

.u-margin-bottom-6 {
  margin-bottom: var(--adyen-internal-spacer-030) !important;
}

.u-margin-left-6 {
  margin-left: var(--adyen-internal-spacer-030) !important;
}

.u-margin-right-6 {
  margin-right: var(--adyen-internal-spacer-030) !important;
}

.u-margin-top-6 {
  margin-top: var(--adyen-internal-spacer-030) !important;
}

.u-margin-x-6 {
  margin-left: var(--adyen-internal-spacer-030) !important;
  margin-right: var(--adyen-internal-spacer-030) !important;
}

.u-margin-y-6 {
  margin-bottom: var(--adyen-internal-spacer-030) !important;
  margin-top: var(--adyen-internal-spacer-030) !important;
}

.u-margin-8 {
  margin: var(--adyen-internal-spacer-040) !important;
}

.u-margin-bottom-8 {
  margin-bottom: var(--adyen-internal-spacer-040) !important;
}

.u-margin-left-8 {
  margin-left: var(--adyen-internal-spacer-040) !important;
}

.u-margin-right-8 {
  margin-right: var(--adyen-internal-spacer-040) !important;
}

.u-margin-top-8 {
  margin-top: var(--adyen-internal-spacer-040) !important;
}

.u-margin-x-8 {
  margin-left: var(--adyen-internal-spacer-040) !important;
  margin-right: var(--adyen-internal-spacer-040) !important;
}

.u-margin-y-8 {
  margin-bottom: var(--adyen-internal-spacer-040) !important;
  margin-top: var(--adyen-internal-spacer-040) !important;
}

.u-margin-10 {
  margin: var(--adyen-internal-spacer-050) !important;
}

.u-margin-bottom-10 {
  margin-bottom: var(--adyen-internal-spacer-050) !important;
}

.u-margin-left-10 {
  margin-left: var(--adyen-internal-spacer-050) !important;
}

.u-margin-right-10 {
  margin-right: var(--adyen-internal-spacer-050) !important;
}

.u-margin-top-10 {
  margin-top: var(--adyen-internal-spacer-050) !important;
}

.u-margin-x-10 {
  margin-left: var(--adyen-internal-spacer-050) !important;
  margin-right: var(--adyen-internal-spacer-050) !important;
}

.u-margin-y-10 {
  margin-bottom: var(--adyen-internal-spacer-050) !important;
  margin-top: var(--adyen-internal-spacer-050) !important;
}

.u-margin-12 {
  margin: var(--adyen-internal-spacer-060) !important;
}

.u-margin-bottom-12 {
  margin-bottom: var(--adyen-internal-spacer-060) !important;
}

.u-margin-left-12 {
  margin-left: var(--adyen-internal-spacer-060) !important;
}

.u-margin-right-12 {
  margin-right: var(--adyen-internal-spacer-060) !important;
}

.u-margin-top-12 {
  margin-top: var(--adyen-internal-spacer-060) !important;
}

.u-margin-x-12 {
  margin-left: var(--adyen-internal-spacer-060) !important;
  margin-right: var(--adyen-internal-spacer-060) !important;
}

.u-margin-y-12 {
  margin-bottom: var(--adyen-internal-spacer-060) !important;
  margin-top: var(--adyen-internal-spacer-060) !important;
}

.u-margin-16 {
  margin: var(--adyen-internal-spacer-070) !important;
}

.u-margin-bottom-16 {
  margin-bottom: var(--adyen-internal-spacer-070) !important;
}

.u-margin-left-16 {
  margin-left: var(--adyen-internal-spacer-070) !important;
}

.u-margin-right-16 {
  margin-right: var(--adyen-internal-spacer-070) !important;
}

.u-margin-top-16 {
  margin-top: var(--adyen-internal-spacer-070) !important;
}

.u-margin-x-16 {
  margin-left: var(--adyen-internal-spacer-070) !important;
  margin-right: var(--adyen-internal-spacer-070) !important;
}

.u-margin-y-16 {
  margin-bottom: var(--adyen-internal-spacer-070) !important;
  margin-top: var(--adyen-internal-spacer-070) !important;
}

.u-margin-20 {
  margin: var(--adyen-internal-spacer-080) !important;
}

.u-margin-bottom-20 {
  margin-bottom: var(--adyen-internal-spacer-080) !important;
}

.u-margin-left-20 {
  margin-left: var(--adyen-internal-spacer-080) !important;
}

.u-margin-right-20 {
  margin-right: var(--adyen-internal-spacer-080) !important;
}

.u-margin-top-20 {
  margin-top: var(--adyen-internal-spacer-080) !important;
}

.u-margin-x-20 {
  margin-left: var(--adyen-internal-spacer-080) !important;
  margin-right: var(--adyen-internal-spacer-080) !important;
}

.u-margin-y-20 {
  margin-bottom: var(--adyen-internal-spacer-080) !important;
  margin-top: var(--adyen-internal-spacer-080) !important;
}

.u-margin-24 {
  margin: var(--adyen-internal-spacer-090) !important;
}

.u-margin-bottom-24 {
  margin-bottom: var(--adyen-internal-spacer-090) !important;
}

.u-margin-left-24 {
  margin-left: var(--adyen-internal-spacer-090) !important;
}

.u-margin-right-24 {
  margin-right: var(--adyen-internal-spacer-090) !important;
}

.u-margin-top-24 {
  margin-top: var(--adyen-internal-spacer-090) !important;
}

.u-margin-x-24 {
  margin-left: var(--adyen-internal-spacer-090) !important;
  margin-right: var(--adyen-internal-spacer-090) !important;
}

.u-margin-y-24 {
  margin-bottom: var(--adyen-internal-spacer-090) !important;
  margin-top: var(--adyen-internal-spacer-090) !important;
}

.u-margin-32 {
  margin: var(--adyen-internal-spacer-100) !important;
}

.u-margin-bottom-32 {
  margin-bottom: var(--adyen-internal-spacer-100) !important;
}

.u-margin-left-32 {
  margin-left: var(--adyen-internal-spacer-100) !important;
}

.u-margin-right-32 {
  margin-right: var(--adyen-internal-spacer-100) !important;
}

.u-margin-top-32 {
  margin-top: var(--adyen-internal-spacer-100) !important;
}

.u-margin-x-32 {
  margin-left: var(--adyen-internal-spacer-100) !important;
  margin-right: var(--adyen-internal-spacer-100) !important;
}

.u-margin-y-32 {
  margin-bottom: var(--adyen-internal-spacer-100) !important;
  margin-top: var(--adyen-internal-spacer-100) !important;
}

.u-margin-40 {
  margin: var(--adyen-internal-spacer-110) !important;
}

.u-margin-bottom-40 {
  margin-bottom: var(--adyen-internal-spacer-110) !important;
}

.u-margin-left-40 {
  margin-left: var(--adyen-internal-spacer-110) !important;
}

.u-margin-right-40 {
  margin-right: var(--adyen-internal-spacer-110) !important;
}

.u-margin-top-40 {
  margin-top: var(--adyen-internal-spacer-110) !important;
}

.u-margin-x-40 {
  margin-left: var(--adyen-internal-spacer-110) !important;
  margin-right: var(--adyen-internal-spacer-110) !important;
}

.u-margin-y-40 {
  margin-bottom: var(--adyen-internal-spacer-110) !important;
  margin-top: var(--adyen-internal-spacer-110) !important;
}

.u-margin-48 {
  margin: var(--adyen-internal-spacer-120) !important;
}

.u-margin-bottom-48 {
  margin-bottom: var(--adyen-internal-spacer-120) !important;
}

.u-margin-left-48 {
  margin-left: var(--adyen-internal-spacer-120) !important;
}

.u-margin-right-48 {
  margin-right: var(--adyen-internal-spacer-120) !important;
}

.u-margin-top-48 {
  margin-top: var(--adyen-internal-spacer-120) !important;
}

.u-margin-x-48 {
  margin-left: var(--adyen-internal-spacer-120) !important;
  margin-right: var(--adyen-internal-spacer-120) !important;
}

.u-margin-y-48 {
  margin-bottom: var(--adyen-internal-spacer-120) !important;
  margin-top: var(--adyen-internal-spacer-120) !important;
}
/**
 * :root is needed for non-web components, while :host for web components (TODO: change on v4)
 * Token default values are defined in variables.css (src/style/variables.css).
 *
 * The `internal` part matches how we use css variables in the code
 * The `sdk` part is how consumers customize it from outside our code
 * The bare value is the fallback, used when the variable was not customized
 *
 * The reason we have `internal` and `sdk` is because doing something like:
 * --color: var(--color, #0f0) would create a loop, and the browser ignores it.
 *
 */
:root,
:host {
  --adyen-internal-spacer-090: var(--adyen-sdk-spacer-090, 24px);
  --adyen-internal-spacer-080: var(--adyen-sdk-spacer-080, 20px);
  --adyen-internal-spacer-070: var(--adyen-sdk-spacer-070, 16px);
  --adyen-internal-spacer-060: var(--adyen-sdk-spacer-060, 12px);
  --adyen-internal-spacer-050: var(--adyen-sdk-spacer-050, 10px);
  --adyen-internal-spacer-040: var(--adyen-sdk-spacer-040, 8px);
  --adyen-internal-spacer-030: var(--adyen-sdk-spacer-030, 6px);
  --adyen-internal-spacer-020: var(--adyen-sdk-spacer-020, 4px);
  --adyen-internal-spacer-010: var(--adyen-sdk-spacer-010, 2px);
  --adyen-internal-spacer-000: var(--adyen-sdk-spacer-000, 0px);
  --adyen-internal-spacer-140: var(--adyen-sdk-spacer-140, 64px);
  --adyen-internal-spacer-130: var(--adyen-sdk-spacer-130, 56px);
  --adyen-internal-spacer-120: var(--adyen-sdk-spacer-120, 48px);
  --adyen-internal-spacer-110: var(--adyen-sdk-spacer-110, 40px);
  --adyen-internal-spacer-100: var(--adyen-sdk-spacer-100, 32px);
  --adyen-internal-shadow-high-border: var(
    --adyen-sdk-shadow-high-border,
    0px 18px 36px rgba(0, 18, 34, 0.12),
    0px 4px 8px rgba(0, 18, 34, 0.06),
    0px 0px 0px 1px rgba(218, 221, 223, 1)
  );
  --adyen-internal-shadow-medium-border: var(
    --adyen-sdk-shadow-medium-border,
    0px 6px 12px rgba(0, 18, 34, 0.08),
    0px 2px 4px rgba(0, 18, 34, 0.04),
    0px 0px 0px 1px rgba(218, 221, 223, 1)
  );
  --adyen-internal-shadow-low-border: var(
    --adyen-sdk-shadow-low-border,
    0px 2px 4px rgba(0, 18, 34, 0.04),
    0px 1px 2px rgba(0, 18, 34, 0.02),
    0px 0px 0px 1px rgba(218, 221, 223, 1)
  );
  --adyen-internal-shadow-high: var(
    --adyen-sdk-shadow-high,
    0px 18px 36px rgba(0, 18, 34, 0.12),
    0px 4px 8px rgba(0, 18, 34, 0.06)
  );
  --adyen-internal-shadow-medium: var(
    --adyen-sdk-shadow-medium,
    0px 6px 12px rgba(0, 18, 34, 0.08),
    0px 2px 4px rgba(0, 18, 34, 0.04)
  );
  --adyen-internal-shadow-low: var(
    --adyen-sdk-shadow-low,
    0px 2px 4px rgba(0, 18, 34, 0.04),
    0px 1px 2px rgba(0, 18, 34, 0.02)
  );
  --adyen-internal-media-query-xxl: var(--adyen-sdk-media-query-xxl, 1536px);
  --adyen-internal-media-query-xl-max: var(--adyen-sdk-media-query-xl-max, 1535px);
  --adyen-internal-media-query-xl-min: var(--adyen-sdk-media-query-xl-min, 1280px);
  --adyen-internal-media-query-l-max: var(--adyen-sdk-media-query-l-max, 1279px);
  --adyen-internal-media-query-l-min: var(--adyen-sdk-media-query-l-min, 768px);
  --adyen-internal-media-query-m-max: var(--adyen-sdk-media-query-m-max, 767px);
  --adyen-internal-media-query-m-min: var(--adyen-sdk-media-query-m-min, 500px);
  --adyen-internal-media-query-s-max: var(--adyen-sdk-media-query-s-max, 499px);
  --adyen-internal-media-query-s-min: var(--adyen-sdk-media-query-s-min, 376px);
  --adyen-internal-media-query-xs-max: var(--adyen-sdk-media-query-xs-max, 375px);
  --adyen-internal-media-query-xs-min: var(--adyen-sdk-media-query-xs-min, 0px);
  --adyen-internal-border-width-attention: var(--adyen-sdk-border-width-attention, 1.5px);
  --adyen-internal-border-width-l: var(--adyen-sdk-border-width-l, 3px);
  --adyen-internal-border-width-m: var(--adyen-sdk-border-width-m, 2px);
  --adyen-internal-border-width-s: var(--adyen-sdk-border-width-s, 1px);
  --adyen-internal-border-radius-xl: var(--adyen-sdk-border-radius-xl, 24px);
  --adyen-internal-border-radius-l: var(--adyen-sdk-border-radius-l, 12px);
  --adyen-internal-border-radius-m: var(--adyen-sdk-border-radius-m, 8px);
  --adyen-internal-border-radius-s: var(--adyen-sdk-border-radius-s, 4px);
  --adyen-internal-border-radius-xs: var(--adyen-sdk-border-radius-xs, 2px);
  --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
  --adyen-internal-animation-duration-moderate: var(--adyen-sdk-animation-duration-moderate, 150ms);
  --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
  --adyen-internal-animation-easing-linear: var(--adyen-sdk-animation-easing-linear, linear);
  --adyen-internal-animation-easing-exit: var(
    --adyen-sdk-animation-easing-exit,
    cubic-bezier(0.4, 0, 1, 1)
  );
  --adyen-internal-animation-easing-enter: var(
    --adyen-sdk-animation-easing-enter,
    cubic-bezier(0.12, 0.6, 0.4, 0.95)
  );
  --adyen-internal-animation-easing-standard: var(
    --adyen-sdk-animation-easing-standard,
    cubic-bezier(0.2, 0, 0.4, 0.9)
  );
  --adyen-internal-z-index-local-tier-4: var(--adyen-sdk-z-index-local-tier-4, 4);
  --adyen-internal-z-index-local-tier-3: var(--adyen-sdk-z-index-local-tier-3, 3);
  --adyen-internal-z-index-local-tier-2: var(--adyen-sdk-z-index-local-tier-2, 2);
  --adyen-internal-z-index-local-tier-1: var(--adyen-sdk-z-index-local-tier-1, 1);
  --adyen-internal-z-index-global-instant-interaction: var(
    --adyen-sdk-z-index-global-instant-interaction,
    15
  );
  --adyen-internal-z-index-global-navigation: var(--adyen-sdk-z-index-global-navigation, 10);
  --adyen-internal-z-index-global-elevated: var(--adyen-sdk-z-index-global-elevated, 5);
  --adyen-internal-z-index-global-screen: var(--adyen-sdk-z-index-global-screen, auto);
  --adyen-internal-text-title-l-mobile-line-height: var(
    --adyen-sdk-text-title-l-mobile-line-height,
    30px
  );
  --adyen-internal-text-title-l-mobile-font-size: var(
    --adyen-sdk-text-title-l-mobile-font-size,
    20px
  );
  --adyen-internal-text-title-l-letter-spacing: var(--adyen-sdk-text-title-l-letter-spacing, 0);
  --adyen-internal-text-title-l-line-height: var(--adyen-sdk-text-title-l-line-height, 34px);
  --adyen-internal-text-title-l-font-weight: var(--adyen-sdk-text-title-l-font-weight, 600);
  --adyen-internal-text-title-l-font-size: var(--adyen-sdk-text-title-l-font-size, 24px);
  --adyen-internal-text-title-l-font-family-secondary: var(
    --adyen-sdk-text-title-l-font-family-secondary,
    'Adyen Mono',
    'Roboto Mono',
    'Oxygen Mono',
    'IBM Plex Mono',
    'Courier New',
    monospace
  );
  --adyen-internal-text-title-l-font-family: var(
    --adyen-sdk-text-title-l-font-family,
    'Adyen Variable',
    Roboto,
    Oxygen,
    'Open Sans',
    'Helvetica Neue',
    Arial,
    sans-serif
  );
  --adyen-internal-text-title-m-mobile-line-height: var(
    --adyen-sdk-text-title-m-mobile-line-height,
    28px
  );
  --adyen-internal-text-title-m-mobile-font-size: var(
    --adyen-sdk-text-title-m-mobile-font-size,
    18px
  );
  --adyen-internal-text-title-m-letter-spacing: var(--adyen-sdk-text-title-m-letter-spacing, 0);
  --adyen-internal-text-title-m-line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
  --adyen-internal-text-title-m-font-weight: var(--adyen-sdk-text-title-m-font-weight, 600);
  --adyen-internal-text-title-m-font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
  --adyen-internal-text-title-m-font-family-secondary: var(
    --adyen-sdk-text-title-m-font-family-secondary,
    'Adyen Mono',
    'Roboto Mono',
    'Oxygen Mono',
    'IBM Plex Mono',
    'Courier New',
    monospace
  );
  --adyen-internal-text-title-m-font-family: var(
    --adyen-sdk-text-title-m-font-family,
    'Adyen Variable',
    Roboto,
    Oxygen,
    'Open Sans',
    'Helvetica Neue',
    Arial,
    sans-serif
  );
  --adyen-internal-text-title-mobile-line-height: var(
    --adyen-sdk-text-title-mobile-line-height,
    26px
  );
  --adyen-internal-text-title-mobile-font-size: var(--adyen-sdk-text-title-mobile-font-size, 16px);
  --adyen-internal-text-title-letter-spacing: var(--adyen-sdk-text-title-letter-spacing, 0);
  --adyen-internal-text-title-line-height: var(--adyen-sdk-text-title-line-height, 26px);
  --adyen-internal-text-title-font-weight: var(--adyen-sdk-text-title-font-weight, 600);
  --adyen-internal-text-title-font-size: var(--adyen-sdk-text-title-font-size, 16px);
  --adyen-internal-text-title-font-family-secondary: var(
    --adyen-sdk-text-title-font-family-secondary,
    'Adyen Mono',
    'Roboto Mono',
    'Oxygen Mono',
    'IBM Plex Mono',
    'Courier New',
    monospace
  );
  --adyen-internal-text-title-font-family: var(
    --adyen-sdk-text-title-font-family,
    'Adyen Variable',
    Roboto,
    Oxygen,
    'Open Sans',
    'Helvetica Neue',
    Arial,
    sans-serif
  );
  --adyen-internal-text-subtitle-stronger-font-weight: var(
    --adyen-sdk-text-subtitle-stronger-font-weight,
    600
  );
  --adyen-internal-text-subtitle-letter-spacing: var(--adyen-sdk-text-subtitle-letter-spacing, 0);
  --adyen-internal-text-subtitle-line-height: var(--adyen-sdk-text-subtitle-line-height, 26px);
  --adyen-internal-text-subtitle-font-weight: var(--adyen-sdk-text-subtitle-font-weight, 500);
  --adyen-internal-text-subtitle-font-size: var(--adyen-sdk-text-subtitle-font-size, 16px);
  --adyen-internal-text-subtitle-font-family: var(
    --adyen-sdk-text-subtitle-font-family,
    'Adyen Variable',
    Roboto,
    Oxygen,
    'Open Sans',
    'Helvetica Neue',
    Arial,
    sans-serif
  );
  --adyen-internal-text-body-strongest-wide-line-height: var(
    --adyen-sdk-text-body-strongest-wide-line-height,
    24px
  );
  --adyen-internal-text-body-strongest-wide-font-weight: var(
    --adyen-sdk-text-body-strongest-wide-font-weight,
    600
  );
  --adyen-internal-text-body-strongest-font-weight: var(
    --adyen-sdk-text-body-strongest-font-weight,
    600
  );
  --adyen-internal-text-body-stronger-wide-line-height: var(
    --adyen-sdk-text-body-stronger-wide-line-height,
    24px
  );
  --adyen-internal-text-body-stronger-wide-font-weight: var(
    --adyen-sdk-text-body-stronger-wide-font-weight,
    500
  );
  --adyen-internal-text-body-stronger-font-weight: var(
    --adyen-sdk-text-body-stronger-font-weight,
    500
  );
  --adyen-internal-text-body-wide-line-height: var(--adyen-sdk-text-body-wide-line-height, 24px);
  --adyen-internal-text-body-letter-spacing: var(--adyen-sdk-text-body-letter-spacing, 0);
  --adyen-internal-text-body-line-height: var(--adyen-sdk-text-body-line-height, 20px);
  --adyen-internal-text-body-font-weight: var(--adyen-sdk-text-body-font-weight, 400);
  --adyen-internal-text-body-font-size: var(--adyen-sdk-text-body-font-size, 14px);
  --adyen-internal-text-body-font-family-secondary: var(
    --adyen-sdk-text-body-font-family-secondary,
    'Adyen Mono',
    'Roboto Mono',
    'Oxygen Mono',
    'IBM Plex Mono',
    'Courier New',
    monospace
  );
  --adyen-internal-text-body-font-family: var(
    --adyen-sdk-text-body-font-family,
    'Adyen Variable',
    Roboto,
    Oxygen,
    'Open Sans',
    'Helvetica Neue',
    Arial,
    sans-serif
  );
  --adyen-internal-text-caption-stronger-wide-line-height: var(
    --adyen-sdk-text-caption-stronger-wide-line-height,
    20px
  );
  --adyen-internal-text-caption-stronger-wide-font-weight: var(
    --adyen-sdk-text-caption-stronger-wide-font-weight,
    500
  );
  --adyen-internal-text-caption-stronger-font-weight: var(
    --adyen-sdk-text-caption-stronger-font-weight,
    500
  );
  --adyen-internal-text-caption-wide-line-height: var(
    --adyen-sdk-text-caption-wide-line-height,
    20px
  );
  --adyen-internal-text-caption-letter-spacing: var(--adyen-sdk-text-caption-letter-spacing, 0);
  --adyen-internal-text-caption-line-height: var(--adyen-sdk-text-caption-line-height, 18px);
  --adyen-internal-text-caption-font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
  --adyen-internal-text-caption-font-size: var(--adyen-sdk-text-caption-font-size, 12px);
  --adyen-internal-text-caption-font-family-secondary: var(
    --adyen-sdk-text-caption-font-family-secondary,
    'Adyen Mono',
    'Roboto Mono',
    'Oxygen Mono',
    'IBM Plex Mono',
    'Courier New',
    monospace
  );
  --adyen-internal-text-caption-font-family: var(
    --adyen-sdk-text-caption-font-family,
    'Adyen Variable',
    Roboto,
    Oxygen,
    'Open Sans',
    'Helvetica Neue',
    Arial,
    sans-serif
  );
  --adyen-internal-text-rich-text-caption-pre-line-height: var(
    --adyen-sdk-text-rich-text-caption-pre-line-height,
    20px
  );
  --adyen-internal-text-rich-text-table-caption-line-height: var(
    --adyen-sdk-text-rich-text-table-caption-line-height,
    20px
  );
  --adyen-internal-text-rich-text-table-header-font-weight: var(
    --adyen-sdk-text-rich-text-table-header-font-weight,
    700
  );
  --adyen-internal-text-rich-text-table-line-height: var(
    --adyen-sdk-text-rich-text-table-line-height,
    20px
  );
  --adyen-internal-text-rich-text-blockquote-font-weight: var(
    --adyen-sdk-text-rich-text-blockquote-font-weight,
    500
  );
  --adyen-internal-text-rich-text-pre-line-height: var(
    --adyen-sdk-text-rich-text-pre-line-height,
    24px
  );
  --adyen-internal-text-rich-text-code-font-weight: var(
    --adyen-sdk-text-rich-text-code-font-weight,
    500
  );
  --adyen-internal-text-rich-text-code-font-family: var(
    --adyen-sdk-text-rich-text-code-font-family,
    'Adyen Mono',
    'Roboto Mono',
    'Oxygen Mono',
    'IBM Plex Mono',
    'Courier New',
    monospace
  );
  --adyen-internal-text-rich-text-heading-font-weight: var(
    --adyen-sdk-text-rich-text-heading-font-weight,
    700
  );
  --adyen-internal-text-font-variant-numeric: var(--adyen-sdk-text-font-variant-numeric, normal);
  --adyen-internal-focus-ring-color: var(--adyen-sdk-focus-ring-color, rgba(15, 117, 220, 0.8));
  --adyen-internal-color-support-shadow: var(--adyen-sdk-color-support-shadow, #001222);
  --adyen-internal-color-support-overlay: var(--adyen-sdk-color-support-overlay, #001222);
  --adyen-internal-color-decorative-grey: var(--adyen-sdk-color-decorative-grey, #848d96);
  --adyen-internal-color-decorative-red: var(--adyen-sdk-color-decorative-red, #f73f01);
  --adyen-internal-color-decorative-orange: var(--adyen-sdk-color-decorative-orange, #f99300);
  --adyen-internal-color-decorative-yellow: var(--adyen-sdk-color-decorative-yellow, #f9c500);
  --adyen-internal-color-decorative-blue: var(--adyen-sdk-color-decorative-blue, #006bd7);
  --adyen-internal-color-decorative-green: var(--adyen-sdk-color-decorative-green, #00d16a);
  --adyen-internal-color-separator-inverse-secondary: var(
    --adyen-sdk-color-separator-inverse-secondary,
    #5c6874
  );
  --adyen-internal-color-separator-inverse-primary: var(
    --adyen-sdk-color-separator-inverse-primary,
    #2f3e4d
  );
  --adyen-internal-color-separator-secondary: var(--adyen-sdk-color-separator-secondary, #c8ccd0);
  --adyen-internal-color-separator-primary: var(--adyen-sdk-color-separator-primary, #dadddf);
  --adyen-internal-color-outline-inverse-critical-active: var(
    --adyen-sdk-color-outline-inverse-critical-active,
    #ffded3
  );
  --adyen-internal-color-outline-inverse-critical-hover: var(
    --adyen-sdk-color-outline-inverse-critical-hover,
    #ffbda6
  );
  --adyen-internal-color-outline-inverse-critical: var(
    --adyen-sdk-color-outline-inverse-critical,
    #ff9a78
  );
  --adyen-internal-color-outline-inve