@reference "../css/globals.css";
.admonition {
--admonition-bg: var(--blue-2);
--admonition-border: var(--blue-8);
--admonition-heading-color: var(--blue-11);
display: flex;
position: relative;
flex-direction: column;
padding: 1rem;
padding-left: 3rem;
border-left: 4px solid;
margin-bottom: 1rem;
background-color: var(--admonition-bg);
border-color: var(--admonition-border);
&::before {
position: absolute;
margin-top: 0.35rem;
margin-left: -2rem;
}
}
.admonition-title {
font-weight: bold;
color: var(--admonition-heading-color);
@apply tracking-wide;
> .paragraph {
margin: 0;
padding-top: 0.5rem;
font-weight: initial;
text-transform: none;
@apply text-foreground tracking-normal;
}
}
/* Icons from https://lucide.dev/icons/ */
.admonition.info,
.admonition.note {
--admonition-bg: var(--blue-2);
--admonition-border: var(--blue-8);
--admonition-heading-color: var(--blue-11);
&::before {
content: light-dark(
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,')
);
}
}
.admonition.danger,
.admonition.caution,
.admonition.error {
--admonition-bg: var(--red-2);
--admonition-border: var(--red-8);
--admonition-heading-color: var(--red-11);
&::before {
content: light-dark(
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,')
);
}
}
.admonition.attention,
.admonition.warning {
--admonition-bg: var(--yellow-2);
--admonition-border: var(--yellow-8);
--admonition-heading-color: var(--yellow-11);
&::before {
content: light-dark(
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,')
);
}
}
.admonition.hint {
--admonition-bg: var(--gray-2);
--admonition-border: var(--gray-8);
--admonition-heading-color: var(--gray-11);
.dark & {
--admonition-bg: var(--gray-3);
}
&::before {
content: light-dark(
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,')
);
}
}
.admonition.important {
--admonition-bg: var(--cyan-2);
--admonition-border: var(--cyan-8);
--admonition-heading-color: var(--cyan-11);
&::before {
content: light-dark(
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,')
);
}
}
.admonition.tip {
--admonition-bg: var(--grass-2);
--admonition-border: var(--grass-8);
--admonition-heading-color: var(--grass-11);
&::before {
content: light-dark(
url('data:image/svg+xml;utf8,'),
url('data:image/svg+xml;utf8,')
);
}
}