@import "./var";

.#{$prefix}notification-wrap{
    position: fixed;
    right:0;
    top:85px;
    right:$notification-space*5;
    max-width: $notification-max-width;
    text-align: right;
    font-size: 0;
    z-index: 1100;
    border-radius: $notification-border-radius;
}

.#{$prefix}notification{
    overflow: hidden;
    font-size: $notification-font-size;
    text-align: left;
    display:inline-block; // 为了宽度自适应
    position: relative;
    max-width: 100%;
    min-width: 200px;
    background-color:$notification-color-bg ;
    box-shadow: $notification-box-shadow;
    margin-bottom: $notification-space*5;

    &__close{
        position: absolute;
        top:$notification-space*2 + 1px;
        right:$notification-space*3;
        .#{$prefix}btn--icon:hover{
            background-color: inherit;
            .#{$prefix}icon-close{
                background-image: url(../../assets/image/slice/svg/btn-dismiss.svg?fill=#{$icon-color-weight});
            }
        }
    }

    &__header{
        padding:$notification-space*3 $notification-space*10 $notification-space*3 $notification-space*4;
        // margin-bottom: -$notification-space*2;
        background-color: $notification-color-bg;
        &-title{
            display: inline-block;
            font-size: $notification-font-title-size;
            color:$notification-color-text-label-title;
            line-height: $notification-header-title-line-height;
        }

        &-sub-info{
            display: inline-block;
            font-size: $notification-font-size;
            color:$notification-color-text-label;
            margin-right:$notification-space*4 ;
            vertical-align: middle;
        }
    }

    &__body{
        padding:$notification-body-padding;
        display: flex;
        word-wrap:break-word;
        word-break:break-word;
        
        .#{$prefix}icon{
            flex:0 0 16px;
            margin-right: $notification-space*2;
            margin-top: 2px;
        }
    }

    &__footer{
        padding:$notification-footer-padding;
        position: relative;

        &::before{
            content:"";
            display: none;
            position: absolute;
            left:$notification-space*4;
            right:$notification-space*4;
            top:0;
            height:1px;
            background-color: $notification-color-border-inner;
        }
        .#{$prefix}btn--text{
            font-size: $notification-font-size;
            color:$notification-color-text-label;
        }

        &--link{
            padding:$notification-footer-link-padding;
            &:hover{
                background-color: $notification-color-bg-hover;
                cursor: pointer;
            }
            &::before{
                background-color: $notification-color-border-inner;
                left:0;
                right:0;
            }
        }
    }

    &__text{
        // display: -webkit-box;
        // overflow: hidden;
        // -webkit-line-clamp:3;
        // -webkit-box-orient: vertical;
        @include clamp(3);
        line-height: $line-height-fz-default;
    }

    &--success{
        background-color:$notification-success-color-bg;
         
        .#{$prefix}notification__footer{
            background-color:$notification-success-footer-color-bg;

            .#{$prefix}btn--text{
                color:$notification-success-color-text
            }
            &--link{
                .#{$prefix}text-label{
                    color:$notification-success-color-text !important;
                }
            }
        }
    }
    &--error{
        background-color:$notification-error-color-bg;
        
        .#{$prefix}notification__footer{
            background-color:$notification-error-footer-color-bg;

            .#{$prefix}btn--text{
                color:$notification-error-color-text
            }
            &--link{
                .#{$prefix}text-label{
                    color:$notification-error-color-text !important;
                }
            }
        }
        
    }
    &--warning{
        background-color:$notification-warning-color-bg;

        .#{$prefix}notification__footer{
            background-color:$notification-warning-footer-color-bg;
            .#{$prefix}btn--text{
                color:$notification-warning-color-text
            }
            &--link{
                .#{$prefix}text-label{
                    color:$notification-warning-color-text !important;
                }
            }
        }
    }
}