@notice-prefix-cls: ~"@{css-prefix}notice";
@icon-prefix-cls: ~"@{css-prefix}icon";

@notice-width: 400px;
@notice-padding: 24px 32px 24px 32px;
@notice-margin-bottom: 10px;

.@{notice-prefix-cls} {
    // width: @notice-width;
    position: fixed;
    z-index: @zindex-notification;

    &-content-with-icon{
        margin-left: 30px;
    }
    &-with-desc&-with-icon &-title{
        margin-left: 30px;
    }

    &-notice {
        margin-bottom: @notice-margin-bottom;
        padding: @notice-padding;
        // border: 1px solid @border-color-split;
        border-radius: @border-radius-small;
        box-shadow: 0 4px 16px 0px @color-shadow3;
        background: @color-bg-notice;
        line-height: 1;
        position: relative;
        overflow: hidden;
        &-small{
            width:320px
        }
        &-medium{
            width:440px
        }
        &-large{
            width:620px
        }
        &-close {
            position: absolute;
            right: 15px;
            top: 15px;
            color: #999; // ★待定
            outline: none;

            i{
                .close-base(0px, 14px);
            }
        }

        &-content-with-render{
            .haloe-notice-desc{
                display: none;
            }
        }

        &-with-desc{
            .@{notice-prefix-cls}-notice-close{
                i{
                  color: @color-icon-normal2;
                  font-size: 20px;
                }
                i:hover {
                  color: @color-brand-primary;
                }
                :active {
                  color: @color-brand-primary
                }
            }
        }

        &-progress-wrapper {
            position: absolute;
            bottom: 8px;
            left: 32px;
            right: 32px;
            height: 4px;
        }

        &-progress {
            height: 100%;
            border-radius: 6px;
            background: linear-gradient(90deg, #1AAFFF, @color-brand-primary); // ★待定
            transition: width 0.05s linear;
        }
    }
    &-notice:last-child {
      margin-bottom: 0px;
    }

    &-content-with-render-notitle{
        margin-left: 26px;
    }

    &-title {
        font-size: @font-size-middle;
        line-height: @font-size-middle + 3;  //fixed the bug that the bottom of some letters were hidden just like 'g'
        color: @color-text-notice;
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }
    &-with-desc &-title{
        //font-weight: bold;
        margin-bottom: 12px;
    }

    &-desc {
        font-size: @font-size-base;
        //color: @legend-color;
        color: @text-color;
        text-align: justify;
        line-height: 1.5;
    }
    &-with-desc&-with-icon &-desc{
        margin-left: 30px;
    }

    &-detail {
        display: block;
        text-align: end;
        margin-top: 24px;
    }

    &-with-icon &-title{
        margin-left: 30px;
    }

    &-icon {
        position: absolute;
        top: -2px;
        font-size: @font-size-middle + 4;

        &-success {
            color: @success-color;
        }
        &-info {
            color: @primary-color;
        }
        &-warning {
            color: @warning-color;
        }
        &-error {
            color: @error-color;
        }
    }
    &-with-desc &-icon{
        font-size: 20px;
        top: -4px;
    }

    &-custom-content{
        position: relative;
    }
}


// .motion-common(@time) {
//   animation-duration: @time;
//   animation-fill-mode: both;
// }
// .make-motion(@className, @keyframeName, @time: @animation-time) {
//   .@{className}-enter-active, .@{className}-appear {
//       .motion-common(@time);
//       animation-play-state: paused;
//   }
//   .@{className}-leave-active {
//       .motion-common(@time);
//       animation-play-state: paused;
//   }
//   .@{className}-enter-active, .@{className}-appear {
//       animation-name: ~"@{keyframeName}In";
//       animation-play-state: running;
//   }
//   .@{className}-leave-active {
//       animation-name: ~"@{keyframeName}Out";
//       animation-play-state: running;
//   }
// }

// .move-motion(@className, @keyframeName) {
//   .make-motion(@className, @keyframeName);
//   .@{className}-enter-active, .@{className}-appear {
//       opacity: 0;
//       animation-timing-function: @ease-in-out;
//   }
//   .@{className}-leave-active {
//       animation-timing-function: @ease-in-out;
//   }
// }
// /*notice 进入、退出动画*/
// .move-motion(move-notice, haloeMoveNotice);

// @keyframes haloeMoveNoticeIn {
//   0% {
//       opacity: 0;
//       transform-origin: 0 0;
//       transform: translateX(100%);
//   }
//   100% {
//       opacity: 1;
//       transform-origin: 0 0;
//       transform: translateX(0%);
//   }
// }

// @keyframes haloeMoveNoticeOut {
//   0% {
//       transform-origin: 0 0;
//       transform: translateX(0%);
//       opacity: 1;
//   }
//   70% {
//       transform-origin: 0 0;
//       transform: translateX(100%);
//       height: auto;
//       padding: @notice-padding;
//       margin-bottom: @notice-margin-bottom;
//       opacity: 0;
//   }
//   100% {
//       transform-origin: 0 0;
//       transform: translateX(100%);
//       height: 0;
//       padding: 0;
//       margin-bottom: 0;
//       opacity: 0;
//   }
// }