snackbar-component {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: column wrap;
    border-radius: 0.5rem;
    background-color: var(--grey-950);
    box-shadow: var(--shadow-black-md);
    color: var(--white);
    max-width: calc(100vw - 2rem);
    width: 100vw;
    opacity: 0;
    z-index: 9000;
    animation: notificationPop 300ms cubic-bezier(0.68, -25, 0.265, 1.55) forwards;
    left: 50%;
    transform: scale(0.87) translateX(-50%);
    transform-origin: left top;
    position: fixed;
    bottom: 1rem;
    border: 1px solid var(--grey-900);

    @media (prefers-color-scheme: dark) {
        backdrop-filter: blur(8px);
        background-color: hsl(var(--grey-950-hsl) / 0.87);
        border-color: var(--grey-700);
    }

    @media (min-width: 411px) {
        flex-flow: row nowrap;
    }

    @media (min-width: 768px) {
        width: auto;
    }

    & p {
        padding: 1rem;
        line-height: var(--line-snug);
        font-size: var(--text-sm);
    }

    & snackbar-actions {
        display: inline-flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        padding: 0 1rem 1rem;

        @media (min-width: 411px) {
            padding: 0;
            padding-right: 0.5rem;
        }

        & button {
            user-select: none;
            font-weight: 500;
            font-size: 0.875rem;
            height: 36px;
            line-height: 1;
            padding: 0 0.5rem;
            color: var(--primary-200);
            text-transform: uppercase;
            text-align: center;
            cursor: pointer;
            outline-offset: 0;

            &:not(:last-child) {
                margin-right: 0.5rem;
            }

            &:focus-visible {
                outline: var(--focus-ring);
                outline-offset: var(--focus-ring-offset);
                transition: outline-offset 80ms ease-in-out;
            }

            &:hover {
                &::before {
                    opacity: 0.05;
                }
            }

            &:active {
                outline-offset: 0;

                &::before {
                    opacity: 0.1;
                }
            }

            &::before {
                content: "";
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 0.25rem;
                background-color: var(--primary-400);
                opacity: 0;
                transition: all 80ms ease-in-out;
            }
        }

        & .close {
            position: relative;
            width: 36px;
            height: 36px;
            display: inline-flex;
            justify-content: center;
            padding: 0;
            align-items: center;
            flex-flow: column wrap;
            color: var(--white);
            cursor: pointer;
            user-select: none;
            transition: all 80ms ease-in-out;
            outline-offset: 0;
            border-radius: 50%;

            &:focus-visible {
                outline: var(--focus-ring);
                outline-offset: var(--focus-ring-offset);
                transition: outline-offset 80ms ease-in-out;
            }

            &:hover {
                &::before {
                    opacity: 0.05;
                }
            }

            &:active {
                outline-offset: 0;

                &::before {
                    opacity: 0.1;
                }
            }

            & svg {
                width: 18px;
                height: 18px;
                position: relative;
                margin: 0;
            }

            &::before {
                width: 36px;
                height: 36px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: inline-block;
                content: "";
                border-radius: 50%;
                background-color: var(--white);
                opacity: 0;
                transition: all 80ms ease-in-out;
            }
        }
    }
}

@keyframes notificationPop {
    from {
        opacity: 0;
        transform: scale(0.87) translateX(-50%);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(-50%);
    }
}