/* =================================================================
   Obsidian Callout Style - CSS Part
   需要配合 JavaScript 实现交互
   ================================================================= */

/* -------------------------------------------
   1. 基础变量设置
   ------------------------------------------- */
:root {
    --line-height-tight: 1.3;
    --callout-border-width: 0px;
    --callout-border-opacity: 0.25;
    --callout-padding: 18px 12px 1px 15px;
    --callout-radius: 4px;
    --callout-title-color: inherit;
    --callout-title-padding: 0;
    --callout-title-size: inherit;
    --callout-title-weight: 600;
    --callout-content-padding: 0;
    --callout-content-background: transparent;
    
    /* 颜色定义 */
    --callout-default: 8, 109, 221;
    --callout-info: 0, 176, 255;
    --callout-success: 8, 185, 78;
    --callout-warning: 236, 117, 0;
    --callout-error: 233, 49, 71;
    --callout-tip: 0, 191, 188;
    --callout-question: 232, 148, 0;
    --callout-example: 120, 82, 238;
    --callout-quote: 158, 158, 158;
    
    /* 折叠图标 (Chevron Right) */
    --callout-collapse-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>");
}

/* 主题适配 */
.theme-light, html[data-theme="light"] { --callout-blend-mode: darken; }
.theme-dark, html[data-theme="dark"] { --callout-blend-mode: lighten; }

/* -------------------------------------------
   2. Callout 核心容器
   ------------------------------------------- */
.callout {
    border-style: solid;
    border-color: rgba(var(--callout-color), var(--callout-border-opacity));
    border-width: var(--callout-border-width);
    border-radius: var(--callout-radius);
    margin: 1em 0;
    mix-blend-mode: var(--callout-blend-mode);
    background-color: rgba(var(--callout-color), 0.1);
    padding: var(--callout-padding);
    --callout-color: var(--callout-default);
}

/* -------------------------------------------
   3. 标题区域
   ------------------------------------------- */
.callout-title {
    padding: var(--callout-title-padding);
    display: flex;
    gap: 7px;
    font-size: var(--callout-title-size);
    color: rgb(var(--callout-color));
    line-height: var(--line-height-tight);
    align-items: flex-start;
}

/* 可折叠的标题需要鼠标手势和下边距 */
.callout.is-collapsible .callout-title {
    cursor: pointer;
    margin-bottom: 12px; /* 展开时的标题下边距 */
}

/* 收起时去掉下边距，更紧凑 */
.callout.is-collapsed .callout-title {
    margin-bottom: 0;
}

/* -------------------------------------------
   4. 图标与折叠按钮
   ------------------------------------------- */
.callout-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.callout-icon svg {
    width: 19px;
    height: 19px;
}

.callout-title-inner {
    font-weight: var(--callout-title-weight);
    color: var(--callout-title-color);
    flex: 1; /* 让标题占据剩余空间 */
}

/* 折叠图标 */
.callout-fold {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    transition: transform 150ms ease-in-out;
    opacity: 0.7;
}

/* 默认状态（展开）：图标向下旋转 90 度 */
.callout.is-collapsible .callout-fold {
    transform: rotate(90deg);
}

/* 收起状态：图标恢复向右（0度）*/
.callout.is-collapsed .callout-fold {
    transform: rotate(0deg);
}

/* 使用 mask 绘制图标颜色 */
.callout-fold::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--callout-title-color);
    -webkit-mask-image: var(--callout-collapse-icon);
    mask-image: var(--callout-collapse-icon);
    -webkit-mask-size: cover;
    mask-size: cover;
}

/* -------------------------------------------
   5. 内容区域 (核心功能：收起时隐藏)
   ------------------------------------------- */
.callout-content {
    padding: var(--callout-content-padding);
    background-color: var(--callout-content-background);
}

/* !!! 关键：收起时隐藏内容 !!! */
.callout.is-collapsed .callout-content {
    display: none;
}

/* 消除内容区首元素的顶部边距 */
.callout-content > :first-child {
    margin-top: 0;
}

/* -------------------------------------------
   6. 各类型颜色定义
   ------------------------------------------- */
.callout[data-callout="info"], .callout[data-callout="todo"] { --callout-color: var(--callout-info); }
.callout[data-callout="success"], .callout[data-callout="check"], .callout[data-callout="done"] { --callout-color: var(--callout-success); }
.callout[data-callout="warning"], .callout[data-callout="caution"], .callout[data-callout="attention"] { --callout-color: var(--callout-warning); }
.callout[data-callout="question"], .callout[data-callout="help"], .callout[data-callout="faq"] { --callout-color: var(--callout-question); }
.callout[data-callout="danger"], .callout[data-callout="error"], .callout[data-callout="bug"], .callout[data-callout="failure"], .callout[data-callout="fail"], .callout[data-callout="missing"] { --callout-color: var(--callout-error); }
.callout[data-callout="tip"], .callout[data-callout="hint"], .callout[data-callout="important"] { --callout-color: var(--callout-tip); }
.callout[data-callout="example"] { --callout-color: var(--callout-example); }
.callout[data-callout="abstract"], .callout[data-callout="summary"], .callout[data-callout="tldr"] { --callout-color: var(--callout-summary); }
.callout[data-callout="quote"], .callout[data-callout="cite"] { --callout-color: var(--callout-quote); }