.sm-notification
    position: fixed
    display: flex
    z-index: 9999
    right: 16px
    top 16px
    width: 330px
    padding: 20px
    box-sizing border-box
    border-radius 2px
    background-color #fff
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    transition: all .4s;
    overflow: hidden

    &.state-hidden
        transform translateX(346px)

    &.state-open
        transform translateX(0)

    &-group
        color: #000

    &-type
        margin auto 0
        margin-right 20px
        &.type-success
            color: #13ce66
        &.type-info
            color: #50bfff
        &.type-warning
            color: #f7ba2a
        &.type-error
            color: #ff4949
    &-title
        color: #1f2d3d
        font-size 16px
    &-content
        color: #8d9baf
        padding: 5px 0
    &-close
        position: absolute
        cursor: pointer
        right 20px
        top: 20px
        &-btn
            transition all .3s
            color #bfcbd9
            &:hover
                color: #777F8C