@scope (.toast-container) {
    position: fixed;
    top: calc(var(--space-8) + var(--space-2));
    right: var(--space-6);
    height: 100px;
    z-index: 9999;

    & .toast {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--space-2);
        height: 100%;

        background: var(--white);
        border-color: var(--color-primary);
        border-width: 0 var(--border-width-notification);
        border-style: solid;
        border-radius: var(--radius-xl);
        padding: var(--space-3);

        opacity: 1;
        transition: opacity 0.75s ease-in-out;

        animation: FadeIn 0.75s ease-in-out;

        & .toast-icon {
            display: flex;
            justify-content: center;
            align-items: start;

            & .toast-icon-img {
                width: 50px;
                height: 50px;
            }
        }

        & .toast-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;

            & .toast-title {
                font-weight: var(--font-weight-bold);
                font-size: var(--font-size-md);
                line-height: var(--line-body-md);
                margin-bottom: 0;
            }

            & .toast-message {
                font-size: var(--font-size-sm);
                line-height: var(--line-body-sm);
                margin: 0;
            }
        }

        & .toast-close {
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: end;
            align-items: start;
            height: 100%;

            & .toast-close-icon {
                width: 10px;
                height: 10px;
            }
        }
    }

    & .toast.hide {
        opacity: 0;
    }

    @keyframes FadeIn {
        /* fade in notification */
        from {
            opacity: 0;
            transform: translateY(-0.5rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}