// // @import "../var.scss";
$awardWidth: 355px;
$awardCupScale: 300px;
$awardBgImgWidth: 700px;
$awardBgImgHeight: 632px;
$transtionTimer: 300ms;

$itemW: 360px;

@mixin nitifyItem($bgColor, $textColor) {
  border-left: 3px solid $bgColor;
  // color: $textColor;

  &:hover {
    // background-color: rgba($bgColor, 1);
    box-shadow: 0 12px 48px rgba(#000, 0.2);
  }
  .notify-type-tip {
    // font-size: 30px;
    color: $bgColor;
  }
  .title {
    // border-color: rgba($bgColor, 1);
  }
  // .close-btn {
  //   // background-color: rgba($textColor, 1);
  //   color: $textColor;
  // }
  // .action {
  //   color: $textColor;
  // }
}

#NOTIFICATION_CONTAINER {
  .scroll-content {
    transition: padding 0.2s ease;
  }

  .notify-group {
    position: fixed;
    z-index: 1000;
    pointer-events: none;

    &.has-msg {
      .scroll-content {
        padding: 40px 0 40px 40px;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        pointer-events: all;
      }
    }

    .close-btn {
      background-color: transparent !important;
      font-size: 22px;
      color: #999;
    }

    @include positionHelper();

    .notify-type-tip {
      font-size: 30px;
      margin-right: 15px;
    }

    .notify-item {
      box-shadow: 0 0 24px rgba(0, 0, 0, 0.2);
      position: relative;
      cursor: pointer;
      // transition: all 0.3s ease;
      display: flex;
      // border-bottom: 1px dashed #CCC;
      margin-bottom: 10px;
      padding: 10px 20px;
      width: $itemW;
      border-radius: 4px 0 0 4px;
      // transition: all ease 0.2s;
      background-color: #FFF;
      pointer-events: auto;
      // transition: box-shadow ease 0.3s;

      &:hover {
        // transform: scale(1.02);
        box-shadow: 0 12px 36px rgba(#000, 0.5);
      }

      .title {
        padding: 8px 0;
        font-size: 16px;
        font-weight: bold;
      }

      ._close-btn {
        position: absolute;
        top: 0;
        right: 0;
        padding: 8px 24px;
        display: inline-block;
        &:hover {
          color: $themeColor;
          // color: #FFF;
        }
      }

      .text {
        padding: 10px 0;
      }

      .content {
        flex: 1;
      }

      .action {
        // margin-top: 10px;
        text-align: right;
        padding: 5px 10px;
        display: flex;
        // width: 100%;
        .action-btn {
          display: inline-block;
          padding: 5px 10px;
          border-radius: 4px;
          border: 1px solid #DDD;
          &:hover {
            background-color: rgba(#000, 0.06);
          }
        }
      }

      &.normal {
        @include nitifyItem(#FFF, #444);
      }
      &.success {
        @include nitifyItem($colorGreen, #FFF);
      }
      &.error {
        @include nitifyItem($colorRed, #FFF);
      }
      &.warn {
        @include nitifyItem($colorOrange, #FFF);
      }
      &.black {
        @include nitifyItem($colorBlack, #FFF);
      }
      &.white {
        @include nitifyItem(#FFF, #333);
      }
    }
  }
}