/* Typography Usage mixins */
/**
 * Do not edit directly, this file was auto-generated.
 */
:root,
.tds-mode-light,
.scania .tds-mode-light,
.scania.tds-mode-light,
.scania .tl-mode-light,
.scania.tl-mode-light {
  --component-message-background-primary: var(--color-background-layer-01);
  --component-message-background-secondary: var(--color-background-layer-02);
  --component-message-background-information-default: var(--color-background-layer-01);
  --component-message-background-success-default: var(--color-background-layer-01);
  --component-message-background-warning-default: var(--color-background-layer-01);
  --component-message-background-error-default: var(--color-system-danger-discrete);
  --component-message-text-information-default: var(--color-text-strong);
  --component-message-text-success-default: var(--color-text-strong);
  --component-message-text-warning-default: var(--color-text-strong);
  --component-message-text-error-default: var(--color-text-strong);
  --component-message-text-error-highlight-default: var(--color-system-danger-default);
  --component-message-border-information-default: var(--color-system-info-default);
  --component-message-border-success-default: var(--color-system-success-default);
  --component-message-border-warning-default: var(--color-system-warning-subtle);
  --component-message-border-error-default: var(--color-system-danger-default);
  --component-message-border-radius-default: var(--scania-unit-4);
  --component-message-border-width-default: var(--scania-unit-4);
  --component-message-icon-information-default: var(--color-system-info-default);
  --component-message-icon-success-default: var(--color-system-success-default);
  --component-message-icon-warning-default: var(--color-system-warning-default);
  --component-message-icon-error-default: var(--color-system-danger-default);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-message-background-primary: var(--color-background-layer-01);
  --component-message-background-secondary: var(--color-background-layer-02);
  --component-message-background-information-default: var(--color-background-layer-01);
  --component-message-background-success-default: var(--color-background-layer-01);
  --component-message-background-warning-default: var(--color-background-layer-01);
  --component-message-background-error-default: var(--color-system-danger-discrete);
  --component-message-text-information-default: var(--color-text-strong);
  --component-message-text-success-default: var(--color-text-strong);
  --component-message-text-warning-default: var(--color-text-strong);
  --component-message-text-error-default: var(--color-text-strong);
  --component-message-text-error-highlight-default: var(--color-system-danger-default);
  --component-message-border-information-default: var(--color-system-info-subtle);
  --component-message-border-success-default: var(--color-system-success-subtle);
  --component-message-border-warning-default: var(--color-system-warning-subtle);
  --component-message-border-error-default: var(--color-system-danger-subtle);
  --component-message-border-radius-default: var(--traton-unit-4);
  --component-message-border-width-default: var(--traton-unit-4);
  --component-message-icon-information-default: var(--color-system-info-default);
  --component-message-icon-success-default: var(--color-system-success-default);
  --component-message-icon-warning-default: var(--color-system-warning-defined);
  --component-message-icon-error-default: var(--color-system-danger-default);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-message-background-primary: var(--color-background-layer-01);
  --component-message-background-secondary: var(--color-background-layer-02);
  --component-message-background-information-default: var(--color-background-layer-01);
  --component-message-background-success-default: var(--color-background-layer-01);
  --component-message-background-warning-default: var(--color-background-layer-01);
  --component-message-background-error-default: var(--color-system-danger-discrete);
  --component-message-text-information-default: var(--color-text-strong);
  --component-message-text-success-default: var(--color-text-strong);
  --component-message-text-warning-default: var(--color-text-strong);
  --component-message-text-error-default: var(--color-text-strong);
  --component-message-text-error-highlight-default: var(--color-system-danger-default);
  --component-message-border-information-default: var(--color-system-info-default);
  --component-message-border-success-default: var(--color-system-success-subtle);
  --component-message-border-warning-default: var(--color-system-warning-subtle);
  --component-message-border-error-default: var(--color-system-danger-subtle);
  --component-message-border-radius-default: var(--scania-unit-4);
  --component-message-border-width-default: var(--scania-unit-4);
  --component-message-icon-information-default: var(--color-system-info-default);
  --component-message-icon-success-default: var(--color-system-success-subtle);
  --component-message-icon-warning-default: var(--color-system-warning-subtle);
  --component-message-icon-error-default: var(--color-system-danger-default);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-message-background-primary: var(--color-background-layer-01);
  --component-message-background-secondary: var(--color-background-layer-02);
  --component-message-background-information-default: var(--color-background-layer-01);
  --component-message-background-success-default: var(--color-background-layer-01);
  --component-message-background-warning-default: var(--color-background-layer-01);
  --component-message-background-error-default: var(--color-system-danger-discrete);
  --component-message-text-information-default: var(--color-text-strong);
  --component-message-text-success-default: var(--color-text-strong);
  --component-message-text-warning-default: var(--color-text-strong);
  --component-message-text-error-default: var(--color-text-strong);
  --component-message-text-error-highlight-default: var(--color-system-danger-default);
  --component-message-border-information-default: var(--color-system-info-subtle);
  --component-message-border-success-default: var(--color-system-success-subtle);
  --component-message-border-warning-default: var(--color-system-warning-subtle);
  --component-message-border-error-default: var(--color-system-danger-subtle);
  --component-message-border-radius-default: var(--traton-unit-4);
  --component-message-border-width-default: var(--traton-unit-4);
  --component-message-icon-information-default: var(--color-system-info-default);
  --component-message-icon-success-default: var(--color-system-success-default);
  --component-message-icon-warning-default: var(--color-system-warning-subtle);
  --component-message-icon-error-default: var(--color-system-danger-default);
}

