/**
 * Code block — assets/js/code-highlight.js (highlight.js)
 *
 * Classes: .code-block, .code-block__details, .code-block__summary, .code-block__pre
 */

.code-block {
    margin: 0;
}

.code-block__details {
    border-radius: var(--border-radius-s);
    overflow: hidden;
}

.code-block__summary {
    margin: 0;
    padding: 0.5rem 2.25rem 0.5rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.875rem;
    color: var(--brand-colour-text);
    background: var(--brand-colour-primary);
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
}

.code-block__summary::-webkit-details-marker {
    display: none;
}

.code-block__summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.875rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.15s ease;
}

.code-block__details[open] > .code-block__summary::after {
    transform: translateY(-35%) rotate(-135deg);
}

.code-block__summary:focus-visible {
    outline: 2px solid var(--brand-colour-link-dark);
    outline-offset: -2px;
}

.code-block__pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.5;
    background: #f6f8fa;
    border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
}

.code-block__details:not([open]) > .code-block__summary {
    border-radius: var(--border-radius-s);
}

.code-block__pre code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    white-space: pre;
}