@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.

.adyen-kyc-svg-icon {
  color: inherit;
  display: inline-flex;
  vertical-align: baseline;
  min-height: 16px;
  min-width: 16px;
}

.adyen-kyc-svg-icon svg {
  /* for safari */
  height: 100%;
}

.adyen-kyc-svg-icon svg path {
  fill: currentColor;
}

.adyen-kyc-svg-image {
  display: inline-block;
}
/* for container queries */
.adyen-kyc-typography {
  color: var(--adyen-internal-color-label-primary, #001222);
  font-family: var(--adyen-internal-text-body-font-family);
  font-size: var(--adyen-internal-text-body-font-size, 14px);
  font-weight: var(--adyen-internal-text-body-font-weight, 400);
  line-height: var(--adyen-internal-text-body-line-height, 20px);
  margin: var(--adyen-internal-spacer-000, 0px);
}
.adyen-kyc-typography--body {
  font-size: var(--adyen-internal-text-body-font-size, 14px);
  font-family: var(--adyen-internal-text-body-font-family);
  line-height: var(--adyen-internal-text-body-line-height, 20px);
  letter-spacing: var(--adyen-internal-text-body-letter-spacing, 0);
  font-weight: var(--adyen-internal-text-body-font-weight, 400);
}
.adyen-kyc-typography--body-stronger {
  font-size: var(--adyen-internal-text-body-font-size, 14px);
  font-family: var(--adyen-internal-text-body-font-family);
  line-height: var(--adyen-internal-text-body-line-height, 20px);
  letter-spacing: var(--adyen-internal-text-body-letter-spacing, 0);
  font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);
}
.adyen-kyc-typography--body-strongest {
  font-size: var(--adyen-internal-text-body-font-size, 14px);
  font-family: var(--adyen-internal-text-body-font-family);
  line-height: var(--adyen-internal-text-body-line-height, 20px);
  letter-spacing: var(--adyen-internal-text-body-letter-spacing, 0);
  font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);
}
.adyen-kyc-typography--caption {
  font-size: var(--adyen-internal-text-caption-font-size, 12px);
  font-family: var(--adyen-internal-text-caption-font-family);
  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
  line-height: var(--adyen-internal-text-caption-line-height, 18px);
  letter-spacing: var(--adyen-internal-text-caption-letter-spacing, 0);
  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
}
.adyen-kyc-typography--caption-stronger {
  font-size: var(--adyen-internal-text-caption-font-size, 12px);
  font-family: var(--adyen-internal-text-caption-font-family);
  font-weight: var(--adyen-internal-text-caption-font-weight, 400);
  line-height: var(--adyen-internal-text-caption-line-height, 18px);
  letter-spacing: var(--adyen-internal-text-caption-letter-spacing, 0);
  font-weight: var(--adyen-internal-text-caption-stronger-font-weight, 500);
}
.adyen-kyc-typography--title {
  font-size: var(--adyen-internal-text-title-font-size, 16px);
  font-family: var(--adyen-internal-text-title-font-family);
  font-weight: var(--adyen-internal-text-title-font-weight, 600);
  line-height: var(--adyen-internal-text-title-line-height, 26px);
  letter-spacing: var(--adyen-internal-text-title-letter-spacing, 0);
}
@container main (max-width: 680px) {
  .adyen-kyc-typography--title {
    font-size: var(--adyen-internal-text-title-mobile-font-size, 16px);
    line-height: var(--adyen-internal-text-title-mobile-line-height, 26px);
  }
}
.adyen-kyc-typography--title-m {
  font-size: var(--adyen-internal-text-title-m-font-size, 20px);
  font-family: var(--adyen-internal-text-title-m-font-family);
  font-weight: var(--adyen-internal-text-title-m-font-weight, 600);
  line-height: var(--adyen-internal-text-title-m-line-height, 30px);
  letter-spacing: var(--adyen-internal-text-title-m-letter-spacing, 0);
}
@container main (max-width: 680px) {
  .adyen-kyc-typography--title-m {
    font-size: var(--adyen-internal-text-title-m-mobile-font-size, 18px);
    line-height: var(--adyen-internal-text-title-m-mobile-line-height, 28px);
  }
}
.adyen-kyc-typography--title-l {
  font-size: var(--adyen-internal-text-title-l-font-size, 24px);
  font-family: var(--adyen-internal-text-title-l-font-family);
  font-weight: var(--adyen-internal-text-title-l-font-weight, 600);
  line-height: var(--adyen-internal-text-title-l-line-height, 34px);
  letter-spacing: var(--adyen-internal-text-title-l-letter-spacing, 0);
}
@container main (max-width: 680px) {
  .adyen-kyc-typography--title-l {
    font-size: var(--adyen-internal-text-title-l-mobile-font-size, 20px);
    line-height: var(--adyen-internal-text-title-l-mobile-line-height, 30px);
  }
}
.adyen-kyc-typography--primary {
  color: var(--adyen-internal-color-label-primary, #001222);
}
.adyen-kyc-typography--secondary {
  color: var(--adyen-internal-color-label-secondary, #5c6874);
}
.adyen-kyc-typography--tertiary {
  color: var(--adyen-internal-color-label-tertiary, #8c959d);
}
.adyen-kyc-typography--disabled {
  color: var(--adyen-internal-color-label-disabled, #8c959d);
}
.adyen-kyc-typography--success {
  color: var(--adyen-internal-color-label-success, #008845);
}
.adyen-kyc-typography--warning {
  color: var(--adyen-internal-color-label-warning, #ab6600);
}
.adyen-kyc-typography--critical {
  color: var(--adyen-internal-color-label-critical, #dc3801);
}
.adyen-kyc-typography--highlight {
  color: var(--adyen-internal-color-label-highlight, #0f75dc);
}
.adyen-kyc-typography--inverse-primary {
  color: var(--adyen-internal-color-label-inverse-primary, #ffffff);
}
.adyen-kyc-typography--inverse-secondary {
  color: var(--adyen-internal-color-label-inverse-secondary, #9da5ac);
}/* for container queries */
.adyen-kyc-dropin {
  background: var(--adyen-internal-color-background-primary, #ffffff);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.adyen-kyc-dropin-container {
  position: relative;
  min-height: 480px;
  transform: scale(1);
  width: 100%;
}

.adyen-kyc-dropin__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: calc(100% - 56px);
  overflow: auto;
}
@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 */
.adyen-kyc-dropin__content-main {
  display: flex;
  flex: 1;
  padding: var(--adyen-internal-spacer-070, 16px);
  width: 100%;
  box-sizing: border-box;
}
@container main (min-width: 680px) and (max-width: 1024px) {
  .adyen-kyc-dropin__content-main {
    padding: var(--adyen-internal-spacer-090, 24px);
  }
}
@container main (min-width: 1024px) {
  .adyen-kyc-dropin__content-main {
    padding: var(--adyen-internal-spacer-110, 40px);
  }
}

.adyen-kyc-dropin__main {
  border-radius: var(--adyen-internal-border-radius-m, 8px);
  width: 100%;
}.adyen-kyc-skeleton {
  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 adyen-kyc-skeleton;
}

.adyen-kyc-skeleton-circle {
  border-radius: 50%;
}
.adyen-kyc-skeleton-text {
  height: 1em !important;
  margin: 0.2em 0 !important;
}

@keyframes adyen-kyc-skeleton {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
.adyen-kyc-accordion,
.adyen-kyc-accordion-summary {
  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;
}

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

.adyen-kyc-accordion-basic {
  background-color: var(--adyen-internal-color-background-secondary);
}
.adyen-kyc-accordion-info {
  background-color: var(--adyen-internal-color-background-highlight-weak);
}
.adyen-kyc-accordion-error {
  background-color: var(--adyen-internal-color-background-critical-weak);
}
.adyen-kyc-accordion-warning {
  background-color: var(--adyen-internal-color-background-warning-weak);
}
.adyen-kyc-accordion-success {
  background-color: var(--adyen-internal-color-background-success-weak);
}
.adyen-kyc-accordion-narrow .adyen-kyc-accordion-summary {
  padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-070);
}
.adyen-kyc-accordion-narrow .adyen-kyc-accordion-content {
  padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-070)
    var(--adyen-internal-spacer-060);
}
.adyen-kyc-accordion-with-icon .adyen-kyc-accordion-content {
  margin-left: var(--adyen-internal-spacer-080);
}

.adyen-kyc-accordion-summary {
  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);
}

.adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow {
  cursor: pointer;
  user-select: none;
  height: 1em;
}

.adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow-right {
  margin-left: auto;
  margin-right: var(--adyen-internal-spacer-050);
}

.adyen-kyc-accordion[open] .adyen-kyc-accordion-arrow {
  transform: rotate(-180deg);
}
.adyen-kyc-accordion summary::-webkit-details-marker {
  display: none;
}

.adyen-kyc-accordion-content {
  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);
}

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

.adyen-kyc-loader-text {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.3s ease-in-out,
    transform 0.3s ease-in-out;
}

.adyen-kyc-loader-text-visible {
  opacity: 1;
  transform: translateY(0);
}

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

.adyen-kyc-loader {
  animation: adyen-kyc-rotateLoader 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;
}

.adyen-kyc-loader-large {
  height: 43px;
  width: 43px;
  max-width: 43px;
}

.adyen-kyc-loader-small {
  border-width: 2px;
  height: 16px;
  width: 16px;
  max-width: 16px;
}

.adyen-kyc-loader-medium {
  height: 28px;
  width: 28px;
  max-width: 28px;
}

.adyen-kyc-loader-xsmall {
  border-width: 2px;
  height: 12px;
  width: 12px;
  max-width: 12px;
}

@keyframes adyen-kyc-rotateLoader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.adyen-kyc-button {
  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, 14px);
  font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);
  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, 1px);
  outline: var(--adyen-internal-focus-ring-outline, 3px) solid transparent;
  overflow: hidden;
  padding: var(--adyen-internal-spacer-000, 0px);
  position: relative;
  transition: var(--adyen-internal-animation-duration-slow, 250ms);
  white-space: nowrap;
}
.adyen-kyc-button:active {
  transform: scale(0.95);
}
.adyen-kyc-button:focus-visible {
  outline-color: var(--adyen-internal-focus-ring-color, rgba(15, 117, 220, 0.8));
}
.adyen-kyc-button[disabled] {
  pointer-events: none;
}

.adyen-kyc-button-full-width {
  width: 100%;
}

.adyen-kyc-button-label {
  align-items: center;
  display: flex;
  gap: var(--adyen-internal-spacer-040, 8px);
  justify-content: center;
}

.adyen-kyc-button-label-padding {
  padding: var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-070, 16px);
}

.adyen-kyc-button-shape-rectangle {
  border-radius: var(--adyen-internal-border-radius-m, 8px);
}

.adyen-kyc-button-shape-circle {
  border-radius: 50%;
}

.adyen-kyc-button-variant-primary {
  background-color: var(--adyen-internal-color-background-inverse-primary, #001222);
  color: var(--adyen-internal-color-label-inverse-primary, #ffffff);
  fill: var(--adyen-internal-color-label-inverse-primary, #ffffff);
}
@media (hover: hover) {
  .adyen-kyc-button-variant-primary:hover {
    background-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);
    color: var(--adyen-internal-color-label-inverse-primary-hover, #f4f5f6);
    fill: var(--adyen-internal-color-label-inverse-primary-hover, #f4f5f6);
  }
}
.adyen-kyc-button-variant-primary[disabled] {
  background-color: var(--adyen-internal-color-background-disabled, #ecedef);
  color: var(--adyen-internal-color-label-disabled, #8c959d);
  fill: var(--adyen-internal-color-label-disabled, #8c959d);
}

.adyen-kyc-button-variant-secondary {
  background-color: var(--adyen-internal-color-background-primary, #ffffff);
  color: var(--adyen-internal-color-label-primary, #001222);
  fill: var(--adyen-internal-color-label-primary, #001222);
  border: 1px solid var(--adyen-internal-color-outline-primary, #dadddf);
}
@media (hover: hover) {
  .adyen-kyc-button-variant-secondary:hover {
    background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
    border-color: var(--adyen-internal-color-outline-primary-hover, #c8ccd0);
    color: var(--adyen-internal-color-label-primary-hover, #5c6874);
    fill: var(--adyen-internal-color-label-primary-hover, #5c6874);
  }
}
.adyen-kyc-button-variant-secondary[disabled] {
  color: var(--adyen-internal-color-label-disabled, #8c959d);
  fill: var(--adyen-internal-color-label-disabled, #8c959d);
}

.adyen-kyc-button-variant-tertiary {
  background-color: transparent;
  color: var(--adyen-internal-color-label-primary, #001222);
  fill: var(--adyen-internal-color-label-primary, #001222);
}
@media (hover: hover) {
  .adyen-kyc-button-variant-tertiary:hover {
    background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);
    color: var(--adyen-internal-color-label-primary-hover, #5c6874);
    fill: var(--adyen-internal-color-label-primary-hover, #5c6874);
  }
}
.adyen-kyc-button-variant-tertiary[disabled] {
  background-color: var(--adyen-internal-color-background-disabled, #ecedef);
  color: var(--adyen-internal-color-label-disabled, #8c959d);
  fill: var(--adyen-internal-color-label-disabled, #8c959d);
}

.adyen-kyc-button-variant-critical {
  background-color: var(--adyen-internal-color-background-critical-strong, #dc3801);
  color: var(--adyen-internal-color-label-on-color, #ffffff);
  fill: var(--adyen-internal-color-label-on-color, #ffffff);
}
@media (hover: hover) {
  .adyen-kyc-button-variant-critical:hover {
    background-color: var(--adyen-internal-color-background-critical-strong-hover, #c13101);
  }
}
.adyen-kyc-button-variant-critical[disabled] {
  background-color: var(--adyen-internal-color-background-disabled, #ecedef);
  color: var(--adyen-internal-color-label-disabled, #8c959d);
  fill: var(--adyen-internal-color-label-disabled, #8c959d);
}

.adyen-kyc-button-variant-link {
  background-color: transparent;
  color: var(--adyen-internal-color-label-primary, #001222);
  fill: var(--adyen-internal-color-label-primary, #001222);
  padding: var(--adyen-internal-spacer-000, 0px);
  text-decoration: underline;
  line-height: unset;
  min-height: unset;
}
@media (hover: hover) {
  .adyen-kyc-button-variant-link:hover {
    color: var(--adyen-internal-color-label-primary-hover, #5c6874);
    fill: var(--adyen-internal-color-label-primary-hover, #5c6874);
    text-decoration: none;
  }
}

.adyen-kyc-button-variant-surface {
  background-color: var(--adyen-internal-color-background-secondary);
  color: var(--adyen-internal-color-label-primary, #001222);
  fill: var(--adyen-internal-color-label-primary, #001222);
}
@supports (backdrop-filter: blur(10px)) {
  .adyen-kyc-button-variant-surface {
    backdrop-filter: blur(10px);
    background-color: rgb(from var(--adyen-internal-color-background-secondary) r g b/0.7);
  }
}
@media (hover: hover) {
  .adyen-kyc-button-variant-surface:hover {
    background-color: var(--adyen-internal-color-background-secondary-hover);
    color: var(--adyen-internal-color-label-primary-hover, #5c6874);
    fill: var(--adyen-internal-color-label-primary-hover, #5c6874);
  }
  @supports (backdrop-filter: blur(10px)) {
    .adyen-kyc-button-variant-surface:hover {
      background-color: rgb(from var(--adyen-internal-color-background-secondary-hover) r g b/0.7);
    }
  }
}
.adyen-kyc-button-variant-surface[disabled] {
  background-color: var(--adyen-internal-color-background-secondary);
  color: var(--adyen-internal-color-label-disabled, #8c959d);
  fill: var(--adyen-internal-color-label-disabled, #8c959d);
}

.adyen-kyc-button-spinner {
  animation: adyen-kyc-present-spinner 400ms var(--adyen-internal-animation-easing-enter, cubic-bezier(0.12, 0.6, 0.4, 0.95));
  background-color: inherit;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

@keyframes adyen-kyc-present-spinner {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}/* for container queries */
.adyen-kyc-status {
  align-items: center;
  border-radius: var(--adyen-internal-border-radius-xl);
  display: inline-flex;
  padding: var(--adyen-internal-spacer-020);
}

.adyen-kyc-status-icon {
  height: 18px;
  width: 18px;
  padding: 1px;
}

.adyen-kyc-status-icon svg {
  height: 16px;
  width: 16px;
}

.adyen-kyc-status-text {
  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);
}

@container main (max-width: 480px) {
  .adyen-kyc-status-text-responsive {
    display: none;
  }
}

.adyen-kyc-status-neutral {
  background-color: var(--adyen-internal-color-background-secondary);
  color: var(--adyen-internal-color-label-disabled);
  fill: var(--adyen-internal-color-label-disabled);
}

.adyen-kyc-status-neutral .adyen-kyc-status-text {
  color: var(--adyen-internal-color-label-secondary);
}

.adyen-kyc-status-error {
  background-color: var(--adyen-internal-color-background-secondary);
  color: var(--adyen-internal-color-label-critical);
  fill: var(--adyen-internal-color-label-critical);
}

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

.adyen-kyc-status-success {
  background-color: var(--adyen-internal-color-background-success-weak);
}

.adyen-kyc-status-success .adyen-kyc-status-text {
  color: var(--adyen-internal-color-label-primary);
}

.adyen-kyc-status-success .adyen-kyc-status-icon {
  color: var(--adyen-internal-color-label-success);
  fill: var(--adyen-internal-color-label-success);
}/* for container queries */
.adyen-kyc-stack-layout {
  display: flex;
  flex-direction: column;
}

.adyen-kyc-stack-layout-gap-xs {
  gap: var(--adyen-internal-spacer-020);
}

.adyen-kyc-stack-layout-gap-s {
  gap: var(--adyen-internal-spacer-040);
}

.adyen-kyc-stack-layout-gap-m {
  gap: var(--adyen-internal-spacer-070);
}

.adyen-kyc-stack-layout-gap-l {
  gap: var(--adyen-internal-spacer-100);
}

.adyen-kyc-stack-layout-gap-xl {
  gap: var(--adyen-internal-spacer-140);
}

.adyen-kyc-stack-layout-left {
  align-items: flex-start;
}

.adyen-kyc-stack-layout-center {
  align-items: center;
}

.adyen-kyc-stack-layout-right {
  align-items: flex-end;
}

.adyen-kyc-stack-layout-item {
  flex-grow: 1;
  width: 100%;
}

@container main (min-width: 480px) {
  .adyen-kyc-stack-layout-horizontal {
    align-items: flex-start;
    flex-direction: row;
  }
  .adyen-kyc-stack-layout-left-horizontal {
    justify-content: flex-start;
  }
  .adyen-kyc-stack-layout-center-horizontal {
    justify-content: center;
  }
  .adyen-kyc-stack-layout-right-horizontal {
    justify-content: flex-end;
  }
}.adyen-kyc-header {
  display: flex;
  flex-direction: column;
  gap: var(--adyen-internal-spacer-070);
}

.adyen-kyc-header-margin {
  margin-bottom: var(--adyen-internal-spacer-140);
}

.adyen-kyc-header-margin-secondary {
  margin-bottom: var(--adyen-internal-spacer-100);
}

.adyen-kyc-header-left {
  align-items: flex-start;
  text-align: left;
}

.adyen-kyc-header-center {
  align-items: center;
  text-align: center;
}

.adyen-kyc-header-right {
  align-items: flex-end;
  text-align: right;
}

.adyen-kyc-header-content {
  display: flex;
  flex-direction: column;
  gap: var(--adyen-internal-spacer-040);
}

.adyen-kyc-header-actions {
  max-width: 300px;
}

.adyen-kyc-header-title {
  color: var(--adyen-internal-color-label-primary);
  margin: 0;
}

.adyen-kyc-header-title-primary {
  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);
}

.adyen-kyc-header-title-secondary {
  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);
}

.adyen-kyc-header-description {
  font-size: var(--adyen-internal-text-body-font-size);
  font-family: var(--adyen-internal-text-body-font-family);
  font-weight: var(--adyen-internal-text-body-font-weight);
  line-height: var(--adyen-internal-text-body-line-height);
}

.adyen-kyc-header-description-primary {
  color: var(--adyen-internal-color-label-primary);
}

.adyen-kyc-header-description-secondary {
  color: var(--adyen-internal-color-label-secondary);
}
.adyen-kyc-alert {
  border-radius: var(--adyen-internal-border-radius-m);
  padding: var(--adyen-internal-spacer-070);
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: var(--adyen-internal-spacer-040);
  text-align: left;
}
.adyen-kyc-alert-without-icon .adyen-kyc-alert-explanation,
.adyen-kyc-alert-without-icon .adyen-kyc-alert-actions {
  margin: 0 var(--adyen-internal-spacer-070);
}

.adyen-kyc-alert-basic {
  background-color: var(--adyen-internal-color-background-secondary);
}

.adyen-kyc-alert-info {
  background-color: var(--adyen-internal-color-background-highlight-weak);
}

.adyen-kyc-alert-error {
  background-color: var(--adyen-internal-color-background-critical-weak);
}

.adyen-kyc-alert-warning {
  background-color: var(--adyen-internal-color-background-warning-weak);
}

.adyen-kyc-alert-success {
  background-color: var(--adyen-internal-color-background-success-weak);
}

.adyen-kyc-alert-header {
  align-items: flex-start;
  display: flex;
}

.adyen-kyc-alert-header-without-children {
  align-items: center;
}

.adyen-kyc-alert-icon {
  line-height: var(--adyen-internal-text-body-line-height);
  margin-top: var(--adyen-internal-spacer-010);
}
.adyen-kyc-alert-icon-info {
  color: var(--adyen-internal-color-background-highlight-strong);
}

.adyen-kyc-alert-icon-error {
  color: var(--adyen-internal-color-background-critical-strong);
}

.adyen-kyc-alert-icon-warning {
  color: var(--adyen-internal-color-background-warning-strong);
}

.adyen-kyc-alert-icon-success {
  color: var(--adyen-internal-color-background-success-strong);
}

.adyen-kyc-alert-title {
  flex-grow: 1;
  margin-left: var(--adyen-internal-spacer-070);
}

.adyen-kyc-alert-explanation {
  color: var(--adyen-internal-color-label-primary);
  font-size: var(--adyen-internal-text-body-font-size);
  margin: 0 var(--adyen-internal-spacer-100);
}

.adyen-kyc-alert-actions {
  display: flex;
  gap: var(--adyen-internal-spacer-070);
  text-align: left;
}
.adyen-kyc-toast {
  align-items: center;
  animation: adyen-kyc-present-toast 400ms var(--adyen-internal-animation-easing-enter);
  background-color: var(--adyen-internal-color-background-inverse-primary);
  border-radius: var(--adyen-internal-border-radius-l);
  border-top: 1px solid var(--adyen-internal-color-outline-inverse-primary);
  bottom: var(--adyen-internal-spacer-070);
  box-shadow: var(--adyen-internal-shadow-high);
  display: flex;
  fill: var(--adyen-internal-color-label-inverse-secondary);
  gap: var(--adyen-internal-spacer-040);
  justify-content: flex-start;
  left: 50%;
  max-width: 420px;
  padding: var(--adyen-internal-spacer-040);
  position: fixed;
  transform: translateX(-50%);
  width: 90vw;
  z-index: 1000;
}

.adyen-kyc-toast-image {
  align-items: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  max-height: 32px;
  max-width: 32px;
  padding: var(--adyen-internal-spacer-040);
}

.adyen-kyc-toast-image-success {
  color: var(--adyen-internal-color-decorative-green);
  fill: var(--adyen-internal-color-decorative-green);
}

.adyen-kyc-toast-image-error {
  color: var(--adyen-internal-color-label-critical);
  fill: var(--adyen-internal-color-label-critical);
}

.adyen-kyc-toast-label {
  align-items: center;
  color: var(--adyen-internal-color-label-inverse-primary);
  display: flex;
  flex-grow: 1;
  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);
  gap: var(--adyen-internal-spacer-040);
  line-height: var(--adyen-internal-text-body-line-height);
  padding: var(--adyen-internal-spacer-040);
}

.adyen-kyc-toast-actions {
  display: flex;
  gap: var(--adyen-internal-spacer-040);

  button:focus-visible {
    outline-color: var(--adyen-internal-color-outline-inverse-primary-active);
  }
}

.adyen-kyc-toast-action-close {
  border-left: 1px solid var(--adyen-internal-color-outline-inverse-primary);
  padding-left: var(--adyen-internal-spacer-040);
}

@keyframes adyen-kyc-present-toast {
  0% {
    opacity: 0;
    transform: translate(-50%, 32px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.adyen-kyc-u-display-flex {
  display: flex !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.adyen-kyc-u-margin-y-48 {
  margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;
  margin-top: var(--adyen-internal-spacer-120, 48px) !important;
}

/* for container queries */
.adyen-kyc-u-width-full {
  width: 100% !important;
}

.adyen-kyc-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, #ffffff);
  position: relative;
  padding: var(--adyen-internal-spacer-100, 32px);
  border-radius: var(--adyen-internal-border-radius-m, 8px);
  font-family: var(--adyen-internal-text-body-font-family);
  font-size: var(--adyen-internal-text-body-font-size, 14px);
  font-weight: var(--adyen-internal-text-body-font-weight, 400);
  line-height: var(--adyen-internal-text-body-line-height, 20px);
  color: var(--adyen-internal-color-label-primary, #001222);
}
.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, 16px);
  }
}

/*
* Compatibility later to ensure components do NOT receive extra padding
* as is the case with dropins, without breaking dropins.
* Once the Component Layout has been done `.adyen-kyc-externalComponent`
* can be safely removed everywere.
*/
.adyen-kyc-ui-element-container:has(.adyen-kyc-externalComponent) {
  padding: 0;
}

/**
 * :root is needed for non-web components, while :host for web components (TODO: change on v4)
 * 
 * This produces css like:
 * --adyen-internal-text-color: var(--adyen-sdk-text-color, #000);
 *
 * 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 $value is the fallback bare value, 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-animation-easing-standard: var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));
  --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-exit: var(--adyen-sdk-animation-easing-exit, cubic-bezier(0.4, 0, 1, 1));
  --adyen-internal-animation-easing-linear: var(--adyen-sdk-animation-easing-linear, linear);
  --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);
  --adyen-internal-animation-duration-moderate: var(--adyen-sdk-animation-duration-moderate, 150ms);
  --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);
  --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #ffffff);
  --adyen-internal-color-background-primary-hover: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);
  --adyen-internal-color-background-primary-active: var(--adyen-sdk-color-background-primary-active, #ecedef);
  --adyen-internal-color-background-secondary: var(--adyen-sdk-color-background-secondary, #f4f5f6);
  --adyen-internal-color-background-secondary-hover: var(--adyen-sdk-color-background-secondary-hover, #ecedef);
  --adyen-internal-color-background-secondary-active: var(--adyen-sdk-color-background-secondary-active, #e2e5e7);
  --adyen-internal-color-background-tertiary: var(--adyen-sdk-color-background-tertiary, #ecedef);
  --adyen-internal-color-background-tertiary-hover: var(--adyen-sdk-color-background-tertiary-hover, #e2e5e7);
  --adyen-internal-color-background-tertiary-active: var(--adyen-sdk-color-background-tertiary-active, #dadddf);
  --adyen-internal-color-background-quaternary: var(--adyen-sdk-color-background-quaternary, #c0c5ca);
  --adyen-internal-color-background-quaternary-hover: var(--adyen-sdk-color-background-quaternary-hover, #b7bdc2);
  --adyen-internal-color-background-quaternary-active: var(--adyen-sdk-color-background-quaternary-active, #aeb5ba);
  --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #ffffff);
  --adyen-internal-color-background-modal-hover: var(--adyen-sdk-color-background-modal-hover, #f4f5f6);
  --adyen-internal-color-background-modal-active: var(--adyen-sdk-color-background-modal-active, #ecedef);
  --adyen-internal-color-background-disabled: var(--adyen-sdk-color-background-disabled, #ecedef);
  --adyen-internal-color-background-selected: var(--adyen-sdk-color-background-selected, #e3effb);
  --adyen-internal-color-background-selected-hover: var(--adyen-sdk-color-background-selected-hover, #d4e6f9);
  --adyen-internal-color-background-selected-active: var(--adyen-sdk-color-background-selected-active, #c8dff7);
  --adyen-internal-color-background-spotlight: var(--adyen-sdk-color-background-spotlight, #ffe379);
  --adyen-internal-color-background-critical-weak: var(--adyen-sdk-color-background-critical-weak, #fff3ef);
  --adyen-internal-color-background-critical-strong: var(--adyen-sdk-color-background-critical-strong, #dc3801);
  --adyen-internal-color-background-critical-strong-hover: var(--adyen-sdk-color-background-critical-strong-hover, #c13101);
  --adyen-internal-color-background-critical-strong-active: var(--adyen-sdk-color-background-critical-strong-active, #751e00);
  --adyen-internal-color-background-warning-weak: var(--adyen-sdk-color-background-warning-weak, #fff4e5);
  --adyen-internal-color-background-warning-weak-hover: var(--adyen-sdk-color-background-warning-weak-hover, #ffecd0);
  --adyen-internal-color-background-warning-weak-active: var(--adyen-sdk-color-background-warning-weak-active, #ffe0b3);
  --adyen-internal-color-background-warning-strong: var(--adyen-sdk-color-background-warning-strong, #d77f00);
  --adyen-internal-color-background-success-weak: var(--adyen-sdk-color-background-success-weak, #e4faef);
  --adyen-internal-color-background-success-strong: var(--adyen-sdk-color-background-success-strong, #008845);
  --adyen-internal-color-background-highlight-weak: var(--adyen-sdk-color-background-highlight-weak, #f0f6fd);
  --adyen-internal-color-background-highlight-strong: var(--adyen-sdk-color-background-highlight-strong, #0f75dc);
  --adyen-internal-color-background-navigation: var(--adyen-sdk-color-background-navigation, #cef6e2);
  --adyen-internal-color-background-navigation-hover: var(--adyen-sdk-color-background-navigation-hover, #b8f2d6);
  --adyen-internal-color-background-navigation-active: var(--adyen-sdk-color-background-navigation-active, #9dedc6);
  --adyen-internal-color-background-inverse-primary: var(--adyen-sdk-color-background-inverse-primary, #001222);
  --adyen-internal-color-background-inverse-primary-hover: var(--adyen-sdk-color-background-inverse-primary-hover, #5c6874);
  --adyen-internal-color-background-inverse-primary-active: var(--adyen-sdk-color-background-inverse-primary-active, #6c7782);
  --adyen-internal-color-background-inverse-secondary: var(--adyen-sdk-color-background-inverse-secondary, #1a2b3b);
  --adyen-internal-color-background-inverse-secondary-hover: var(--adyen-sdk-color-background-inverse-secondary-hover, #273746);
  --adyen-internal-color-background-inverse-secondary-active: var(--adyen-sdk-color-background-inverse-secondary-active, #364553);
  --adyen-internal-color-background-inverse-disabled: var(--adyen-sdk-color-background-inverse-disabled, #273746);
  --adyen-internal-color-background-inverse-critical-weak: var(--adyen-sdk-color-background-inverse-critical-weak, #5c1800);
  --adyen-internal-color-background-inverse-critical-strong: var(--adyen-sdk-color-background-inverse-critical-strong, #ff9a78);
  --adyen-internal-color-background-inverse-critical-strong-hover: var(--adyen-sdk-color-background-inverse-critical-strong-hover, #ffbda6);
  --adyen-internal-color-background-inverse-critical-strong-active: var(--adyen-sdk-color-background-inverse-critical-strong-active, #ffded3);
  --adyen-internal-color-background-always-light: var(--adyen-sdk-color-background-always-light, #ffffff);
  --adyen-internal-color-background-always-light-hover: var(--adyen-sdk-color-background-always-light-hover, #f4f5f6);
  --adyen-internal-color-background-always-light-active: var(--adyen-sdk-color-background-always-light-active, #ecedef);
  --adyen-internal-color-background-always-light-disabled: var(--adyen-sdk-color-background-always-light-disabled, #ecedef);
  --adyen-internal-color-background-always-light-selected: var(--adyen-sdk-color-background-always-light-selected, #e3effb);
  --adyen-internal-color-background-always-dark: var(--adyen-sdk-color-background-always-dark, #001222);
  --adyen-internal-color-background-always-dark-hover: var(--adyen-sdk-color-background-always-dark-hover, #5c6874);
  --adyen-internal-color-background-always-dark-active: var(--adyen-sdk-color-background-always-dark-active, #8c959d);
  --adyen-internal-color-background-always-dark-disabled: var(--adyen-sdk-color-background-always-dark-disabled, #ecedef);
  --adyen-internal-color-background-always-dark-selected: var(--adyen-sdk-color-background-always-dark-selected, #00305f);
  --adyen-internal-color-background-always-dark-primary: var(--adyen-sdk-color-background-always-dark-primary, #001222);
  --ady