.app-message {
  display: flex;
  flex-direction: row;
  align-content: center;

  .close {
    position: inherit;
    top: 3px;
  }

  span {
    flex: 1;
  }

  .icon {
    font-size: var(--wm-message-icon-size);
  }

  div:nth-child(2) {
    flex: 1;
    padding-left: 16px;
  }

  button.close {
   // color: var(--wm-message-color); //TODO Button color missing
    opacity: 1;
    text-shadow: none;
    padding: var(--wm-message-close-btn-padding);
    border-radius: var(--wm-message-close-btn-border-radius);
    border-color: var(--wm-message-close-btn-border-color) !important;
    background-color: var(--wm-message-close-btn-background-color) !important;
    ripple-color:var(--wm-message-close-btn-ripple-color) !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: 0;
  }
}

.wm-app .app-message > span {
    flex: 1;
}

.wm-app .app-message.alert-success .icon::before {
  content: "\f00c";
  font-size: var(--wm-message-icon-size);
  color:var(--wm-message-color);
}
.wm-app .app-message.alert-info .icon::before {
  content: "\f05a";
  font-size: var(--wm-message-icon-size);
  color:var(--wm-message-color);
}
.wm-app .app-message.alert-warning .icon::before {
  content: "\f0a2";
  font-size: var(--wm-message-icon-size);
  color:var(--wm-message-color);
}
.wm-app .app-message.alert-error .icon::before {
  content: "\f00d";
  font-size: var(--wm-message-icon-size);
  color:var(--wm-message-color);
}
.wm-app .app-message.alert-loading .icon::before {
  content: "\f110";
  font-size: var(--wm-message-icon-size);
  color:var(--wm-message-color);
}

.wm-app .app-message .icon::before{
  content: "\f00c";
  font-size: var(--wm-message-icon-size);
  color:var(--wm-message-color);
}