@import "./../variable.scss";
@mixin messageStyle ($color, $opacity: .07) {
  background-color: rgba($color, $opacity);
  color: $color;
} 
.pad-hx-message {
  width: 100%;
  display: block;
  padding: 0;
  .hx-message {
    width: 100%;
    display: block;
    font-size: $font-md;
    line-height: 1.5;
    text-align: justify;
    position: relative;
    &.main { @include messageStyle($color-main); }
    &.info { @include messageStyle($color-blue); }
    &.error { @include messageStyle($color-red);  }
    &.success { @include messageStyle($color-green);  }
    &.warn { @include messageStyle($color-orange);  }
    &.fatal { @include messageStyle($color-black);  }
    .text {
      display: block;
      width: calc(100% - #{$height-normal/2});
    }
    &.sm {
      padding: $pm-sm;
      border-radius: $pm-sm / 2;
      .btn-close { 
        right: $pm-sm/2;
      }
    }
    &.md {
      padding: $pm-sm * 1.5;
      border-radius: $pm-sm * 3 / 4;
      .btn-close { 
        right: $pm-sm;
      }
    }
    &.bg {
      padding: $pm-md;
      border-radius: $pm-sm;
      .btn-close { 
        right: $pm-sm * 3 / 2;
      }
    }
    .btn-close {
      width: $height-normal/2;
      height: $height-normal/2;
      line-height: $height-normal/2;
      text-align: center;
      position: absolute;
      font-size: $font-lg;
      @include centerVertical;
      right: $pm-sm;
    }
  }
}