/**
 * Notification styles
 */

.wpulike-notification {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    right: 20px;
    bottom: 20px;

    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .wpulike-message {
        position: relative;
        pointer-events: auto;
        word-wrap: break-word;
        overflow: hidden;
        margin: 0 0 6px;
        padding: 14px 15px 14px 65px;
        width: 290px;
        border-radius: 3px;
        background-color: #007bc3;
        color: $wp-ulike-color-light;
        animation: wpUlikeNotifitcationsAnimation 200ms backwards;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
        font-size: 0.9rem;
        font-weight: 500;
        line-height: normal;

        &:hover {
            opacity: 0.9;
            cursor: pointer;
        }

        &:before {
            content: "";
            background-position: center center;
            background-repeat: no-repeat;
            background-image: url(../img/svg/info.svg);
            background-size: 25px;
            position: absolute;
            left: 0;
            width: 50px;
            top: 0;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.06);
        }

        &.wpulike-success {
            background-color: #20a779;

            &:before {
                background-image: url(../img/svg/success.svg);
            }
        }

        &.wpulike-error {
            background-color: #ec4d2c;

            &:before {
                background-image: url(../img/svg/error.svg);
            }
        }

        &.wpulike-warning {
            background-color: #f0a82f;

            &:before {
                background-image: url(../img/svg/warning.svg);
            }
        }
    }
}

@keyframes wpUlikeNotifitcationsAnimation {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}


@media screen and (max-width:768px) {
    .wpulike-notification {

        .wpulike-message {
            padding: 11px 11px 11px 55px;
            font-size: 13px;

            &:before {
                background-size: 25px;
                width: 45px;
            }
        }
    }
}

@media screen and (max-width:320px) {
    .wpulike-notification {
        left: 10px;
        right: 10px;

        .wpulike-message {
            padding: 9px 9px 9px 45px;
            font-size: 12px;
            width: 100%;

            &:before {
                background-size: 15px;
                width: 35px;
            }

        }
    }
}