/*** Allianz One Breakpoints and Mixins ***/
.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);
  /* TYPES */
}
.button[disabled] {
  cursor: not-allowed;
}
.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);
  fill: 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);
  fill: 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);
  fill: 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);
  fill: 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);
  fill: 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);
  fill: 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);
  fill: 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);
  fill: 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);
  fill: var(--button-contained-tertiary-color-disabled);
  background-color: transparent;
  text-decoration: underline;
}
.button.button--contained.button--danger {
  color: var(--button-contained-primary-critical-color-resting);
  background-color: var(--button-contained-primary-critical-surface-resting);
}
.button.button--contained.button--danger:hover {
  background-color: var(--button-contained-primary-critical-surface-hover);
}
.button.button--contained.button--danger:active {
  background-color: var(--button-contained-primary-critical-surface-active);
}
.button.button--contained.button--danger[disabled] {
  color: var(--button-contained-primary-critical-color-disabled);
  background-color: var(--button-contained-primary-critical-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;
  /* 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 {
  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;
}
@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;
  transition: transform 0.2s ease-out;
  font-size: inherit;
  display: inline-block;
  vertical-align: top;
}
.button__icon::before {
  pointer-events: none;
  transition: transform 0.2s ease-out;
  font-size: var(--font-size-s);
  display: inline-block;
  vertical-align: top;
}
.button__icon .button--small {
  width: var(--size-s);
  font-size: var(--font-size);
}

.button__icon-right::before {
  order: 1;
  margin: var(--size-5xs) var(--size-5xs) var(--size-5xs) var(--size-2xs);
}

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