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

Tegel Design System

/* Typography Usage mixins */
:host .wrapper {
  display: flex;
  padding: 16px;
  background-color: var(--tds-message-background);
  border-radius: 4px;
}
:host .wrapper.information {
  border-left: 4px solid var(--tds-message-border-info);
}
:host .wrapper.information tds-icon {
  color: var(--tds-message-icon-info);
}
:host .wrapper.success {
  background-color: var(--tds-message-background-success);
  border-left: 4px solid var(--tds-message-border-success);
}
:host .wrapper.success tds-icon {
  color: var(--tds-message-icon-success);
}
:host .wrapper.error {
  background-color: var(--tds-message-background-error);
  border-left: 4px solid var(--tds-message-border-error);
}
:host .wrapper.error tds-icon {
  color: var(--tds-message-icon-error);
}
:host .wrapper.warning {
  background-color: var(--tds-message-background-warning);
  border-left: 4px solid var(--tds-message-border-warning);
}
:host .wrapper.warning tds-icon {
  color: var(--tds-message-icon-warning);
}
:host .wrapper.minimal {
  border: none;
  padding: 0;
  background-color: transparent;
}
:host .wrapper.minimal tds-icon {
  padding-right: 8px;
}
:host .wrapper.minimal .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);
}
:host .wrapper.minimal.error .header {
  color: var(--tds-message-minimal-header-error);
}
:host tds-icon {
  padding-right: 16px;
}
:host .content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--foreground-text-strong);
  padding: 2px 24px 2px 0;
  overflow-wrap: anywhere;
}
:host .content .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);
}
:host .content .extended-message {
  color: var(--foreground-text-strong);
  font-family: var(--detail-03-font-family);
  font-size: var(--detail-03-font-size);
  line-height: var(--detail-03-line-height);
  font-weight: var(--detail-03-font-weight);
  letter-spacing: var(--detail-03-letter-spacing);
  text-transform: var(--detail-03-text-transform);
}