@notice-prefix: ~"@{prefix}notice";
@notice-width: 350px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;
.@{notice-prefix} {
    &-container{
        position: fixed;
        top: 50px;
        right: 10px;
        z-index: 1000;
    }
    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;
            }
            footer {
                padding: 10px @notice-padding;
                text-align: left;
            }
        }
        
        &-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;
            }
        }
        footer {
            margin-left: 40px;
        }
    }

    &.@{notify-prefix} {

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