/*** Allianz One Breakpoints and Mixins ***/
/*** NDBX One Breakpoints and Mixins ***/
:root {
  --button-contained-primary-accent-color-resting: var(--button-contained-primary-attention-color-resting);
}

@media (prefers-color-scheme: dark) {
  :root {
    --button-contained-primary-accent-color-resting: var(--button-contained-secondary-inverse-color-resting);
    --button-contained-primary-attention-color-resting: var(--button-contained-secondary-inverse-color-resting);
    --button-contained-primary-critical-color-resting: var(--button-contained-secondary-inverse-color-resting) ;
  }
}
.button {
  display: inline-flex;
  border-radius: var(--button-contained-border-radius);
  font-family: var(--button-contained-text-font-family), Arial, Helvetica, sans-serif;
  font-size: var(--button-contained-text-font-size);
  line-height: var(--button-contained-text-line-height);
  font-weight: var(--button-contained-text-font-weight);
  border: none; /* resetting browser default borders */
  cursor: pointer;
  text-transform: var(--button-text-transform);
  transition: background-color var(--button-contained-transition-color-default-duration) var(--button-contained-transition-color-default-easing), border-color var(--button-contained-transition-color-default-duration) var(--button-contained-transition-color-default-easing), color var(--button-contained-transition-color-default-duration) var(--button-contained-transition-color-default-easing), box-shadow var(--button-contained-transition-color-default-duration) var(--button-contained-transition-color-default-easing);
  user-select: none;
  word-break: break-word;
  margin: var(--margin-xxxs) var(--margin-xxxs) var(--margin-xxl);
  justify-content: center;
  /* TYPES */
}

.button[disabled] {
  cursor: not-allowed;
}

.button.button--inline {
  margin-right: var(--size-2xs);
}

.button.button--contained {
  border-radius: var(--button-contained-border-radius);
  padding: var(--button-contained-m-inset-all);
  /* VARIATIONS */
}

.button.button--contained.button--small {
  padding: var(--button-contained-s-inset-all);
}

.button.button--contained.button--primary {
  color: var(--button-contained-primary-color-resting);
  background-color: var(--button-contained-primary-surface-resting);
}

.button.button--contained.button--primary:hover {
  background-color: var(--button-contained-primary-surface-hover);
}

.button.button--contained.button--primary:active {
  background-color: var(--button-contained-primary-surface-active);
}

.button.button--contained.button--primary[disabled] {
  color: var(--button-contained-primary-color-disabled);
  background-color: var(--button-contained-primary-surface-disabled);
}

.button.button--contained.button--secondary {
  color: var(--button-contained-secondary-color-resting);
  border: solid var(--button-contained-border-width) var(--button-contained-secondary-border-color-resting);
  background-color: transparent;
  /* calculation of the padding needed, cause the design works with inset borders. Box-shadow inset solution for a inset border is hacky and not suggested anymore */
  padding: calc(var(--button-contained-m-inset-top) - var(--button-contained-border-width)) calc(var(--button-contained-m-inset-right) - var(--button-contained-border-width)) calc(var(--button-contained-m-inset-bottom) - var(--button-contained-border-width)) calc(var(--button-contained-m-inset-left) - var(--button-contained-border-width));
}

.button.button--contained.button--secondary.button--small {
  /* calculation of the padding needed, cause the design works with inset borders. Box-shadow inset solution for a inset border is hacky and not suggested anymore */
  padding: calc(var(--button-contained-s-inset-top) - var(--button-contained-border-width)) calc(var(--button-contained-s-inset-right) - var(--button-contained-border-width)) calc(var(--button-contained-s-inset-bottom) - var(--button-contained-border-width)) calc(var(--button-contained-s-inset-left) - var(--button-contained-border-width));
}

.button.button--contained.button--secondary:hover {
  color: var(--button-contained-secondary-color-hover);
  background-color: var(--button-contained-secondary-surface-hover);
  text-decoration: none;
}

.button.button--contained.button--secondary:active {
  color: var(--button-contained-secondary-color-active);
  background-color: var(--button-contained-secondary-surface-active);
}

.button.button--contained.button--secondary[disabled] {
  color: var(--button-contained-secondary-color-disabled);
  background-color: transparent;
  border: solid var(--button-contained-border-width) var(--button-contained-secondary-border-color-disabled);
}

.button.button--contained.button--tertiary {
  color: var(--button-contained-tertiary-color-resting);
  background-color: transparent;
  text-decoration: underline;
}

.button.button--contained.button--tertiary:hover {
  color: var(--button-contained-tertiary-color-hover);
  background-color: var(--button-contained-tertiary-surface-hover);
  text-decoration: none;
}

.button.button--contained.button--tertiary:active {
  color: var(--button-contained-tertiary-color-active);
  background-color: var(--button-contained-tertiary-surface-active);
  text-decoration: none;
}

