@notice-prefix: ~"@{prefix}notice";
@notice-width: 350px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;
.@{notice-prefix} {
    &-container{
        position: fixed;
        top: 50px;
        right: 10px;
    }
    transition: .7s;
    .@{notify-prefix} {
        &-container {
            min-width: @notice-width;
            top: auto;
            right: -100px;
            margin-bottom: 20px;
            left: auto;
            transform: none;
            position: relative;
            max-height: 0;
            overflow: hidden;

            header {
                min-height: 20px;
                line-height: 20px;
                font-size: 16px;
                padding: @notice-padding 0 0 @notice-padding;
            }
        }
        
        &-content {
            padding: @notice-padding - 4px @notice-padding;
            color: @gray-color;
            [class^="h-icon"], [class*=" h-icon"]{
                margin-right: 10px;
                display: inline-block;
            }
        }
    }
    
    &.@{notice-prefix}-has-icon{
        header{
            margin-left: 40px;
        }
        .@{notify-prefix}-content{
            margin-left: 40px;

            [class^="h-icon"], [class*=" h-icon"]{
                margin-right: 10px;
                float:left;
                font-size: 30px;
                position: absolute;
                left: -25px;
                top: -20px;
            }
        }
    }

    &.@{notify-prefix} {

        &-show {
            .@{notify-prefix}-container {
                top: auto;
                right: 0px;
                max-height: 1000px;
            }
        }
    }
}

// @notice-prefix: ~"@{prefix}notice";
// @notice-width: 350px;
// @notice-padding: 16px;
// @notice-margin-bottom: 10px;
// .@{notice-prefix} {
//     position: fixed;
//     right: -100px;
//     margin-top: 40px;
//     transition: @transition-time;
//     .@{notify-prefix} {
//         &-container {
//             min-width: @notice-width;
//             top: auto;
//             left: auto;
//             transform: none;
//             position: static;
//             transition: none;

//             header {
//                 min-height: 20px;
//                 line-height: 20px;
//                 font-size: 16px;
//                 padding: @notice-padding 0 0 @notice-padding;
//             }
//         }
//         &-content {
//             padding: 10px @notice-padding @notice-padding;
//             color: @gray-color;
//         }
//     }

//     &.@{notify-prefix} {
//         &-show {
//             right: 10px;
//         }
//     }
// }