/* Messages */

.messages {
  margin: 1.5em 0;
  padding: 1em 2em;
  &:before {
    content: "";
    background: url(../../assets/messages.svg) 0 0 no-repeat;
    display: block;
    float: left;
    height: 35px;
    width: 35px;
    background-size: 35px;
    margin: -3px 10px 0 -1em;
  }
  &.status {
    background: hsla(99, 39%, 82%, 0.86);
  }
  &.status:before {
    background-position: 0 0;
  }
  &.warning {
    background-color: hsla(49, 73%, 71%, 0.54);
  }
  &.warning:before {
    background-position: 0 -90px;
  }
  &.error {
    background-color: hsla(0, 69%, 58%, 0.27);
  }
  &.error:before {
    background-position: 0 -44px;
  }
}