/* SUCCESS */
.custom-success {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(9, 239, 29, 0.9);
    color: white;
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
    -webkit-transition: background-color 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

    .custom-success:hover {
        box-shadow: none !important;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        background-color: rgba(10, 181, 25, 0.9);
    }

        .custom-success:hover::after {
            content: '';
            position: absolute;
            top: var(--mouse-y, 50%);
            left: var(--mouse-x, 50%);
            transform: translate(-50%, -50%);
            width: 160%;
            height: 160%;
            pointer-events: none;
        }


/* INFO */
.custom-info {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(16, 219, 255, 0.9);
    color: white;
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
    -webkit-transition: background-color 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

    .custom-info:hover {
        box-shadow: none !important;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        background-color: rgba(0, 165, 191, 0.9);
    }

        .custom-info:hover::after {
            content: '';
            position: absolute;
            top: var(--mouse-y, 50%);
            left: var(--mouse-x, 50%);
            transform: translate(-50%, -50%);
            width: 160%;
            height: 160%;
            pointer-events: none;
        }


/* WARNING */
.custom-warning {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 132, 0, 0.9);
    color: black;
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
    -webkit-transition: background-color 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

    .custom-warning:hover {
        box-shadow: none !important;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        background-color: rgba(202, 106, 0, 0.9);
    }

        .custom-warning:hover::after {
            content: '';
            position: absolute;
            top: var(--mouse-y, 50%);
            left: var(--mouse-x, 50%);
            transform: translate(-50%, -50%);
            width: 160%;
            height: 160%;
            pointer-events: none;
        }


/* ERROR / DANGER */
.custom-error {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 38, 38, 0.9);
    color: white;
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
    -webkit-transition: background-color 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

    .custom-error:hover {
        box-shadow: none !important;
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        background-color: rgba(216, 0, 0, 0.9);
    }

        .custom-error:hover::after {
            content: '';
            position: absolute;
            top: var(--mouse-y, 50%);
            left: var(--mouse-x, 50%);
            transform: translate(-50%, -50%);
            width: 160%;
            height: 160%;
            pointer-events: none;
        }