.admonition,
.admonition-icon {
  --admonition-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.75a9.25 9.25 0 1 1 0 18.5a9.25 9.25 0 1 1 0-18.5z'/><path d='M12 11v5.25M12 7.6v.01'/></svg>");
  --admonition-tint: var(--mark-blue);
  --admonition-wash: var(--admonition-note);
}

.admonition {
  margin-block: 0 var(--lexxy-content-margin);
  padding: 16px 22px;
  border-radius: 18px;
  background: var(--admonition-wash);
}

.admonition__title {
  position: relative;
  padding-inline-start: 1.5em;
  font-weight: 650;
  color: var(--admonition-tint);

  &::before {
    position: absolute;
    inset-block-start: calc(0.5lh - 0.5em);
    inset-inline-start: 0;
    width: 1em;
    height: 1em;
    content: "";
    background: currentColor;
    mask: var(--admonition-icon) center / contain no-repeat;
  }
}

.admonition > *,
aside.admonition > :is(h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
}

.admonition > * + *,
aside.admonition > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0.6em;
}

.admonition-icon::before {
  width: 1em;
  height: 1em;
  content: "";
  background: currentColor;
  mask: var(--admonition-icon) center / contain no-repeat;
}

.admonition--tip {
  --admonition-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 17.25v-.9c0-.95-.45-1.75-1.15-2.45a6.4 6.4 0 1 1 8.3 0c-.7.7-1.15 1.5-1.15 2.45v.9z'/><path d='M9.75 20.75h4.5'/></svg>");
  --admonition-tint: var(--mark-green);
  --admonition-wash: var(--admonition-tip);
}

.admonition--warning {
  --admonition-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M10.27 3.95 2.55 17.3a2 2 0 0 0 1.73 3h15.44a2 2 0 0 0 1.73-3L13.73 3.95a2 2 0 0 0-3.46 0z'/><path d='M12 9.25v4.25M12 16.85v.01'/></svg>");
  --admonition-tint: var(--mark-orange);
  --admonition-wash: var(--admonition-warning);
}

.admonition--danger {
  --admonition-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8.15 2.75h7.7l5.4 5.4v7.7l-5.4 5.4h-7.7l-5.4-5.4v-7.7z'/><path d='M12 7.5v5M12 16.25v.01'/></svg>");
  --admonition-tint: var(--mark-red);
  --admonition-wash: var(--admonition-danger);
}