/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.message--level-error {
  --message-background-color: var(--background-color-critical);
  --message-icon-color: var(--icon-color-critical);
}

.message--level-info {
  --message-background-color: var(--background-color-information);
  --message-icon-color: var(--icon-color-information);
}

.message--level-warning {
  --message-background-color: var(--background-color-warning);
  --message-icon-color: var(--icon-color-warning);
}

/*
 * Layout of the message
 *
 *  +--------+-----------------+----------+
 *  | Icon   | Message content | closing  |
 *  |        | (several lines) | button   |
 *  |        | (     ...     ) |(optional)|
 *  +--------+-----------------+----------+
 */
.message {
  background-color: var(--message-background-color);
  border-radius: var(--border-radius-medium);
  color: var(--text-color);
  display: grid;
  grid-column-gap: var(--base-unit);
  grid-template-columns: calc(var(--base-unit) * 6) 1fr auto;
  grid-template-areas: "icon body button";
  align-items: center;
  margin: calc(var(--base-unit) * 2) 0;
  padding: var(--base-unit);
  -moz-context-properties: fill;

  @media -moz-pref("browser.nova.enabled") {
    border-radius: var(--border-radius-large);
  }
}

.message__icon {
  margin: calc(var(--base-unit) * 2) var(--base-unit);
  fill: var(--message-icon-color);
  grid-area: icon;
}

.message__body {
  align-self: center;
  font-size: var(--message-font-size);
  font-weight: normal;
  grid-area: body;
  line-height: 1.6;
}

.message__button {
  grid-area: button;
  fill: var(--message-icon-color);
}
