@scania/tegel/dist/collection/components/toast/toast.css

Tegel Design System

:host(.hide) {
  display: none;
  visibility: hidden;
}

:host {
  z-index: 800;
}
:host .wrapper {
  display: flex;
  width: 348px;
  background-color: var(--tds-toast-background-color);
  border-radius: 4px;
}
:host .wrapper.information {
  border-left: 4px solid var(--tds-toast-color-info);
}
:host .wrapper.information tds-icon {
  color: var(--tds-toast-color-info);
}
:host .wrapper.success {
  border-left: 4px solid var(--tds-toast-color-success);
}
:host .wrapper.success tds-icon {
  color: var(--tds-toast-color-success);
}
:host .wrapper.error {
  border-left: 4px solid var(--tds-toast-color-error);
}
:host .wrapper.error tds-icon {
  color: var(--tds-toast-color-error);
}
:host .wrapper.warning {
  border-left: 4px solid var(--tds-toast-color-warning);
}
:host .wrapper.warning tds-icon {
  color: var(--tds-toast-icon-color-warning);
}
:host .wrapper button.close {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 14px 0 22px;
  border: none;
  background: transparent;
}
:host .wrapper button.close:hover {
  cursor: pointer;
}
:host .wrapper button.close:focus {
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: 0 0 0 1px var(--tds-white);
  outline-offset: 1px;
  z-index: 1;
}
:host .wrapper button.close tds-icon {
  color: var(--tds-toast-dissmiss-color);
  padding: 0;
}
:host tds-icon {
  padding: 14px 0 0 12px;
}
:host .content {
  padding: 16px 0 16px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 250px;
  word-break: break-word;
}
:host .content .header-subheader {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:host .content .header,
:host .content slot[name=header]::slotted(*) {
  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
  font: var(--tds-headline-07) !important;
  letter-spacing: var(--tds-headline-07-ls) !important;
  color: var(--tds-toast-headline-color);
}
:host .content .subheader,
:host .content slot[name=subheader]::slotted(*) {
  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
  color: var(--tds-toast-subheadline-color);
  font: var(--tds-detail-02) !important;
  letter-spacing: var(--tds-detail-02-ls) !important;
}
:host .content .subheader.no-link slot::slotted(*),
:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*) {
  padding-bottom: 0;
}
:host .content .toast-bottom {
  padding-top: 12px;
}
:host .tds-mode-variant-primary {
  --tds-toast-background: var(--tds-toast-background-primary);
}
:host .tds-mode-variant-secondary {
  --tds-toast-background: var(--tds-toast-background-secondary);
}