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

Tegel Design System

/* Typography Usage mixins */
/* Centralized map of typography types */
/* Utility mixin */
:host {
  /* Default values */
  --tds-message-background: var(--background-elevation-layer-03);
  --tds-message-background-error: var(--system-danger-subtle-03);
  --tds-message-background-warning: var(--background-elevation-layer-03);
  --tds-message-background-success: var(--background-elevation-layer-03);
  /* Variant values */
}
:host .tds-mode-variant-primary {
  --tds-message-background: var(--background-elevation-layer-03);
  --tds-message-background-error: var(--system-danger-subtle-03);
  --tds-message-background-warning: var(--background-elevation-layer-03);
  --tds-message-background-success: var(--background-elevation-layer-03);
}
:host .tds-mode-variant-secondary {
  --tds-message-background: var(--background-elevation-layer-02);
  --tds-message-background-error: var(--system-danger-subtle-02);
  --tds-message-background-warning: var(--background-elevation-layer-02);
  --tds-message-background-success: var(--background-elevation-layer-02);
}
:host .wrapper {
  display: flex;
  padding: 16px;
  background-color: var(--tds-message-background);
  border-radius: 4px;
}
:host .wrapper.information {
  border-left: 4px solid var(--system-info-default);
}
:host .wrapper.information tds-icon {
  color: var(--system-info-default);
}
:host .wrapper.success {
  background-color: var(--tds-message-background-success);
  border-left: 4px solid var(--system-success-default);
}
:host .wrapper.success tds-icon {
  color: var(--system-success-default);
}
:host .wrapper.error {
  background-color: var(--tds-message-background-error);
  border-left: 4px solid var(--system-danger-default);
}
:host .wrapper.error tds-icon {
  color: var(--system-danger-default);
}
:host .wrapper.warning {
  background-color: var(--tds-message-background-warning);
  border-left: 4px solid var(--system-warning-default);
}
:host .wrapper.warning tds-icon {
  color: var(--system-warning-default);
}
:host .wrapper.minimal {
  border: none;
  padding: 0;
  background-color: transparent;
}
: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(--system-danger-default);
}
:host tds-icon {
  padding-right: 16px;
}
:host .content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--foreground-text-strong);
  padding: 2px 0;
}
: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-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);
}