/* ================================================== */
/* CONTAINER */
/* ================================================== */

.alerts {
    position: fixed;
    z-index: 10;
    bottom: 20px;
    width: 100vw;
    pointer-events: none;
}

.toast-container {
    position: fixed;
    z-index: 10;
    top: 20px;
    right: 20px;
    pointer-events: none;
}

/* ================================================== */
/* MESSAGE */
/* ================================================== */

.alerts .alert {
    background-color: var(--color-text-main);
    color: var(--color-bg-main);
    width: fit-content;
    transition: 
        opacity 0.4s,
        transform 0.6s linear(0, 0.0086, 0.0322, 0.068, 0.1132, 0.1654, 0.2227, 0.2832, 0.3453, 0.4078, 0.4695, 0.5295, 0.5871, 0.6418, 0.6932, 0.7409, 0.7849, 0.8249, 0.861, 0.8933, 0.9219, 0.9469, 0.9685, 0.987, 1.0025, 1.0154, 1.0258, 1.034, 1.0403, 1.0448, 1.0478, 1.0495, 1.05, 1.0497, 1.0486, 1.0468, 1.0446, 1.042, 1.0392, 1.0362, 1.033, 1.0299, 1.0268, 1.0238, 1.0209, 1.0182, 1.0156, 1.0132, 1.011, 1.0089, 1.0071, 1.0055, 1.004, 1.0028, 1.0017, 1.0007, 0.9999, 0.9993, 0.9987, 0.9983, 0.998, 0.9978, 0.9976, 0.9975, 0.9975, 0.9975, 0.9976, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9985, 0.9986, 0.9988, 0.9989, 0.9991, 0.9992, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9998, 0.9999, 0.9999, 1, 1, 1, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1);
    transform: translateY(60px);
    opacity: 0;
}

.alerts .alert.visible {
    transform: translateY(0);
    opacity: 1;
}

.toast-container .notification-row {
    opacity: 0;
    transform: translateY(-48px);
    background-color: var(--color-surface-main);
    border: 1px solid var(--color-tertiary);
    backdrop-filter: blur(4px);
    transition:
        transform 0.6s linear(0, 0.0086, 0.0322, 0.068, 0.1132, 0.1654, 0.2227, 0.2832, 0.3453, 0.4078, 0.4695, 0.5295, 0.5871, 0.6418, 0.6932, 0.7409, 0.7849, 0.8249, 0.861, 0.8933, 0.9219, 0.9469, 0.9685, 0.987, 1.0025, 1.0154, 1.0258, 1.034, 1.0403, 1.0448, 1.0478, 1.0495, 1.05, 1.0497, 1.0486, 1.0468, 1.0446, 1.042, 1.0392, 1.0362, 1.033, 1.0299, 1.0268, 1.0238, 1.0209, 1.0182, 1.0156, 1.0132, 1.011, 1.0089, 1.0071, 1.0055, 1.004, 1.0028, 1.0017, 1.0007, 0.9999, 0.9993, 0.9987, 0.9983, 0.998, 0.9978, 0.9976, 0.9975, 0.9975, 0.9975, 0.9976, 0.9976, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9985, 0.9986, 0.9988, 0.9989, 0.9991, 0.9992, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9998, 0.9999, 0.9999, 1, 1, 1, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1),
        opacity 0.3s;
}

.toast-container .notification-row.show {
    opacity: 1;
    transform: translateY(0px);
}