@import "./shared.scss";

Notifications {
    position: absolute;
    top: 50px;
    right: 50px;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    z-index: 500;

    .notification {
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 5px;
        color: white;
        font-size: 32px;
        font-family: Lilian;
        font-smooth: never;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-direction: row-reverse;

        text-shadow: 4px 4px 0 #053250;

        background-image: url("/ui/background-greyscale.png");
        background-repeat: repeat-x;
        background-color: #ebf0f6;

        background-image-tint: #719bfa;
        background-color: #6792f1;
        
        border: 5px solid white;
        
        // box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);

        .icon {
            font-size: 30px;
        }

        &:intro {
            animation: slideIn 0.5s;
        }

        &:outro {
            animation: slideOut 0.5s;
        }
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}