.button.button--contained.button--tertiary[disabled] {
  color: var(--button-contained-tertiary-color-disabled);
  background-color: transparent;
  text-decoration: underline;
}

.button.button--contained.button--critical {
  color: var(--button-contained-primary-critical-color-resting);
  background-color: var(--button-contained-primary-critical-surface-resting);
}

.button.button--contained.button--critical:hover {
  background-color: var(--button-contained-primary-critical-surface-hover);
}

.button.button--contained.button--critical:active {
  background-color: var(--button-contained-primary-critical-surface-active);
}

.button.button--contained.button--critical[disabled] {
  color: var(--button-contained-primary-critical-color-disabled);
  background-color: var(--button-contained-primary-critical-surface-disabled);
}

.button.button--contained.button--attention {
  color: var(--button-contained-primary-attention-color-resting);
  background-color: var(--button-contained-primary-attention-surface-resting);
}

.button.button--contained.button--attention:hover {
  background-color: var(--button-contained-primary-attention-surface-hover);
}

.button.button--contained.button--attention:active {
  background-color: var(--button-contained-primary-attention-surface-active);
}

.button.button--contained.button--attention[disabled] {
  color: var(--button-contained-primary-attention-color-disabled);
  background-color: var(--button-contained-primary-attention-surface-disabled);
}

.button.button--contained.button--accent.button--accent--orange {
  background-color: var(--core-color-orange-700);
  color: var(--button-contained-primary-accent-color-resting);
}

.button.button--contained.button--accent.button--accent--orange:hover {
  background-color: var(--core-color-orange-800);
}

.button.button--contained.button--accent.button--accent--orange:active {
  background-color: var(--core-color-orange-900);
}

.button.button--contained.button--accent.button--accent--teal {
  background-color: var(--core-color-teal-700);
  color: var(--button-contained-primary-accent-color-resting);
}

.button.button--contained.button--accent.button--accent--teal:hover {
  background-color: var(--core-color-teal-800);
}

.button.button--contained.button--accent.button--accent--teal:active {
  background-color: var(--core-color-teal-900);
}

.button.button--contained.button--accent.button--accent--purple {
  background-color: var(--core-color-purple-800);
  color: var(--button-contained-primary-accent-color-resting);
}

.button.button--contained.button--accent.button--accent--purple:hover {
  background-color: var(--core-color-purple-900);
}

.button.button--contained.button--accent.button--accent--purple:active {
  background-color: var(--core-color-purple-1000);
}

.button.button--contained.button--accent.button--accent--yellow {
  background-color: var(--core-color-yellow-700);
  color: var(--button-contained-primary-accent-color-resting);
}

.button.button--contained.button--accent.button--accent--yellow:hover {
  background-color: var(--core-color-yellow-800);
}

.button.button--contained.button--accent.button--accent--yellow:active {
  background-color: var(--core-color-yellow-900);
}

.button.button--contained.button--accent.button--accent--aqua {
  background-color: var(--core-color-aqua-700);
  color: var(--button-contained-primary-accent-color-resting);
}

.button.button--contained.button--accent.button--accent--aqua:hover {
  background-color: var(--core-color-aqua-800);
}

.button.button--contained.button--accent.button--accent--aqua:active {
  background-color: var(--core-color-aqua-900);
}

.button.button--contained.button--accent.button--accent--red {
  background-color: var(--semantic-color-action-critical-resting);
  color: var(--button-contained-primary-attention-color-resting);
}

.button.button--contained.button--accent.button--accent--red:hover {
  background-color: var(--semantic-color-action-critical-hover);
}

.button.button--contained.button--accent.button--accent--red:active {
  background-color: var(--semantic-color-action-critical-active);
}

.button.button--contained.button--accent[disabled] {
  color: var(--button-contained-primary-attention-color-disabled);
  background-color: var(--button-contained-primary-attention-surface-disabled);
}

.button.button--plain {
  font-family: var(--button-plain-m-text-font-family), Arial, Helvetica, sans-serif;
  font-size: var(--button-plain-m-text-font-size);
  line-height: var(--button-plain-m-text-line-height);
  font-weight: var(--button-plain-m-text-font-weight);
  text-decoration: var(--button-plain-text-decoration-resting);
  background-color: transparent;
  padding: 0;
  /* VARIATIONS */
}

.button.button--plain.button--small {
  font-family: var(--button-plain-s-text-font-family), Arial, Helvetica, sans-serif;
  font-size: var(--button-plain-s-text-font-size);
  line-height: var(--button-plain-s-text-line-height);
  font-weight: var(--button-plain-s-text-font-weight);
  padding: var(--button-contained-s-inset-all);
}

.button.button--plain.button--primary {
  color: var(--button-plain-primary-color-resting);
}