.tl-message {
  --message-main-background: var(--component-message-background-primary);
  --message-mode-primary-background: var(--component-message-background-primary);
  --message-mode-secondary-background: var(--component-message-background-secondary);
  --message-main-text-color: var(--color-text-strong);
  /* Info */
  --message-info-border-color: var(--component-message-border-information-default);
  --message-info-icon-color: var(--component-message-icon-information-default);
  /* Success */
  --message-success-border-color: var(--component-message-border-success-default);
  --message-success-icon-color: var(--component-message-icon-success-default);
  /* Error */
  --message-error-background: var(--component-message-background-error-default);
  --message-error-border-color: var(--component-message-border-error-default);
  --message-error-icon-color: var(--component-message-icon-error-default);
  --message-error-header-text-color: var(--component-message-text-error-highlight-default);
  /* Warning */
  --message-warning-border-color: var(--component-message-border-warning-default);
  --message-warning-icon-color: var(--component-message-icon-warning-default);
}

.tl-message--primary {
  --message-main-background: var(--message-mode-primary-background);
}
.tl-message--secondary {
  --message-main-background: var(--message-mode-secondary-background);
}

.tl-message__wrapper {
  display: flex;
  padding: 16px;
  background-color: var(--message-main-background);
  border-radius: 4px;
  position: relative;
}
.tl-message--information .tl-message__wrapper {
  border-left: 4px solid var(--message-info-border-color);
}
.tl-message--success .tl-message__wrapper {
  border-left: 4px solid var(--message-success-border-color);
}
.tl-message--warning .tl-message__wrapper {
  border-left: 4px solid var(--message-warning-border-color);
}
.tl-message--error .tl-message__wrapper {
  background-color: var(--message-error-background);
  border-left: 4px solid var(--message-error-border-color);
}
.tl-message--minimal .tl-message__wrapper {
  border: none;
  padding: 0;
  background-color: transparent;
}

.tl-message__wrapper::before {
  content: "";
  display: inline-block;
  margin-right: 16px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentcolor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.tl-message--information .tl-message__wrapper::before {
  mask-image: var(--icon-info-svg);
  color: var(--message-info-icon-color);
}
.tl-message--success .tl-message__wrapper::before {
  mask-image: var(--icon-tick-svg);
  color: var(--message-success-icon-color);
}
.tl-message--warning .tl-message__wrapper::before {
  mask-image: var(--icon-warning-svg);
  color: var(--message-warning-icon-color);
}
.tl-message--error .tl-message__wrapper::before {
  mask-image: var(--icon-error-svg);
  color: var(--message-error-icon-color);
}
.tl-message--minimal .tl-message__wrapper::before {
  margin-right: 8px;
}
.tl-message--no-icon .tl-message__wrapper::before {
  display: none;
}

.tl-message__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--message-main-text-color);
  padding: 2px 0;
}

.tl-message__header {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
}
.tl-message--minimal .tl-message__header {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
}
.tl-message--error.tl-message--minimal .tl-message__header {
  color: var(--message-error-header-text-color);
}

.tl-message__subheader {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--message-main-text-color);
}
.tl-message--minimal .tl-message__subheader {
  display: none;
}