:root {
    --un-ring-offset-shadow: 0 0 transparent;
    --un-ring-shadow: 0 0 transparent
}

.custom-callout {
    border-left: 3px solid;
    border-radius: var(--callout-radius);
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
    margin: 1rem 0;
    padding: 0 !important;
}

:root {
    --callout-note: 68, 138, 255;
    --callout-abstract: 0, 176, 255;
    --callout-info: 0, 184, 212;
    --callout-tip: 0, 191, 165;
    --callout-success: 8, 185, 78;
    --callout-question: 224, 172, 0;
    --callout-warning: 255, 145, 0;
    --callout-failure: 255, 82, 82;
    --callout-danger: 255, 23, 68;
    --callout-bug: 245, 0, 87;
    --callout-example: 124, 77, 255;
    --callout-quote: 158, 158, 158;
    --callout-radius: 0px;
    --callout-border-opacity: 0.5;
    --callout-title-bg-opacity: 0.08
}

.callout-fold:before {
    align-self: center;
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron-down"><path d="m6 9 6 6 6-6"/></svg>')
}

.callout-fold {
    display: flex;
    transform: rotate(-90deg);
    transition: .5s cubic-bezier(.075, .82, .165, 1)
}

.custom-callout[open]>summary>.callout-fold {
    transform: rotate(0deg)
}

.custom-callout>summary {
    border-top-left-radius: var(--callout-radius);
    border-top-right-radius: var(--callout-radius);
    cursor: pointer;
    margin: 0;
    padding: 1rem
}

.custom-callout>summary::marker {
    content: ""
}

.custom-callout>summary:before {
    margin-right: .5rem
}

.custom-callout>summary::-webkit-details-marker {
    display: none
}

.callout-title {
    display: flex;
    justify-content: space-between
}

.custom-callout>.callout-body {
    background: transparent !important;
    border-left: none;
    margin: 0 !important;
    padding: .5rem 1rem;
    position: relative
}

.custom-callout>.callout-body>p {
    margin: 8px 0
}

.custom-callout>.callout-body>pre {
    margin: 1.25rem -1rem
}

.custom-callout>.callout-body>pre:first-child {
    margin-top: -.75rem
}

.custom-callout>.callout-body>pre:last-child {
    margin-bottom: -.75rem
}

.custom-callout.note,
.custom-callout.seealso {
    border-color: rgba(var(--callout-note), var(--callout-border-opacity))
}

.custom-callout.note>summary,
.custom-callout.seealso>summary {
    background-color: rgba(var(--callout-note), var(--callout-title-bg-opacity))
}

.custom-callout.abstract,
.custom-callout.summary,
.custom-callout.tldr {
    border-color: rgba(var(--callout-abstract), var(--callout-border-opacity))
}

.custom-callout.abstract>summary,
.custom-callout.summary>summary,
.custom-callout.tldr>summary {
    background-color: rgba(var(--callout-abstract), var(--callout-title-bg-opacity))
}

.custom-callout.info,
.custom-callout.todo {
    border-color: rgba(var(--callout-info), var(--callout-border-opacity))
}

.custom-callout.info>summary,
.custom-callout.todo>summary {
    background-color: rgba(var(--callout-info), var(--callout-title-bg-opacity))
}

.custom-callout.hint,
.custom-callout.important,
.custom-callout.tip {
    border-color: rgba(var(--callout-tip), var(--callout-border-opacity))
}

.custom-callout.hint>summary,
.custom-callout.important>summary,
.custom-callout.tip>summary {
    background-color: rgba(var(--callout-tip), var(--callout-title-bg-opacity))
}

.custom-callout.check,
.custom-callout.done,
.custom-callout.success {
    border-color: rgba(var(--callout-success), var(--callout-border-opacity))
}

.custom-callout.check>summary,
.custom-callout.done>summary,
.custom-callout.success>summary {
    background-color: rgba(var(--callout-success), var(--callout-title-bg-opacity))
}

.custom-callout.faq,
.custom-callout.help,
.custom-callout.question {
    border-color: rgba(var(--callout-question), var(--callout-border-opacity))
}

.custom-callout.faq>summary,
.custom-callout.help>summary,
.custom-callout.question>summary {
    background-color: rgba(var(--callout-question), var(--callout-title-bg-opacity))
}

.custom-callout.attention,
.custom-callout.caution,
.custom-callout.warning {
    border-color: rgba(var(--callout-warning), var(--callout-border-opacity))
}

.custom-callout.attention>summary,
.custom-callout.caution>summary,
.custom-callout.warning>summary {
    background-color: rgba(var(--callout-warning), var(--callout-title-bg-opacity))
}

.custom-callout.fail,
.custom-callout.failure,
.custom-callout.missing {
    border-color: rgba(var(--callout-failure), var(--callout-border-opacity))
}

.custom-callout.fail>summary,
.custom-callout.failure>summary,
.custom-callout.missing>summary {
    background-color: rgba(var(--callout-failure), var(--callout-title-bg-opacity))
}

.custom-callout.danger,
.custom-callout.error {
    border-color: rgba(var(--callout-danger), var(--callout-border-opacity))
}

.custom-callout.danger>summary,
.custom-callout.error>summary {
    background-color: rgba(var(--callout-danger), var(--callout-title-bg-opacity))
}

.custom-callout.bug {
    border-color: rgba(var(--callout-bug), var(--callout-border-opacity))
}

.custom-callout.bug>summary {
    background-color: rgba(var(--callout-bug), var(--callout-title-bg-opacity))
}

