/*
 *  yui_file_field.css
 *
 *  The control for a treedb `file` column. One row: the button, what it
 *  is holding, and the way to clear it.
 *
 *  No transitions -- the state changes the moment the person acts on it.
 *
 *      Copyright (c) 2026, ArtGins.
 *      All Rights Reserved.
 */

.FILE_FIELD {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.FILE_FIELD .FILE_PICK,
.FILE_FIELD .FILE_CLEAR {
    flex-shrink: 0;
    transition: none;
}

.FILE_FIELD .FILE_PICK_ICON,
.FILE_FIELD .FILE_CLEAR_ICON {
    margin-right: 0.25rem;
}

.FILE_FIELD .FILE_CLEAR_ICON {
    margin-right: 0;
}

/*
 *  The name is the part that must give way: an id or a long filename
 *  cannot push the buttons out of the row.
 */
.FILE_FIELD .FILE_NAME {
    flex: 1 1 8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
}

.FILE_FIELD .FILE_SIZE {
    flex-shrink: 0;
    opacity: 0.7;
    font-size: 0.85em;
}

.FILE_FIELD .FILE_STATE {
    flex-shrink: 0;
    font-size: 0.85em;
}

.FILE_FIELD .FILE_STATE.is-picked {
    font-weight: bold;
}

.FILE_FIELD .FILE_STATE.is-empty {
    opacity: 0.6;
    font-style: italic;
}

/*
 *  What the column holds, SEEN: the picked file before it is saved, or the
 *  stored asset once the host has fetched it. A row of its own under the
 *  control, and bounded, so a tall photo does not push the rest of the
 *  form off the screen.
 */
.FILE_FIELD .FILE_PREVIEW {
    flex: 1 1 100%;
    min-width: 0;
}

.FILE_FIELD .FILE_PREVIEW img.FILE_PREVIEW_MEDIA,
.FILE_FIELD .FILE_PREVIEW video.FILE_PREVIEW_MEDIA {
    display: block;
    max-width: 100%;
    max-height: 14rem;
    object-fit: contain;
}

.FILE_FIELD .FILE_PREVIEW audio.FILE_PREVIEW_MEDIA {
    display: block;
    width: 100%;
}

.FILE_FIELD .FILE_PREVIEW iframe.FILE_PREVIEW_MEDIA {
    min-height: 18rem;
}

/*
 *  The row a file control sits in must be allowed to be NARROWER than the
 *  file's name. The name is one line cut with an ellipsis, but a flex item
 *  with `min-width: auto` -- Bulma's `.field-body` in a horizontal field,
 *  and the `.field` inside it -- measures its minimum with the WHOLE text,
 *  so a long name ("Chicago - "25 or 6 to 4" Historic Live...") widened the
 *  column past the form and the dialog grew a horizontal scroll. The audio
 *  preview, `width: 100%`, followed the column out. Measured the same in
 *  Firefox and Chromium: 674px where a text row is 473px.
 *
 *  Only these rows: the other controls keep Bulma's sizing.
 */
.field-body:has(.FILE_FIELD),
.field-body:has(.FILE_FIELD) > .field {
    min-width: 0;
}