.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 {
  font-weight: 700;
  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 {
  font-weight: 500;
  color: var(--md-content-secondary);
  margin: var(--md-spacing-none);
}

/* sizes — only typography scales between sizes */

.md-message--sm .md-message__title,
.md-message--sm .md-message__description,
.md-message--sm .md-message__supporting-info {
  font-size: 14px;
}

.md-message--md .md-message__title,
.md-message--md .md-message__description,
.md-message--md .md-message__supporting-info {
  font-size: 16px;
}

/* 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);
}