.alert__message__container {
    z-index: 1000;
    position: fixed;
    top: var(--header-height);
    left: 50%;
    translate: -50% -200%;
    width: max-content;
    min-height: 4rem;
    height: 4rem;
    max-width: calc(100vw - var(--h-gap2));
    overflow: hidden;
    background-color: var(--primary-color);
    border-radius: var(--squared-border-radius);
    padding: 1rem 1.25rem;
    opacity: 0;
    transition: .35s cubic-bezier(.86, 0, .07, 1);
    user-select: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;

    svg {
        height: 100%;
        aspect-ratio: 1/1;
    }

    button {
        width: auto;
        aspect-ratio: 1 / 1;
        padding: 0;

        svg {
            height: 100%;
            width: 100%;
            padding: .5rem;
        }
    }

    span {
        position: absolute;
        bottom: 0;
        left: 0;
        height: .2rem;
        background-color: var(--accent-color);
        border-radius: var(--squared-border-radius);
    }

    #check-group {
        animation: 0.32s ease-in-out 1.03s check-group;
        transform-origin: center;
    }

    #check-group #check {
        animation: 0.34s cubic-bezier(0.65, 0, 1, 1) 0.8s forwards check;
        stroke-dasharray: 0, 75px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    #check-group #outline {
        animation: 0.38s ease-in outline;
        transform: rotate(0deg);
        transform-origin: center;
    }

    #check-group #white-circle {
        animation: 0.35s ease-in 0.35s forwards circle;
        transform: none;
        transform-origin: center;
    }

    @keyframes outline {
        from {
            stroke-dasharray: 0, 345.576px;
        }

        to {
            stroke-dasharray: 345.576px, 345.576px;
        }
    }

    @keyframes circle {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(0);
        }
    }

    @keyframes check {
        from {
            stroke-dasharray: 0, 75px;
        }

        to {
            stroke-dasharray: 75px, 75px;
        }
    }

    @keyframes check-group {
        from {
            transform: scale(1);
        }

        50% {
            transform: scale(1.09);
        }

        to {
            transform: scale(1);
        }
    }

    #check-group {
        animation: 0.32s ease-in-out 1.03s check-group;
        transform-origin: center;
    }

    #check-group #check {
        animation: 0.34s cubic-bezier(0.65, 0, 1, 1) 0.8s forwards check;
        stroke-dasharray: 0, 75px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    #check-group #outline {
        animation: 0.38s ease-in outline;
        transform: rotate(0deg);
        transform-origin: center;
    }

    #check-group #white-circle {
        animation: 0.35s ease-in 0.35s forwards circle;
        transform: none;
        transform-origin: center;
    }

    @keyframes outline {
        from {
            stroke-dasharray: 0, 345.576px;
        }

        to {
            stroke-dasharray: 345.576px, 345.576px;
        }
    }

    @keyframes circle {
        from {
            transform: scale(1);
        }

        to {
            transform: scale(0);
        }
    }

    @keyframes check {
        from {
            stroke-dasharray: 0, 75px;
        }

        to {
            stroke-dasharray: 75px, 75px;
        }
    }

    @keyframes check-group {
        from {
            transform: scale(1);
        }

        50% {
            transform: scale(1.09);
        }

        to {
            transform: scale(1);
        }
    }
}

.alert__message__container.active {
    transition: .4s cubic-bezier(.86, 0, .07, 1);
    translate: -50%;
    opacity: 1;
}