@charset "UTF-8";
@import "../../style/function";

$stateSuccessText: #3c763d !default;
$stateSuccessBg: #dff0d8 !default;
$stateSuccessBorder: darken(adjust-hue($stateSuccessBg, -10), 5%) !default;

$stateInfoText: #31708f !default;
$stateInfoBg: #d9edf7 !default;
$stateInfoBorder: darken(adjust-hue($stateInfoBg, -10), 7%) !default;

$stateWarningText: #8a6d3b !default;
$stateWarningBg: #fcf8e3 !default;
$stateWarningBorder: darken(adjust-hue($stateWarningBg, -10), 5%) !default;

$stateDangerText: #a94442 !default;
$stateDangerBg: #f2dede !default;
$stateDangerBorder: darken(adjust-hue($stateDangerBg, -10), 5%) !default;

$sceneNormalText:  #fffbe5;
$sceneBorder: #f7dcb1;
$sceneStrong: #e85308;
$sceneLink: #188eee;

.im-alert {
  position: relative;
  font-size: 14px;
  color: $color3;
  border: 1px solid;
  padding: 10px;

  .i-close:last-child {
    position: absolute;
    right: 10px;
    color: $colorC;
    float: right;
    cursor: pointer;
    @include center-translate(y);

    &:hover {
      color: $colorOverlay;
    }
  }

  &-success {
    color: $stateSuccessText;
    background-color: $stateSuccessBg;
    border-color: $stateSuccessBorder;
  }

  &-info {
    color: $stateInfoText;
    background-color: $stateInfoBg;
    border-color: $stateInfoBorder;
  }

  &-warning {
    color: $stateWarningText;
    background-color: $stateWarningBg;
    border-color: $stateWarningBorder;
  }

  &-danger {
    color: $stateDangerText;
    background-color: $stateDangerBg;
    border-color: $stateDangerBorder;
  }

  em {
    color: $sceneStrong;
    font-style: normal;
  }

  a {
    color: $sceneLink;
    text-decoration: none;
  }

  &-global,
  &-module {
    background-color: $sceneNormalText;
    border-color: $sceneBorder;

    .i-alert {
      position: absolute;
      margin-top: 2px;
      color: $sceneStrong;
    }

    .im-icon.i-close {
      top: 16px;
    }
  }

  &-global {
    border-left: 0;
    border-right: 0;
    line-height: 22px;
  }

  &-module {
    line-height: 20px;
    padding: 6px 10px;

    &-multiline {
      padding-right: 20px;
      padding-left: 21px;
      display: inline-block;
    }
  }
}