/** Use RGB and RGBA in caps! See https://github.com/sass/node-sass/issues/2251 */
:root { --admonition-color--info: 0, 176, 255; --admonition-color--warning: 255, 145, 0; --bg-opacity: 0.15; --admonition-icon--info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>'); --admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>'); }

.admonition { padding: .5rem; margin: .5rem 0; overflow: auto; box-shadow: RGBA(0, 0, 0, 0.05) 0px 0.2rem 0.5rem, RGBA(0, 0, 0, 0.1) 0px 0px 0.05rem; border-left: .2rem solid !important; }

.admonition:before { content: ""; display: block; height: 1rem; width: 1rem; }

.admonition--info { border-left-color: RGB(var(--admonition-color--info)) !important; background-color: RGBA(var(--admonition-color--info), var(--bg-opacity)) !important; }

.admonition--info:before { background-color: RGB(var(--admonition-color--info)); -webkit-mask-image: var(--admonition-icon--info); mask-image: var(--admonition-icon--info); }

.admonition--warning { border-left-color: RGB(var(--admonition-color--warning)) !important; background-color: RGBA(var(--admonition-color--warning), var(--bg-opacity)) !important; }

.admonition--warning:before { background-color: RGB(var(--admonition-color--warning)); -webkit-mask-image: var(--admonition-icon--warning); mask-image: var(--admonition-icon--warning); }