#toast-placeholder {
    display: none;
    flex-direction: column;
    gap: var(--spacing-8);
    position: fixed;
    z-index: 120;
    right: 0;
    margin: 0px var(--spacing-8);
    bottom: var(--spacing-12)
}

@media(min-width: 767.5px) {
    #toast-placeholder {
        bottom: var(--spacing-24);
        margin-right: var(--spacing-24);
        margin-left: unset
    }
}

#toast-placeholder.active {
    display: flex
}

@keyframes toastAnimation {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

#toast-placeholder .toast {
    animation: toastAnimation .5s
}

#toast-placeholder .toast.toast-info {
    background-color: var(--system-4);
    color: var(--system-3)
}

#toast-placeholder .toast.toast-info .toast-icon {
    -webkit-mask: url(/~/static/images/icons/icon-info.svg) no-repeat center;
    -webkit-mask-size: contain;
    background-color: var(--system-3)
}

#toast-placeholder .toast.toast-info .toast-close {
    background-color: var(--system-3)
}

#toast-placeholder .toast.toast-success {
    background-color: var(--system-2);
    color: var(--system-1)
}

#toast-placeholder .toast.toast-success .toast-icon {
    -webkit-mask: url(/~/static/images/icons/icon-info.svg) no-repeat center;
    -webkit-mask-size: contain;
    background-color: var(--system-1)
}

#toast-placeholder .toast.toast-success .toast-close {
    background-color: var(--system-1)
}

#toast-placeholder .toast.toast-error {
    background-color: var(--system-6);
    color: var(--system-5)
}

#toast-placeholder .toast.toast-error .toast-icon {
    -webkit-mask: url(/~/static/images/icons/icon-info.svg) no-repeat center;
    -webkit-mask-size: contain;
    background-color: var(--system-5)
}

#toast-placeholder .toast.toast-error .toast-close {
    background-color: var(--system-5)
}

#toast-placeholder .toast.toast-warning {
    background-color: var(--system-8);
    color: var(--system-7)
}

#toast-placeholder .toast.toast-warning .toast-icon {
    -webkit-mask: url(/~/static/images/icons/icon-info.svg) no-repeat center;
    -webkit-mask-size: contain;
    background-color: var(--system-7)
}

#toast-placeholder .toast.toast-warning .toast-close {
    background-color: var(--system-7)
}

#toast-placeholder .toast .toast-message {
    max-width: 316px
}

#toast-placeholder .toast .toast-icon {
    height: 20px;
    width: 20px;
    flex-shrink: 0
}

#toast-placeholder .toast .toast-close {
    height: 12px;
    width: 12px;
    -webkit-mask: url(/~/static/images/icons/icon-close.svg) no-repeat center;
    -webkit-mask-size: contain;
    flex-shrink: 0
}