/**
 * Joe主题代码块折叠样式
 * 适配prism-okaidia等主题
 */

/* 代码折叠容器 */
.code-collapse-container {
    position: relative;
    margin: 0 0 18px;
    border-radius: var(--radius-inner, 8px);
    overflow: hidden;
    /* 移除背景色，让代码块保持自己的背景 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 代码块样式调整 */
.code-collapse-container pre[class*='language-'] {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* 保持原有的背景色，不要设置为transparent */
}

/* 渐变遮罩 */
.code-collapse-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    z-index: 5;
}

/* 适配prism-okaidia主题的渐变 */
.code-collapse-container pre[class*='language-'] + .code-collapse-gradient {
    background: linear-gradient(transparent, #272822);
}

/* 适配其他prism主题的渐变 */
.code-collapse-container:not([class*='okaidia']) .code-collapse-gradient {
    background: linear-gradient(transparent, var(--background, #fff));
}

/* 折叠按钮 */
.code-collapse-btn {
    position: absolute;
    bottom: 10px;
    right: 15px;
    z-index: 10;
    padding: 6px 12px;
    background: var(--theme, #007bff);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    user-select: none;
}

.code-collapse-btn:hover {
    background: var(--theme-hover, #0056b3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.code-collapse-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 适配prism-okaidia主题的按钮样式 */
.code-collapse-container pre[class*='language-'] ~ .code-collapse-btn {
    background: #f92672;
    color: #f8f8f2;
}

.code-collapse-container pre[class*='language-'] ~ .code-collapse-btn:hover {
    background: #e91e63;
}

/* 展开状态下的样式 */
.code-collapse-container.expanded {
    max-height: none !important;
}

.code-collapse-container.expanded .code-collapse-gradient {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .code-collapse-btn {
        padding: 4px 8px;
        font-size: 11px;
        bottom: 8px;
        right: 10px;
    }
    
    .code-collapse-gradient {
        height: 40px;
    }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
    .code-collapse-container {
        background: var(--background-dark, #1a1a1a);
    }
    
    .code-collapse-gradient {
        background: linear-gradient(transparent, var(--background-dark, #1a1a1a));
    }
    
    .code-collapse-btn {
        background: var(--theme-dark, #4a9eff);
    }
    
    .code-collapse-btn:hover {
        background: var(--theme-hover-dark, #3a8eef);
    }
}

/* 确保复制按钮在折叠按钮之上 */
.code-collapse-container .copy {
    z-index: 15 !important;
}

/* 动画效果 */
.code-collapse-container {
    transition: max-height 0.3s ease-in-out;
}

.code-collapse-gradient {
    transition: opacity 0.3s ease-in-out;
}

/* 针对不同prism主题的特殊处理 */
/* prism-okaidia主题 */
.code-collapse-container pre[class*='language-'].language-okaidia ~ .code-collapse-gradient {
    background: linear-gradient(transparent, #272822);
}

/* prism-dark主题 */
.code-collapse-container pre[class*='language-'].language-dark ~ .code-collapse-gradient {
    background: linear-gradient(transparent, #2d2d2d);
}

/* prism-tomorrow主题 */
.code-collapse-container pre[class*='language-'].language-tomorrow ~ .code-collapse-gradient {
    background: linear-gradient(transparent, #2d2d2d);
}

/* prism-twilight主题 */
.code-collapse-container pre[class*='language-'].language-twilight ~ .code-collapse-gradient {
    background: linear-gradient(transparent, #141414);
}