/**
 * 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-toast-background-information-default: var(--color-background-inverse-base);
  --component-toast-background-success-default: var(--color-background-inverse-base);
  --component-toast-background-warning-default: var(--color-background-inverse-base);
  --component-toast-background-error-default: var(--color-background-inverse-base);
  --component-toast-border-radius-default: var(--scania-unit-4);
  --component-toast-border-width-default: var(--scania-unit-4);
  --component-toast-border-information-default: var(--scania-color-blue-300);
  --component-toast-border-success-default: var(--scania-color-green-300);
  --component-toast-border-warning-default: var(--scania-color-yellow-300);
  --component-toast-border-error-default: var(--scania-color-red-400);
  --component-toast-text-title-default: var(--color-text-inverse-strong);
  --component-toast-text-body-default: var(--color-text-inverse-strong);
  --component-toast-text-link-default: var(--component-toast-text-body-default);
  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
  --component-toast-icon-information-default: var(--scania-color-blue-300);
  --component-toast-icon-success-default: var(--scania-color-green-300);
  --component-toast-icon-warning-default: var(--scania-color-yellow-300);
  --component-toast-icon-error-default: var(--scania-color-red-400);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-toast-background-information-default: var(--color-background-inverse-base);
  --component-toast-background-success-default: var(--color-background-inverse-base);
  --component-toast-background-warning-default: var(--color-background-inverse-base);
  --component-toast-background-error-default: var(--color-background-inverse-base);
  --component-toast-border-radius-default: var(--traton-unit-4);
  --component-toast-border-width-default: var(--traton-unit-4);
  --component-toast-border-information-default: var(--color-system-info-default);
  --component-toast-border-success-default: var(--color-system-success-default);
  --component-toast-border-warning-default: var(--color-system-warning-default);
  --component-toast-border-error-default: var(--color-system-danger-default);
  --component-toast-text-title-default: var(--color-text-inverse-strong);
  --component-toast-text-body-default: var(--color-text-inverse-soft);
  --component-toast-text-link-default: var(--component-toast-text-body-default);
  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
  --component-toast-icon-information-default: var(--color-system-info-default);
  --component-toast-icon-success-default: var(--color-system-success-default);
  --component-toast-icon-warning-default: var(--color-system-warning-default);
  --component-toast-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-toast-background-information-default: var(--color-background-inverse-layer-01);
  --component-toast-background-success-default: var(--color-background-inverse-layer-01);
  --component-toast-background-warning-default: var(--color-background-inverse-layer-01);
  --component-toast-background-error-default: var(--color-background-inverse-layer-01);
  --component-toast-border-radius-default: var(--scania-unit-4);
  --component-toast-border-width-default: var(--scania-unit-4);
  --component-toast-border-information-default: var(--scania-color-blue-400);
  --component-toast-border-success-default: var(--scania-color-green-300);
  --component-toast-border-warning-default: var(--scania-color-yellow-400);
  --component-toast-border-error-default: var(--scania-color-red-400);
  --component-toast-text-title-default: var(--color-text-inverse-strong);
  --component-toast-text-body-default: var(--color-text-inverse-strong);
  --component-toast-text-link-default: var(--component-toast-text-body-default);
  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
  --component-toast-icon-information-default: var(--scania-color-blue-400);
  --component-toast-icon-success-default: var(--scania-color-green-300);
  --component-toast-icon-warning-default: var(--scania-color-yellow-500);
  --component-toast-icon-error-default: var(--scania-color-red-400);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-toast-background-information-default: var(--color-background-inverse-base);
  --component-toast-background-success-default: var(--color-background-inverse-base);
  --component-toast-background-warning-default: var(--color-background-inverse-base);
  --component-toast-background-error-default: var(--color-background-inverse-base);
  --component-toast-border-radius-default: var(--traton-unit-4);
  --component-toast-border-width-default: var(--traton-unit-4);
  --component-toast-border-information-default: var(--color-system-info-default);
  --component-toast-border-success-default: var(--color-system-success-default);
  --component-toast-border-warning-default: var(--color-system-warning-default);
  --component-toast-border-error-default: var(--color-system-danger-default);
  --component-toast-text-title-default: var(--color-text-inverse-strong);
  --component-toast-text-body-default: var(--color-text-inverse-soft);
  --component-toast-text-link-default: var(--component-toast-text-body-default);
  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
  --component-toast-icon-information-default: var(--color-system-info-default);
  --component-toast-icon-success-default: var(--color-system-success-default);
  --component-toast-icon-warning-default: var(--color-system-warning-default);
  --component-toast-icon-error-default: var(--color-system-danger-default);
}

.tl-toast {
  --toast-background: var(--component-toast-background-information-default);
  --toast-headline: var(--component-toast-text-title-default);
  --toast-subheadline: var(--component-toast-text-body-default);
  --toast-dismiss: var(--component-toast-icon-dismiss-default);
  --toast-icon-info: var(--component-toast-icon-information-default);
  --toast-icon-success: var(--component-toast-icon-success-default);
  --toast-icon-warning: var(--component-toast-icon-warning-default);
  --toast-icon-error: var(--component-toast-icon-error-default);
}

/* Typography Usage mixins */
.tl-toast {
  z-index: 800;
  display: flex;
  width: 348px;
  background-color: var(--toast-background);
  border-radius: 4px;
}
.tl-toast--information {
  border-left: 4px solid var(--toast-icon-info);
}
.tl-toast--success {
  border-left: 4px solid var(--toast-icon-success);
}
.tl-toast--error {
  border-left: 4px solid var(--toast-icon-error);
}
.tl-toast--warning {
  border-left: 4px solid var(--toast-icon-warning);
}
.tl-toast--hide {
  display: none;
  visibility: hidden;
}

.tl-toast__icon {
  padding: 14px 0 0 12px;
  color: var(--toast-icon-info);
  flex-shrink: 0;
}

.tl-toast__content {
  padding: 16px 0 16px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 250px;
  word-break: break-word;
}

.tl-toast__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-toast__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);
  color: var(--toast-headline);
  margin: 0;
}

.tl-toast__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(--toast-subheadline);
  margin: 0;
}

.tl-toast__actions {
  padding-top: 12px;
}

.tl-toast__close {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 14px 0 22px;
  border: none;
  background: transparent;
  color: var(--toast-dismiss);
  cursor: pointer;
}
.tl-toast__close:focus-visible {
  outline: 2px solid var(--component--focus-ring-color-strong);
  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
  outline-offset: 1px;
  z-index: 1;
}

.tl-toast--error .tl-toast__icon {
  color: var(--toast-icon-error);
}
.tl-toast--success .tl-toast__icon {
  color: var(--toast-icon-success);
}
.tl-toast--warning .tl-toast__icon {
  color: var(--toast-icon-warning);
}

.tl-toast .tl-link {
  text-decoration: underline;
}
.tl-toast .tl-link:hover {
  text-decoration: none;
}