.button.button--plain.button--primary:hover {
  color: var(--button-plain-primary-color-hover);
}

.button.button--plain.button--primary:active {
  color: var(--button-plain-primary-color-active);
}

.button.button--plain.button--primary[disabled] {
  color: var(--button-plain-primary-color-disabled);
}

.button.button--plain.button--secondary {
  color: var(--button-plain-secondary-color-resting);
}

.button.button--plain.button--secondary:hover {
  color: var(--button-plain-secondary-color-hover);
}

.button.button--plain.button--secondary:active {
  color: var(--button-plain-secondary-color-active);
}

.button.button--plain.button--secondary[disabled] {
  color: var(--button-plain-secondary-color-disabled);
}

.button.button--plain.button--danger {
  color: var(--button-plain-primary-critical-color-resting);
}

.button.button--plain.button--danger:hover {
  color: var(--button-plain-primary-critical-color-hover);
}

.button.button--plain.button--danger:active {
  color: var(--button-plain-primary-critical-color-active);
}

.button.button--plain.button--danger[disabled] {
  color: var(--button-plain-primary-critical-color-disabled);
}

.button:focus-visible, .button:focus {
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .button:focus-visible, .theme--inverted .button:focus {
  outline-color: var(--semantic-color-border-focus-inverse);
}

@media (max-width: 703px) {
  .button {
    width: 100%;
  }
}
.button.button--block {
  width: 100%;
}

.button .button--inverted,
.theme--inverted .button {
  /*
    Overwrite existing and already assigned tokens with the inverted style tokens
  */
  --button-contained-primary-color-resting: var(
    --button-contained-primary-inverse-color-resting
  );
  --button-contained-primary-color-disabled: var(
    --button-contained-primary-inverse-color-disabled
  );
  --button-contained-primary-surface-resting: var(
    --button-contained-primary-inverse-surface-resting
  );
  --button-contained-primary-surface-hover: var(
    --button-contained-primary-inverse-surface-hover
  );
  --button-contained-primary-surface-active: var(
    --button-contained-primary-inverse-surface-active
  );
  --button-contained-primary-surface-disabled: var(
    --button-contained-primary-inverse-surface-disabled
  );
  --button-contained-secondary-color-resting: var(
    --button-contained-secondary-inverse-color-resting
  );
  --button-contained-secondary-color-hover: var(
    --button-contained-secondary-inverse-color-hover
  );
  --button-contained-secondary-color-active: var(
    --button-contained-secondary-inverse-color-active
  );
  --button-contained-secondary-color-disabled: var(
    --button-contained-secondary-inverse-color-disabled
  );
  --button-contained-secondary-surface-hover: var(
    --button-contained-secondary-inverse-surface-hover
  );
  --button-contained-secondary-surface-active: var(
    --button-contained-secondary-inverse-surface-active
  );
  --button-contained-secondary-border-color-resting: var(
    --button-contained-secondary-inverse-border-color-resting
  );
  --button-contained-secondary-border-color-disabled: var(
    --button-contained-secondary-inverse-border-color-disabled
  );
  --button-contained-tertiary-color-resting: var(
    --button-contained-tertiary-inverse-color-resting
  );
  --button-contained-tertiary-color-hover: var(
    --button-contained-tertiary-inverse-color-hover
  );
  --button-contained-tertiary-color-active: var(
    --button-contained-tertiary-inverse-color-active
  );
  --button-contained-tertiary-color-disabled: var(
    --button-contained-tertiary-inverse-color-disabled
  );
  --button-contained-tertiary-surface-hover: var(
    --button-contained-tertiary-inverse-surface-hover
  );
  --button-contained-tertiary-surface-active: var(
    --button-contained-tertiary-inverse-surface-active
  );
  --button-plain-primary-color-resting: var(
    --button-plain-primary-inverse-color-resting
  );
  --button-plain-primary-color-hover: var(
    --button-plain-primary-inverse-color-hover
  );
  --button-plain-primary-color-active: var(
    --button-plain-primary-inverse-color-active
  );
  --button-plain-primary-color-disabled: var(
    --button-plain-primary-inverse-color-disabled
  );
}

.button__icon {
  pointer-events: none;
  font-size: inherit;
  display: inline-block;
  vertical-align: top;
}

.button__icon::before {
  font-weight: initial;
  pointer-events: none;
  font-size: var(--font-size-s);
  display: inline-block;
  vertical-align: top;
  margin-right: var(--button-contained-m-icon-inset-right);
}

.button__icon .button--small {
  width: var(--size-s);
  font-size: var(--font-size);
}

.button--small .button__icon::before {
  margin-right: 8px;
  font-size: 20px;
}

.button__icon-right::before {
  margin-right: 0;
  margin-left: var(--button-contained-m-icon-inset-left);
}

.button--no-margin {
  margin: var(--size-5xs);
}