/* file card: a downloadable file from a ```lang file=name fence in a chat answer (js/chat-answer.js handles the
   Preview, Copy and Download buttons). The preview reuses the code-block look and the token colours. */

.file-card {
    display: block;
    margin: var(--s-3) 0;
    background-color: var(--code-bg);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
}

.file-card__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
}

/* CSS-only page glyph with a folded corner. */
.file-card__icon {
    flex: none;
    width: .875rem;
    height: 1.125rem;
    border: 1px solid var(--paper);
    border-radius: var(--r-1);
    background: linear-gradient(225deg, var(--rule-strong) 0 .3rem, transparent .3rem);
}

.file-card__name {
    flex: 1 1 8rem;
    min-width: 0;
    overflow: hidden;
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    color: var(--paper-hi);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card__meta {
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-ui);
    color: var(--paper-lo);
}

.file-card__btn {
    position: relative;
    min-height: 2rem;
    padding: 0 var(--s-3);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-ui);
    color: var(--paper);
    background-color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
    cursor: pointer;
}

.file-card__btn:hover,
.file-card__btn:focus-visible {
    color: var(--paper-hi);
}

.file-card__btn--primary,
.file-card__btn--primary:hover,
.file-card__btn--primary:focus-visible {
    color: var(--on-accent);
    background-color: var(--accent);
    border-color: var(--accent);
}

.file-card__btn:focus-visible,
.file-card__source:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.file-card__source {
    max-height: 28rem;
    margin: 0;
    padding: var(--s-3) var(--s-4);
    overflow: auto;
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    color: var(--paper);
    border-top: 1px solid var(--rule);
    tab-size: 4;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

.file-card__source[hidden] {
    display: none;
}

.file-card__source code {
    padding: 0;
    font: inherit;
    background: none;
    border-radius: 0;
}

.file-card .k { color: var(--code-keyword); }
.file-card .t { color: var(--code-type); }
.file-card .s { color: var(--code-string); }
.file-card .n { color: var(--code-number); }
.file-card .c { color: var(--code-comment); font-style: italic; }
.file-card .a { color: var(--code-attr); }

@media (max-width: 599.98px) {
    /* The meta takes its own line under the name; the buttons keep a comfortable touch height. */
    .file-card__name {
        flex-basis: calc(100% - 1.875rem);
    }

    .file-card__meta {
        flex: 1 0 100%;
        order: 1;
    }

    .file-card__btn {
        order: 2;
        min-height: 2.25rem;
    }
}