/* Shared Code-tab presentation. Demo styles must not override this layer. */
.source-accordion {
    margin-top: 20px;
    border-top: 1px solid var(--line);
}

.source-code-item {
    border-bottom: 1px solid var(--line);
}

.source-code-item h3 {
    margin: 0;
}

.source-code-item .source-file {
    width: 100%;
    padding: 13px 2px;
    justify-content: flex-start;
    gap: 10px;
    color: var(--ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.source-language-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    object-fit: contain;
}

.source-code-item .source-file code {
    color: var(--ink);
    font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.source-code-item .source-file i {
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 1.5px solid #687386;
    border-bottom: 1.5px solid #687386;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}

.source-code-item .source-file:not(.collapsed) i {
    transform: rotate(225deg) translate(-2px, -2px);
}

.source-code-item pre {
    max-height: 360px;
    padding: 14px 16px;
    margin: 0 0 14px;
    overflow: auto;
    background: #f7f8fb;
    border: 1px solid #e5e8ed;
    border-radius: 6px;
}

.source-code-item pre code.hljs {
    padding: 0;
    color: #242529;
    background: transparent;
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 11px;
    line-height: 1.7;
    white-space: pre;
}