@import '../scss/base';

.r-alert{
  display: flex;
  align-items: baseline;
  padding: 10px 20px;
  margin: 10px 0;

  .r-icon{
    flex-shrink: 0;
  }
  .r-alert-msg{
    flex-grow: 1;
    margin-left: 10px;
  }
  .ion-ios-close-empty{
    color: $color-msg;
    font-size: 30px;
    cursor: pointer;

    &:hover{
      color: $color-danger;
    }
  }
}

.r-alert-info{
  background: $color-msg-bg;
  color: $color-msg;
}
.r-alert-success{
  background: $color-success-bg;
  color: $color-success;
}
.r-alert-warning{
  background: $color-warning-bg;
  color: $color-warning;
}
.r-alert-danger{
  background: $color-danger-bg;
  color: $color-danger;
}