:root {
    --toast-foreground: #fff;
    --toast-on-surface: #444;
    --toast-text-on-light-bg: #444;
    --toast-text-on-dark-bg: #fff;
    --toast-success: #198754;
    --toast-failure: #dc3545;
    --toast-warning: #ffc107;
    --toast-info: #fff;

    /* Borders */
    --toast-border-on-light-bg: #44444450;
    --toast-border-on-dark-bg: #ffffff50;

    /* Filters for svg btn-close */
    --toast-filter-on-high-luminance: invert(50%) brightness(0%);
    --toast-filter-on-low-luminance: invert(50%) brightness(200%);

}

.toast-notification {
    z-index: 2000;
    text-align: left;
}

.toast {
    max-width: 350px;
    min-width: 250px;
    width: auto;
    background-color: var(--theme-foreground, var(--toast-foreground));
    padding: 0.75rem;
    font-size: 0.875rem;
}

.toast-header {
    padding: 0 1.25rem 0.5rem 0.75rem;
    background-color: inherit;
    border-color: #ffffff50;
    color: inherit;
}

.toast-body {
    padding: 0.5rem 0.75rem 0 0.75rem;
}

.toast-body.no-header {
    padding: 0.75rem 1.25rem 0.75rem 0.75rem;
}

.alert-dismissible {
    padding: inherit;
}

.toast.alert-dismissible .btn-close {
    padding: 0.75rem 1rem 1.25rem 1rem;
}

.toast .btn-close {
    /* background-color: var(--theme-on-surface, var(--toast-on-surface)); */
    /* -webkit-mask: url("/staticfiles/icons/customicons/svgs/close-x.svg") center/1em auto no-repeat; */
    /* mask: url("/staticfiles/icons/customicons/svgs/close-x.svg") center/1em auto no-repeat; */
    /* -webkit-mask: url('data:image/svg+xml;utf8,<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_429_11083)"><path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_429_11083"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>'); */
    /* mask: url('data:image/svg+xml;utf8,<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_429_11083)"><path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_429_11083"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>'); */
    /* mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 7L17 17M7 17L17 7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); */
    background-image: none;
    opacity: 0.75;
    font-size: 11pt;
    margin: 0 !important;
    padding: 0.25em 0.25em;
}

.toast .btn-close:hover {
    background-color: var(--theme-on-surface, var(--toast-on-surface));
    text-decoration: none;
    opacity: 1;
}

.toast .btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    opacity: 1;
}

.toast .btn-close:disabled,
.toast .btn-close.disabled {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0.25;
}

.toast .btn-link {
    font-size: 0.875rem;
}

/* Rules for specific statuses */

/* Success */
.toast.success {
    color: var(--theme-toast-text-on-low-luminance, var(--toast-text-on-dark-bg));
    background-color: var(--theme-success, var(--toast-success));
    border: none;
}

.toast.success .btn-close {
    filter: var(--toast-filter-on-low-luminance);

}

.toast.success .toast-header {
    border-color: var(--toast-border-on-dark-bg);
}

/* Info */
.toast.info {
    color: var(--theme-toast-text-on-high-luminance, var(--toast-text-on-light-bg));
    background-color: var(--theme-info, var(--toast-info));
    border: none;
}

.toast.info .btn-close {
    filter: var(--toast-filter-on-high-luminance);
}

.toast.info .toast-header {
    border-color: var(--toast-border-on-light-bg);
}

/* Warning */
.toast.warning {
    color: var(--theme-toast-text-on-high-luminance, var(--toast-text-on-light-bg));
    background-color: var(--theme-warning, var(--toast-warning));
    border: none;
}

.toast.warning .btn-close {
    filter: var(--toast-filter-on-high-luminance);
}

.toast.warning .toast-header {
    border-color: var(--toast-border-on-light-bg);
}


/* Error */
.toast.error {
    color: var(--theme-toast-text-on-low-luminance, var(--toast-text-on-dark-bg));
    background-color: var(--theme-failure, var(--toast-failure));
    border: none;
}

.toast.error .btn-close {
    filter: var(--toast-filter-on-low-luminance);
}

.toast.error .toast-header {
    border-color: var(--toast-border-on-dark-bg);
}