.md-message {
  display: flex;
  align-items: flex-start;
  gap: var(--md-spacing-3xs);
  padding: var(--md-spacing-xs);
  border: var(--md-border-width-sm) solid var(--md-border-primary);
  border-radius: var(--md-radius-xs);
}

.md-message__icon {
  font-size: 24px;
  line-height: 1;
}

.md-message__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-4xs);
}

.md-message__title {
  color: var(--md-content-primary);
  margin: var(--md-spacing-none);
}

.md-message__description-container {
  display: flex;
  flex-direction: column;
}

.md-message__description,
.md-message__supporting-info {
  color: var(--md-content-secondary);
  margin: var(--md-spacing-none);
}

/* sizes — only typography scales between sizes. The title is body in bold,
   not a heading: it matches the body size and differs only in weight */

.md-message--sm .md-message__title {
  font-family: var(--md-text-body-sm-font-family);
  font-size: var(--md-text-body-sm-font-size);
  line-height: var(--md-text-body-sm-line-height);
  letter-spacing: var(--md-text-body-sm-letter-spacing);
  font-weight: var(--md-text-body-sm-bold-font-weight);
}

.md-message--sm .md-message__description,
.md-message--sm .md-message__supporting-info {
  font-family: var(--md-text-body-sm-font-family);
  font-size: var(--md-text-body-sm-font-size);
  line-height: var(--md-text-body-sm-line-height);
  letter-spacing: var(--md-text-body-sm-letter-spacing);
  font-weight: var(--md-text-body-sm-regular-font-weight);
}

.md-message--md .md-message__title {
  font-family: var(--md-text-body-mn-font-family);
  font-size: var(--md-text-body-mn-font-size);
  line-height: var(--md-text-body-mn-line-height);
  letter-spacing: var(--md-text-body-mn-letter-spacing);
  font-weight: var(--md-text-body-mn-bold-font-weight);
}

.md-message--md .md-message__description,
.md-message--md .md-message__supporting-info {
  font-family: var(--md-text-body-mn-font-family);
  font-size: var(--md-text-body-mn-font-size);
  line-height: var(--md-text-body-mn-line-height);
  letter-spacing: var(--md-text-body-mn-letter-spacing);
  font-weight: var(--md-text-body-mn-regular-font-weight);
}

/* variant - brand */

.md-message--brand {
  background: var(--md-background-tertiary);
}

.md-message--brand .md-message__icon {
  color: var(--md-content-brand-secondary);
}

/* variant - negative */

.md-message--negative {
  background: var(--md-background-negative-subtle);
}

.md-message--negative .md-message__icon {
  color: var(--md-content-negative);
}

/* variant - positive */

.md-message--positive {
  background: var(--md-background-positive-subtle);
}

.md-message--positive .md-message__icon {
  color: var(--md-content-positive);
}

/* variant - notice */

.md-message--notice {
  background: var(--md-background-notice-subtle);
}

.md-message--notice .md-message__icon {
  color: var(--md-content-notice);
}

/* variant - info */

.md-message--info {
  background: var(--md-background-info-subtle);
}

.md-message--info .md-message__icon {
  color: var(--md-content-info);
}

/* variant - note */

.md-message--note {
  background: var(--md-background-discovery-subtle);
}

.md-message--note .md-message__icon {
  color: var(--md-content-discovery);
}

/* variant - neutral */

.md-message--neutral {
  background: var(--md-background-primary);
}

.md-message--neutral .md-message__icon {
  color: var(--md-content-brand-secondary);
}