@import "../../core/styles/themes/default";
@import "../../core/styles/mixins/index";

@notification-prefix-cls: ~"@{ant-prefix}-notification";
@notification-width: 384px;
@notification-padding-vertical: 16px;
@notification-padding-horizontal: 24px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;

.@{notification-prefix-cls} {
    .reset-component;

    position: fixed;
    z-index: @zindex-notification;
    width: @notification-width;
    max-width: ~"calc(100vw - 32px)";
    margin-right: 24px;

    &-topLeft,
    &-bottomLeft {
        margin-left: 24px;
        margin-right: 0;

        .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
        .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
            animation-name: NotificationLeftFadeIn;
        }
    }

    &-close-icon {
        font-size: @font-size-base;
        cursor: pointer;
    }

    &-notice {
        padding: @notification-padding;
        border-radius: @border-radius-base;
        box-shadow: @shadow-2;
        background: @component-background;
        line-height: 1.5;
        position: relative;
        margin-bottom: @notification-margin-bottom;
        overflow: hidden;

        &-message {
            font-size: @font-size-lg;
            color: @heading-color;
            margin-bottom: 8px;
            line-height: 24px;
            display: inline-block;

            // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
            &-single-line-auto-margin {
                width: ~"calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)";
                background-color: transparent;
                pointer-events: none;
                display: block;
                max-width: 4px;
                &:before {
                    content: '';
                    display: block;
                }
            }
        }

        &-description {
            font-size: @font-size-base;
        }

        &-closable &-message {
            padding-right: 24px;
        }

        &-with-icon &-message {
            font-size: @font-size-lg;
            margin-left: 48px;
            margin-bottom: 4px;
        }

        &-with-icon &-description {
            margin-left: 48px;
            font-size: @font-size-base;
        }

        &-icon {
            position: absolute;
            font-size: 24px;
            line-height: 24px;
            margin-left: 4px;

            &-success {
                color: @success-color;
            }
            &-info {
                color: @info-color;
            }
            &-warning {
                color: @warning-color;
            }
            &-error {
                color: @error-color;
            }
        }

        &-close {
            position: absolute;
            right: 22px;
            top: 16px;
            color: @text-color-secondary;
            outline: none;

            a&:focus {
                text-decoration: none;
            }

            &:hover {
                color: shade(@text-color-secondary, 40%);
            }
        }

        &-btn {
            float: right;
            margin-top: 16px;
        }
    }

    .notification-fade-effect {
        animation-duration: 0.24s;
        animation-fill-mode: both;
        animation-timing-function: @ease-in-out;
    }

    &-fade-enter,
    &-fade-appear {
        opacity: 0;
        .notification-fade-effect();
        animation-play-state: paused;
    }

    &-fade-leave {
        .notification-fade-effect();
        animation-duration: 0.2s;
        animation-play-state: paused;
    }

    &-fade-enter&-fade-enter-active,
    &-fade-appear&-fade-appear-active {
        animation-name: NotificationFadeIn;
        animation-play-state: running;
    }

    &-fade-leave&-fade-leave-active {
        animation-name: NotificationFadeOut;
        animation-play-state: running;
    }
}

@keyframes NotificationFadeIn {
    0% {
        opacity: 0;
        left: @notification-width;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}

@keyframes NotificationLeftFadeIn {
    0% {
        opacity: 0;
        right: @notification-width;
    }
    100% {
        right: 0;
        opacity: 1;
    }
}

@keyframes NotificationFadeOut {
    0% {
        opacity: 1;
        margin-bottom: @notification-margin-bottom;
        padding-top: @notification-padding;
        padding-bottom: @notification-padding;
        max-height: 150px;
    }
    100% {
        opacity: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        max-height: 0;
    }
}
