@import "../common/varible";
@import "../common/function";

.yu-alert {
  font-family: $font-family;
  padding: $space-small;
  border-radius: $radius;
  width: 100%;
  font-size: $normal;
  margin-bottom: $space;
  position: relative;
  box-sizing: border-box;
  background-color: lighten($info, 37);
  & > i {
    vertical-align: middle;
    margin-right: $space-tiny;
    font-size: $normal;
    &.icon-close{
      vertical-align: middle;
      line-height: 20px;
      position: absolute;
      right: $space-small;
      top: $space-small;
      color: $text-light;
      cursor: pointer;
      margin: 0;
      &:hover {
        color: darken($text-light, 10);
      }
    }
  }
  @include generalAllColorAlert();
  &.center {
    text-align: center;
  }
  & > .title {
    margin: 0;
    font-size: $normal;
    font-weight: bold;
    &>i{
      margin-right: $space-tiny;
    }
  }
  & > .description {
    margin: 0;
    padding-top: $space-small;
    font-size: $small;
  }
}