/* The file browser reuses native file inputs, fields, buttons, details and dialogs. */
@layer rf.components {
  .rf-file-browser { min-inline-size: 0; }
  .rf-file-browser p, .rf-file-browser h4 { margin: 0; overflow-wrap: anywhere; }
  .rf-file-inputs { display: flex; flex-wrap: wrap; gap: 1rem; }
  .rf-file-inputs .rf-field { flex: 1 1 12rem; min-inline-size: 0; }
  .rf-file-inputs input { max-inline-size: 100%; min-inline-size: 0; }
  .rf-file-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
  .rf-file-toolbar .rf-button { min-block-size: 2.75rem; }
  .rf-file-tree, .rf-file-tree ul { list-style: none; padding: 0; margin: 0; }
  .rf-file-tree { border: 1px solid var(--rf-border); border-radius: var(--rf-radius); padding: .5rem; max-block-size: 26rem; overflow: auto; }
  .rf-file-tree ul { padding-inline-start: 1rem; }
  .rf-file-row { display: flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; padding: .25rem .5rem; border-radius: var(--rf-radius-sm); cursor: pointer; }
  .rf-file-icon { flex: 0 0 1.5rem; text-align: center; }
  .rf-file-name { overflow-wrap: anywhere; min-inline-size: 0; }
  .rf-file-tree [aria-selected="true"] > .rf-file-row { background: var(--rf-subtle); box-shadow: inset 3px 0 var(--rf-primary); font-weight: 600; }
  .rf-file-tree [role="treeitem"]:focus { outline: none; }
  .rf-file-tree [role="treeitem"]:focus-visible > .rf-file-row { outline: 3px solid var(--rf-focus); outline-offset: -3px; }
  .rf-file-tree[aria-disabled="true"] { opacity: .65; }
  .rf-file-details { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--rf-border); border-radius: var(--rf-radius-sm); }
  .rf-file-fallback { padding-inline-start: 1.25rem; overflow-wrap: anywhere; }
  .rf-file-browser fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
}