/* GENERATED FILE — do not edit. Written by the ExportThemeCatalog target
   (cicd/build.cs → cicd/ThemeCatalogExport) from ThemeIdentityRegistry.cs
   and the shipped theme packages under
   src/Shell/Saascade.FileManager.Shell.UI/wwwroot/css/themes/. #6886.
   
   Switch a preview on the page by setting data-theme-preview="<id>" and
   data-scheme="light|dark" on any wrapper — no framework, no script.

   A verbatim copy of ThemePreviewMiniature.razor.css. */

/* The theme preview miniature (#6886) — a small picture of the app's own chrome,
   painted ONLY through the canonical token contract (tokens.css). Not one raw
   colour, radius, font or duration appears below: every value is a var(--…) that
   exists in tokens.css, which is what lets the same markup repaint from any
   theme's tokens — in the app, and on the static website from the generated
   themes.css (ai/project/css-tokens-and-scoped-styles.md rule 1).

   THIS FILE IS ALSO THE WEBSITE'S STYLESHEET. The cicd ExportThemeCatalog target
   copies it verbatim to marketing/landingpage/assets/generated/theme-preview.css
   rather than a hand-written second copy, so the site cannot drift from the app
   (ai/project/shared-chrome-lives-in-one-component.md — one component, one
   stylesheet, two consumers). Two consequences to respect when editing:
     - keep every selector a plain class selector. Blazor scopes these with its
       own [b-…] attribute inside the app; the copied file has no scope attribute
       and matches by class, so a selector that depends on ::deep or on an
       ancestor outside this component would style one consumer and not the other.
     - no @import and no url() to a relative asset: the copy lives at a different
       path on the site. */

.miniature {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--window-background);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: var(--text-2xs);
    line-height: var(--line-height-tight);
    box-shadow: var(--shadow-sm);
}

/* --- Toolbar ---------------------------------------------------------- */

.miniature__toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border-block-end: var(--border-width) solid var(--border-subtle);
    background: var(--topbar-background);
}

/* The two navigation chevrons, drawn from borders so no icon asset is needed on
   either consumer. */
.miniature__chevron {
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-block-start: var(--border-width) solid var(--topbar-icon-color);
    border-inline-end: var(--border-width) solid var(--topbar-icon-color);
    transform: rotate(45deg);
}

.miniature__chevron--back {
    transform: rotate(-135deg);
}

.miniature__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    flex: 1;
    min-inline-size: 0;
    margin-inline-start: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-sm);
    background: var(--surface-content);
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.miniature__crumb--current {
    color: var(--text-primary);
}

.miniature__crumb-separator {
    color: var(--text-faint);
}

/* --- Body: sidebar + listing ------------------------------------------ */

.miniature__body {
    display: flex;
    flex: 1;
    min-block-size: 0;
}

.miniature__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    inline-size: 34%;
    padding: var(--space-2xs);
    border-inline-end: var(--border-width) solid var(--border-subtle);
    background: var(--sidebar-background);
    color: var(--sidebar-text);
}

.miniature__location {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-sm);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.miniature__location.is-current {
    background: var(--sidebar-item-selected-background);
    color: var(--sidebar-item-selected-text);
}

.miniature__listing {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
    padding: var(--space-2xs);
    background: var(--listing-background);
    color: var(--listing-text);
}

.miniature__row {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-sm);
}

.miniature__row.is-selected {
    background: var(--listing-row-selected-background);
    color: var(--listing-row-selected-text);
}

.miniature__name {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.miniature__detail {
    color: var(--listing-detail-text);
    font-family: var(--font-mono);
}

/* --- Glyphs ------------------------------------------------------------ */

.miniature__glyph {
    flex: none;
    inline-size: 0.75rem;
    block-size: 0.75rem;
}

/* The folder silhouette is the theme's own mask image tinted by its own colour,
   exactly as the real listing paints it (FileIcon.razor.css), so a theme that
   ships a rounded or pixel folder shows that shape here too. */
.miniature__glyph--folder {
    background-color: var(--folder-glyph-color);
    -webkit-mask: var(--folder-glyph-image) center / contain no-repeat;
    mask: var(--folder-glyph-image) center / contain no-repeat;
}

.miniature__glyph--file {
    border: var(--border-width) solid var(--file-glyph-color);
    border-radius: var(--radius-xs);
}

/* --- Git column -------------------------------------------------------- */

/* The same --git-* tokens the real Details column uses
   (GitRowDecoration.razor.css), so these three letters are the theme's actual
   git colours and not an approximation of them. */
.miniature__git {
    flex: none;
    inline-size: 0.75rem;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: 700;
}

.miniature__git--modified {
    color: var(--git-modified);
}

.miniature__git--added {
    color: var(--git-added);
}

.miniature__git--untracked {
    color: var(--git-untracked);
}

/* --- Status bar -------------------------------------------------------- */

.miniature__statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-xs);
    border-block-start: var(--border-width) solid var(--border-subtle);
    background: var(--statusbar-background);
    color: var(--statusbar-text);
    font-family: var(--font-mono);
}

.miniature__branch {
    color: var(--accent);
}