@mantine/core/styles/Notification.css

React components library focused on usability, accessibility and developer experience

.m-a513464{--notification-radius:var(--mantine-radius-default);--notification-color:var(--mantine-primary-color-filled);align-items:center;box-shadow:var(--mantine-shadow-lg);box-sizing:border-box;display:flex;overflow:hidden;padding:var(--mantine-spacing-xs) var(--mantine-spacing-xs) var(--mantine-spacing-xs) calc(1.375rem*var(--mantine-scale));position:relative}.m-a513464,.m-a513464:before{border-radius:var(--notification-radius)}.m-a513464:before{background-color:var(--notification-color);bottom:var(--notification-radius);content:"";display:block;left:calc(.25rem*var(--mantine-scale));position:absolute;top:var(--notification-radius);width:calc(.375rem*var(--mantine-scale))}:where([dir=rtl]) .m-a513464:before{left:auto;right:calc(.25rem*var(--mantine-scale))}:where([data-mantine-color-scheme=light]) .m-a513464{background-color:var(--mantine-color-white)}:where([data-mantine-color-scheme=dark]) .m-a513464{background-color:var(--mantine-color-dark-6)}.m-a513464:where([data-with-icon]){padding-left:var(--mantine-spacing-xs)}:where([dir=rtl]) .m-a513464:where([data-with-icon]){padding-right:var(--mantine-spacing-xs)}.m-a513464:where([data-with-icon]):before{display:none}:where([data-mantine-color-scheme=light]) .m-a513464:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-gray-3)}:where([data-mantine-color-scheme=dark]) .m-a513464:where([data-with-border]){border:calc(.0625rem*var(--mantine-scale)) solid var(--mantine-color-dark-4)}:where([dir=rtl]) .m-a513464{padding-left:var(--mantine-spacing-xs);padding-right:calc(1.375rem*var(--mantine-scale))}.m-a4ceffb{align-items:center;background-color:var(--notification-color);border-radius:calc(1.75rem*var(--mantine-scale));box-sizing:border-box;color:var(--mantine-color-white);display:flex;height:calc(1.75rem*var(--mantine-scale));justify-content:center;margin-right:var(--mantine-spacing-md);width:calc(1.75rem*var(--mantine-scale))}:where([dir=rtl]) .m-a4ceffb{margin-left:var(--mantine-spacing-md);margin-right:0}.m-b0920b15{margin-right:var(--mantine-spacing-md)}:where([dir=rtl]) .m-b0920b15{margin-left:var(--mantine-spacing-md);margin-right:0}.m-a49ed24{flex:1;margin-right:var(--mantine-spacing-xs);overflow:hidden}:where([dir=rtl]) .m-a49ed24{margin-left:var(--mantine-spacing-xs);margin-right:0}.m-3feedf16{font-size:var(--mantine-font-size-sm);font-weight:500;line-height:var(--mantine-line-height-sm);margin-bottom:calc(.125rem*var(--mantine-scale));overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .m-3feedf16{color:var(--mantine-color-gray-9)}:where([data-mantine-color-scheme=dark]) .m-3feedf16{color:var(--mantine-color-white)}.m-3d733a3a{color:var(--_description-color);font-size:var(--mantine-font-size-sm);line-height:var(--mantine-line-height-sm);overflow:hidden;text-overflow:ellipsis}[data-mantine-color-scheme=light] .m-3d733a3a{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] .m-3d733a3a{color:var(--mantine-color-dark-0)}[data-mantine-color-scheme=light] .m-3d733a3a:where([data-with-title]){color:var(--mantine-color-gray-6)}[data-mantine-color-scheme=dark] .m-3d733a3a:where([data-with-title]){color:var(--mantine-color-dark-2)}@media (hover:hover){[data-mantine-color-scheme=light] .m-919a4d88:hover{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-919a4d88:hover{background-color:var(--mantine-color-dark-8)}}@media (hover:none){[data-mantine-color-scheme=light] .m-919a4d88:active{background-color:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-919a4d88:active{background-color:var(--mantine-color-dark-8)}}