/*
The darken/lighten is not giving accurate results for the toasters so specific vars for them below.

- Red background: #c23848 you can get this colour roughly from using the red variable and with HSL lower lightness by 20.
- Blue background: #377ebd you can get this colour roughly from using the blue variable and with HSL lower lightness by 20.
- Orange background: #ff9933
- The text colour on all of these, could they please be #E2E2E2, except from warning which remains with black text.

*/
/*is not being used anywhere; the same as @redAlert*/
:host {
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-areas: 'status icon'
 'text icon'
 'id icon';
  color: #FFFFFF;
  padding: 5px 10px 5px 10px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0) 100%);
  margin-top: 2px;
  margin-bottom: 4px;
  min-height: 0;
  /* fix for IE11 */
  display: -ms-grid;
  -ms-grid-columns: 4fr 1fr;
  -ms-grid-rows: auto auto auto; }
  :host.success {
    background-color: #008000; }
    :host.success .icon .success-icon {
      display: flex; }
    :host.success .icon .error-icon {
      display: none; }
  :host.awaiting-activation {
    background-color: #008000; }
    :host.awaiting-activation .icon .success-icon {
      display: flex; }
    :host.awaiting-activation .icon .error-icon {
      display: none; }
  :host.error {
    background-color: #FF0000; }
    :host.error .icon .success-icon {
      display: none; }
    :host.error .icon .error-icon {
      display: block; }
  :host.info {
    background-color: #4b4b53; }
    :host.info .icon .success-icon {
      display: none; }
    :host.info .icon .error-icon {
      display: none; }
  :host.completed {
    background-color: #2498BA; }
    :host.completed .icon .success-icon {
      display: flex; }
    :host.completed .icon .error-icon {
      display: none; }
  :host .status {
    grid-area: status;
    font-size: 15px;
    font-weight: bold;
    height: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    /* fix for IE11 */
    -ms-grid-column: 1;
    -ms-grid-row: 1; }
  :host .text {
    grid-area: text;
    height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
    /* fix for IE11 */
    -ms-grid-column: 1;
    -ms-grid-row: 2; }
  :host .id {
    grid-area: id;
    height: 16px;
    /* fix for IE11 */
    -ms-grid-column: 1;
    -ms-grid-row: 3; }
  :host .icon {
    grid-area: icon;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    /* fix for IE11 */
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3; }
    :host .icon .icon-tick:before, :host .icon .icon-msgr-alert:before {
      font-size: 30px; }
    :host .icon .dismiss-link a {
      padding: 0px;
      margin: 0px; }
    :host .icon .success-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%; }