/* HACK !
   All styles in this file should be marked as !important
   because BlazoredToast uses CSS isolation as of version 4
*/

:root {
    --base-blazored-toast-bg-color: var(--bs-body-bg);
    --base-blazored-toast-border-color: var(--bs-border-color);
    --base-blazored-toast-progressbar-bg-color: rgba(0, 0, 0, 0.1);
}

[data-bs-theme=dark] {
    --base-blazored-toast-progressbar-bg-color: rgba(255, 255, 255, 0.3);
}

.blazored-toast-container {
    z-index: 6 !important;
}

.blazored-toast {
    animation: none !important;
    background-color: var(--base-blazored-toast-bg-color) !important;
    border: 1px solid var(--base-blazored-toast-border-color) !important;
    color: inherit !important;
    margin-bottom: 0.5rem !important;
    width: 100vw !important;
}

.blazored-toast-progressbar > span {
    background-image: linear-gradient(var(--base-blazored-toast-progressbar-bg-color) 0 0) !important;
}

@media (min-width: 576px) {
    .blazored-toast {
        width: 498px !important;
    }
}

.blazored-toast-component {
    background-color: var(--base-blazored-toast-bg-color) !important;
    color: inherit !important;
    display: flex !important;
    padding: 1rem 1.25rem !important;
}

.position-topleft, .position-topright, .position-topcenter {
    top: 4rem !important;
}

@media (min-width: 576px) {
    .position-topright {
        right: 1rem !important;
    }
}