@import 'anim.less';

.notification-box {
    position: absolute;
    bottom: 30px;
    right: 30px;
    max-width: 480px;
    width: 80%;
    z-index: 1001;

    .notification {
        padding: 30px;
        background-color: @base-white-color;
        margin-top: 20px;
        border-radius: 3px;
        position: relative;
        cursor: pointer;
        transition: background-color .3s ease, box-shadow .3s ease;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .375);

        &:hover {
            background-color: @color-light-bg;
            box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
        }

        .notification-bar {
            position: absolute;
            top: 0;
            left: 0;
            height: 2px;
            z-index: 10;
            width: 0;
            background-color: @font-normal-color;
            transition-property: width;
            transition-timing-function: ease;
        }

        &.notification-real {
            opacity: 0;
            transition: opacity .3s ease;

            &.notification-anim-start {
                opacity: 1;

                .notification-bar {
                    width: 100%;
                }
            }

            &.notification-anim-end {
                opacity: 0;
            }
        }

        &.notification-default .notification-bar {
            background-color: @base-default-color;
        }

        &.notification-primary .notification-bar {
            background-color: @base-primary-color;
        }

        &.notification-cobalt .notification-bar {
            background-color: @base-cobalt-color;
        }

        &.notification-success .notification-bar {
            background-color: @base-success-color;
        }

        &.notification-danger .notification-bar {
            background-color: @base-danger-color;
        }

        &.notification-alert .notification-bar {
            background-color: @base-alert-color;
        }

        &.notification-notice .notification-bar {
            background-color: @base-notice-color;
        }

        &.notification-force .notification-bar {
            background-color: @base-force-color;
        }

        &.notification-empty {
            opacity: 0;
            position: absolute;
            width: 100%;
            left: -10000px;
            top: -10000px;

            &.notification-anim {
                position: relative;
                height: 0;
                padding-top: 0;
                padding-bottom: 0;
                margin-bottom: 0;
                transition: height .3s ease;
            }
        }

        .notification-btn-group {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 50px;
            border-right: 1px solid @color-silver;

            .notification-btn {
                display: table;
                table-layout: fixed;
                border-collapse: collapse;
                position: absolute;
                width: 100%;
                height: 50%;
                font-size: 200%;
                border-bottom: 1px solid @color-silver;
                transition: background-color .3s ease;

                &:hover,
                &:focus {
                    background-color: @color-normal-bg;
                }

                &:last-child {
                    border-bottom: none;
                }

                &.notification-btn-close {
                    top: 50%;
                }

                &.notification-btn-ok i {
                    margin-top: .125em;
                }

                &.notification-btn-close i {
                    font-size: 130%;
                }

                .notification-btn-inner {
                    display: table-cell;
                    vertical-align: middle;
                    text-align: center;
                }
            }
        }

        .notification-header {
            font-weight: 600;
            color: @font-dark-color;
        }

        .notification-body {
            line-height: 1.6;
            color: @font-light-color;
        }

        .notification-content {
            margin-left: 50px;
        }
    }
}