.custom-callout.example {
    border-color: rgba(var(--callout-example), var(--callout-border-opacity))
}

.custom-callout.example>summary {
    background-color: rgba(var(--callout-example), var(--callout-title-bg-opacity))
}

.custom-callout.cite,
.custom-callout.quote {
    border-color: rgba(var(--callout-quote), var(--callout-border-opacity))
}

.custom-callout.cite>summary,
.custom-callout.quote>summary {
    background-color: rgba(var(--callout-quote), var(--callout-title-bg-opacity))
}

.callout-title>.callout-icon+div {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
    margin-left: .25rem
}

.callout-icon {
    align-items: center;
    color: #000;
    display: flex
}

.callout-icon:before {
    height: 20px;
    width: 20px
}

.custom-callout.attention>.callout-title>.callout-icon:before,
.custom-callout.caution>.callout-title>.callout-icon:before,
.custom-callout.warning>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23FF9100" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-alert-triangle"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3ZM12 9v4M12 17h.01"/></svg>')
}

.custom-callout.note>.callout-title>.callout-icon:before,
.custom-callout.seealso>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23448AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-pencil"><path d="m18 2 4 4M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"/></svg>')
}

.custom-callout.abstract>.callout-title>.callout-icon:before,
.custom-callout.summary>.callout-title>.callout-icon:before,
.custom-callout.tldr>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2300B0FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-clipboard-list"><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M12 11h4M12 16h4M8 11h.01M8 16h.01"/></svg>')
}

.custom-callout.info>.callout-title>.callout-icon:before,
.custom-callout.todo>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2300B8D4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-check-circle-2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>')
}

.custom-callout.hint>.callout-title>.callout-icon:before,
.custom-callout.important>.callout-title>.callout-icon:before,
.custom-callout.tip>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2300BFA5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-flame"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg>')
}

.custom-callout.check>.callout-title>.callout-icon:before,
.custom-callout.done>.callout-title>.callout-icon:before,
.custom-callout.success>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2300C853" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>')
}

.custom-callout.faq>.callout-title>.callout-icon:before,
.custom-callout.help>.callout-title>.callout-icon:before,
.custom-callout.question>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23E0AC00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-help-circle"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></svg>')
}

.custom-callout.fail>.callout-title>.callout-icon:before,
.custom-callout.failure>.callout-title>.callout-icon:before,
.custom-callout.missing>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23FF5252" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-x"><path d="M18 6 6 18M6 6l12 12"/></svg>')
}

.custom-callout.danger>.callout-title>.callout-icon:before,
.custom-callout.error>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23FF1744" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-zap"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>')
}

.custom-callout.bug>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23F50057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-bug"><rect x="8" y="6" width="8" height="14" rx="4"/><path d="m19 7-3 2M5 7l3 2M19 19l-3-2M5 19l3-2M20 13h-4M4 13h4M10 4l1 2M14 4l-1 2"/></svg>')
}

.custom-callout.example>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%237C4DFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-list"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>')
}

.custom-callout.cite>.callout-title>.callout-icon:before,
.custom-callout.quote>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%239E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-quote"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1zM15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>')
}

/* 找不到关键字则提供默认样式 note 样式 */

.custom-callout>.callout-title>.callout-icon:before,
.custom-callout.seealso>.callout-title>.callout-icon:before {
    content: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23448AFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-pencil"><path d="m18 2 4 4M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"/></svg>')
}

.custom-callout,
.custom-callout.seealso {
    border-color: rgba(var(--callout-note), var(--callout-border-opacity));
    /* 不起作用 */
}

.custom-callout>summary,
.custom-callout.seealso>summary {
    background-color: rgba(var(--callout-note), var(--callout-title-bg-opacity))
}


/* 标题加粗并着色 */

.custom-callout .callout-title>.callout-icon+div {
    font-weight: bold;
    color: rgba(var(--callout-note));
    /* 默认颜色 */
}

.custom-callout.abstract>.callout-title>.callout-icon+div,
.custom-callout.summary>.callout-title>.callout-icon+div,
.custom-callout.tldr>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-abstract));
}

.custom-callout.info>.callout-title>.callout-icon+div,
.custom-callout.todo>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-info));
}

.custom-callout.hint>.callout-title>.callout-icon+div,
.custom-callout.important>.callout-title>.callout-icon+div,
.custom-callout.tip>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-tip));
}

.custom-callout.check>.callout-title>.callout-icon+div,
.custom-callout.done>.callout-title>.callout-icon+div,
.custom-callout.success>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-success));
}

.custom-callout.question>.callout-title>.callout-icon+div,
.custom-callout.faq>.callout-title>.callout-icon+div,
.custom-callout.help>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-question));
}

.custom-callout.attention>.callout-title>.callout-icon+div,
.custom-callout.caution>.callout-title>.callout-icon+div,
.custom-callout.warning>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-warning));
}

.custom-callout.fail>.callout-title>.callout-icon+div,
.custom-callout.failure>.callout-title>.callout-icon+div,
.custom-callout.missing>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-failure));
}

.custom-callout.error>.callout-title>.callout-icon+div,
.custom-callout.danger>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-danger));
}

.custom-callout.bug>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-bug));
}

.custom-callout.example>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-example));
}

.custom-callout.cite>.callout-title>.callout-icon+div,
.custom-callout.quote>.callout-title>.callout-icon+div {
    color: rgba(var(--callout-quote));
}