@import "./var";
.#{$prefix}alert {
  font-size: $alert-font-size;
  line-height: inherit;
  padding: 14px 20px;
  vertical-align: middle;
  color: $alert-primary-color-text;
  border: 1px solid $alert-primary-color-border;
  border-radius: $alert-border-radius;
  background: $alert-primary-color-bg;
  position: relative;
  box-sizing: border-box;
  // max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:20px;
  display:flex;
  justify-content: space-between;
  align-items: flex-start;

  &__decoration{
    font-size: 0;
    flex:0 0 16px;
    margin-right: 16px;
    margin-top:1px;
  }
  &__operational{
    min-height: 26px;
    padding-left: 20px; 
    margin-top:-4px;
    margin-bottom:-4px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .#{$prefix}btn--icon{
      margin-left: 16px;
    }
  }

  &__nav{
    font-size: 0;
    &-item{
      display: inline-block;
      font-size: 0;
      width:8px;
      height:8px;
      background-color: $alert-nav-color-bg;
      border-radius: 100%;
      margin-right: 8px;
      border-width:1px;
      border-style: solid;
      border-color:$color-primary;
      cursor: pointer;

      &:last-child{
        margin-right: 0;
      }

      &.is-current{
        background-color:$color-primary;
      }
    }
  }

  &__info {
    flex:1;
    font-size:$alert-font-size;
    line-height: inherit;
    color:inherit;
    > .#{$prefix}list {
      padding: 10px 0 0;
      li:last-of-type {
        margin-bottom: 0;
      }
    }
    >.#{$prefix}list:first-child {
      padding: 0;
    }
    .#{$prefix}list--bullet > li::before {
      background-color: $alert-primary-color-text;
    }
    .#{$prefix}list--number>li::before {
      color: $alert-primary-color-text;
    }
  }
  .#{$prefix}list{
    color:inherit;
  }
  a{
    text-decoration: underline;
  }
  .#{$prefix}icon-close{
    background-image: url(../../assets/image/slice/svg/alert-close-blue.svg?fill=#{$alert-primary-color-text});
  }
  a,
  .#{$prefix}btn--link {
    color: $alert-primary-color-text;
  }

  .#{$prefix}icon-arrowdown{
    background-image: url(../../assets/image/slice/svg/page-next-blue-dark.svg?fill=#{$alert-primary-color-text});
  }
  .#{$prefix}icon-arrowup {
    background-image: url(../../assets/image/slice/svg/page-prev-blue-dark.svg?fill=#{$alert-primary-color-text});
  }
  
  // .#{$prefix}icon-close {
  //   // position: absolute;
  //   // top: 10px;
  //   // right: 10px;
  //   // margin-left:16px;
  //   &:hover {
  //     background-color:transparent
  //   }
  // }

  &--warning {
    color: $alert-warning-color-text;
    background-color: $alert-warning-color-bg;
    border-color:$alert-warning-color-border;

    a,
    .#{$prefix}btn--link {
      color: $alert-warning-color-text;
    }
    .#{$prefix}icon-close {
      background-image: url(../../assets/image/slice/svg/alert-close-warning.svg?fill=#{$alert-warning-color-text});
    }
    .#{$prefix}icon-arrowdown {
      background-image: url(../../assets/image/slice/svg/page-next-warning-dark.svg?fill=#{$alert-warning-color-text});
    }
    .#{$prefix}icon-arrowup {
      background-image: url(../../assets/image/slice/svg/page-prev-warning-dark.svg?fill=#{$alert-warning-color-text});
    }
    .#{$prefix}list--bullet>li::before {
      background-color: $alert-warning-color-text;
    }
    .#{$prefix}list--number>li::before {
      color: $alert-warning-color-text
    }
    .#{$prefix}alert__nav--dot{
      .#{$prefix}alert__nav-item{
        border-color:$color-warning;

        &.is-current{
          background-color: $color-warning;
        }
      }
    }
  }
  &--error {
      color: $alert-error-color-text;
      background-color: $alert-error-color-bg;
      border-color:$alert-error-color-border;
      a,
      .#{$prefix}btn--link{
        color:$alert-error-color-text;
      }
      .#{$prefix}icon-close {
        background-image: url(../../assets/image/slice/svg/alert-close-error.svg?fill=#{$alert-error-color-text});
      }
      .#{$prefix}icon-arrowdown {
        background-image: url(../../assets/image/slice/svg/page-next-error-dark.svg?fill=#{$alert-error-color-text});
      }

      .#{$prefix}icon-arrowup {
        background-image: url(../../assets/image/slice/svg/page-prev-error-dark.svg?fill=#{$alert-error-color-text});
      }
      .#{$prefix}list--bullet>li::before {
        background-color: $alert-error-color-text;
      }
      .#{$prefix}list--number>li::before{
        color:$alert-error-color-text;
      }
      .#{$prefix}alert__nav--dot {
        .#{$prefix}alert__nav-item {
          border-color: $color-error;

          &.is-current {
            background-color: $color-error;
          }
        }
      }
  }
  // 2019-12-10 去掉绿色提示条
  &--success {
    color: $alert-success-color-text;
      background-color: $alert-success-color-bg;
      border-color:$alert-success-color-border;

    
  }

  &--notice {
    color           : $color-text-weight;
    background-color: $alert-nav-color-bg;
    border-color:$alert-notice-color-border;
    position: relative;

    &.is-expanded{
      background-image: url(../../assets/image/alert-notice-bg.svg?fill=#{$alert-notice-color-bg-icon});
      background-repeat: no-repeat;
      background-position: right bottom;
    }
    .#{$prefix}icon-arrowdown {
      background-image: url(../../assets/image/slice/svg/page-next.svg?fill=#{$icon-color-default});
    }

    .#{$prefix}icon-arrowup {
      background-image: url(../../assets/image/slice/svg/page-prev.svg?fill=#{$icon-color-default});
    }

    a,
    .#{$prefix}btn--link {
      color: $color-primary;
    }
    .#{$prefix}alert__info .#{$prefix}list--bullet>li::before{
      background-color:$alert-notice-color-text;
    }
  }

}