.message {
  font-family: var(--monospace-font-family);
  font-size: calc(var(--font-size-small));
  line-height: var(--base-line-small);
  background: var(--color-silver);
  color: var(--color-text);
  padding: 1rem;
  padding-right: 2.5em;
  padding-bottom: .75rem;
  margin-bottom: var(--base-line);
  position: relative;
  & a {
    color: inherit;
  }
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    margin-bottom: 0;
  }
  & .close {
    position: absolute;
    right: 1rem;
    top: 1.1rem;
  }
}
.message.error {
  background: var(--color-error);
  color: #fff;
}
.message.success {
  background: var(--color-success);
  color: #fff;
}
.message.warning {
  background: var(--color-warning);
}
.message.focus {
  background: var(--color-focus);
  color: #fff;
}
.message.black {
  background: var(--color-black);
  color: #fff;
}
.message.inverted {
  background: var(--color-inverted);
}