/* NOTIFICATION & VALIDATION STYLING */

div.notification,
div.validation,
div.alert {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 1rem 1.2rem 1rem 1rem;
    text-align: left;
    border-radius: var(--borderRadius);

    color: var(--main);
    background-color: var(--mainLight);
    border-bottom: 2px solid var(--main);

    max-width: var(--layoutMaxWidth);

    gap: 1rem;
}

div.notification .icon,
div.validation .icon,
div.alert .icon {
    width: 1rem;
    min-width: 1rem;
}

div.notification.warn,
div.validation.warn,
div.alert.warn {
    color: var(--alert);
    background-color: var(--alertBackground);
    border-color: var(--alert);
}

div.notification.success,
div.validation.success,
div.alert.success {
    color: var(--success);
    background-color: var(--successBackground);
    border-color: var(--success);
}

/* NOTIFICATION STYLING */

div.notification {
    max-width: calc(100vw - 4rem);
    display: none;
    top: 0;
    z-index: 100;
    position: fixed;
    /* margin: 0 2rem; */
    box-shadow: 0px 6px 12px var(--shadow);
    /* border: none; */
    animation-iteration-count: 1;
    animation-delay: 0;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.290, 0.045, 0.210, 1.230);
    animation-name: slide-down;
    animation-duration: 5s;
}

div.notification.show {
    display: flex;
}

@keyframes slide-down {
    0% {
        top: -10rem;
    }

    10% {
        top: 6rem;
    }

    90% {
        opacity: 1;
        top: 6rem;
    }

    to {
        opacity: 0;
        top: -10rem;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}