.Message {
  background: var(--color-gray1);
  padding: var(--gap-m) var(--gap-l) var(--gap-m)
    calc(var(--gap-l) + var(--Icon-size) + var(--gap-s));
  position: relative;

  > .Message-icon::before {
    .Icon;

    content: 'info';
    left: var(--gap-l);
    position: absolute;
    top: calc(var(--gap-s) + var(--gap-xs));
  }

  ol,
  ul {
    margin-left: var(--gap-l);

    li:only-child {
      list-style: none;
    }
  }

  ol {
    list-style: decimal;
  }

  ul {
    list-style: disc;
  }

  p {
    margin: 0;
  }

  a {
    --Link-decoration: underline;

    text-decoration-style: solid;
    text-decoration-thickness: auto;
  }

  .is-emphasis {
    font-weight: bold;
    margin: 0 7px;
    text-transform: uppercase;
  }
}

.Message.is-error,
.Message.is-success {
  .Link.is-white;
}

.Message.is-success p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.Message.is-success p > span {
  margin-right: var(--gap-s);
}

.Message.is-error {
  background-color: var(--color-red6);
  color: var(--color-white);

  > .Message-icon::before {
    content: 'error';
  }
}

.Message.is-warning {
  background: var(--color-yellow3);
  color: inherit;

  > .Message-icon::before {
    content: 'warning';
  }

  .Link.is-black;

  &.WorkInProgressRestoredMessage {
    display: flex;
    flex-direction: row-reverse;

    .WorkInProgressRestoredMessage-actions a {
      margin-left: var(--gap-m);
      white-space: nowrap;
    }

    p {
      flex-grow: 1;
    }
  }
}

.Message.is-success {
  background: var(--color-green5);
  color: var(--color-white);

  > .Message-icon::before {
    content: 'check_circle';
  }

  .is-workflow & {
    background: var(--Revision-revisionBackgroundColor);
    color: var(--Revision-revisionTextColor);

    a {
      color: var(--Revision-revisionTextColor);
    }
  }
}

.Message.is-revision {
  background-color: var(--Revision-revisionBackgroundColor);
  display: flex;
  flex-flow: wrap;
  flex-direction: column;
  justify-content: space-between;

  > :first-child {
    margin-bottom: var(--gap-m);
  }

  > .Message-icon::before {
    background-color: var(--Revision-revisionColor);
    border: solid 2px var(--Revision-revisionBackgroundColor);
    border-radius: 50%;
    content: ' ';
    display: inline-block;
    height: var(--Icon-size);
    min-height: var(--Icon-size);
    min-width: var(--Icon-size);
    width: var(--Icon-size);
  }
}

.Message.is-upload {
  > .Message-icon::before {
    content: 'publish';
  }
}

.Message.is-workflow {
  align-items: center;
  display: flex;

  a {
    color: var(--Revision-revisionTextColor);
  }
}

.Message .ActionBar {
  background: transparent;
  border: 0;
  padding: 0;
}

@media (@mq-l) {
  .Message.is-revision {
    flex-direction: row;

    > :first-child {
      margin-bottom: auto;
    }
  }
}

/* Configuration Status variant */
.Message.is-configStatus {
  p {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .Message-meta {
    font-size: var(--fontSize-s);
  }

  .Message-issues {
    list-style: disc;
    margin-top: var(--gap-s);
  }
}
