/* Toast (MudBlazor snackbar) styling. Remaps MudBlazor's snackbar palette to the project's own alert colors (see variables.css and alert.css) so toasts match the native .alert look. The overrides are scoped to the snackbar container so the rest of MudBlazor's theming is left untouched. The snackbar's filled-alert classes resolve these --mud-palette-* variables, and #mud-snackbar-container is the DOM ancestor of every toast, so setting them here wins for the toast subtree. Horizontal/vertical anchoring is configured in Program.cs (SnackbarConfiguration.PositionClass = BottomRight). When the sync notification tray is visible, sync-tray.js publishes its height as --sync-tray-height and adds .sync-tray-visible to so the toasts are lifted above the tray (see the bottom-right override below). */ #mud-snackbar-container { --mud-palette-info: var(--color-info); --mud-palette-info-text: var(--color-info-reverse); --mud-palette-success: var(--color-success); --mud-palette-success-text: var(--color-success-reverse); --mud-palette-warning: var(--color-warning); --mud-palette-warning-text: var(--color-warning-reverse); --mud-palette-error: var(--color-error); --mud-palette-error-text: var(--color-error-reverse); } /* Match the project's native .alert shape and typography (alert.css uses a 10px radius and the sans-serif family) so toasts read as part of the same design system. */ #mud-snackbar-container .mud-snackbar { font-family: var(--font-sans-serif); border-radius: 10px; } /* When the sync tray is on screen, raise the bottom-right toast stack above it. The tray sits at bottom: 20px, so add its measured height plus a 12px gap to the snackbar's own bottom offset. */ html.sync-tray-visible .mud-snackbar-location-bottom-right { bottom: calc(24px + var(--sync-tray-height, 0px) + 12px); }