.article--content {
  .ui-message {
    display: flex;
    align-items: center;
    width: 375px;
    margin: 1rem 0 2rem;
    padding: .85rem 0;
    font-family: $roboto;
    font-size: .9rem;
    border-radius: 5px;
    color: $g20-white;

    .icon, .close {
      width: 13%;
      text-align: center;
      font-family: 'icomoon';
      font-size: 1.1rem;
    }

    .close:after {
      content: "\e932";
      opacity: .25;
    }

    .text {
      width: 74%;
      font-weight: 600;
    }

    &.green {
      background: linear-gradient(to right, #4dd7a1, #21adf5);
      .icon:before { content: "\e922"; }
    }

    &.blue {
      background: linear-gradient(to right, #22adf6, #4591ed);
      .icon:before { content: "\e935"; }
    }

    &.red {
      background: linear-gradient(to right, #e8695c, #7669e8);
      .icon:before { content: "\e920"; }
    }


  }
}
