/* text-gallery.css: the Gallery of uploaded images (see Gallery). The pane and header start as
   copies of the Slide View's, and the body as a copy of the open files pane. */

div.text-gallery-pane {
    background-color: transparent;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

div.text-gallery-header {
    background-color: ghostwhite;
    border: 2px solid #111111;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom-color: navy;
}

span.text-gallery-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
    font-weight: bold;
    color: navy;
    font-size: 1.35em;
    padding-left: 8px;
}

span.text-gallery-header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Marks the button of the order the images are in. Starts as a copy of the Slide View's mode
   button marking. */
button.text-gallery-sort-current {
    border-color: navy;
    border-radius: 4px;
}

/* The scrollbar's space is always kept, so it appearing doesn't change how many tiles fit */
div.text-gallery-body {
    flex: 1;
    min-height: 0;
    background-color: ghostwhite;
    border: 2px solid #111111;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

div.text-gallery-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The gap matches Gallery.TILE_GAP */
div.text-gallery-row {
    display: flex;
    gap: 16px;
}

/* Its width, and its tile's height, are set by Gallery for the tile's shape. Scrolled into view
   with the body's padding around it, so the first and last rows scroll fully to the top and
   bottom, and the selection's outline always shows. */
div.text-gallery-item {
    scroll-margin: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}

/* The image selected (see Gallery.select). An outline, so selecting it doesn't move anything. */
div.text-gallery-item.text-gallery-selected {
    outline: 3px solid navy;
    outline-offset: 4px;
    border-radius: 4px;
}

div.text-gallery-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid lightgrey;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

/* As large as fits the tile, keeping its shape */
img.text-gallery-sample {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

div.text-gallery-name {
    color: black;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
    font-size: 0.9em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.text-gallery-message {
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
    font-style: italic;
    color: dimgrey;
}

/* The context menu of an image (see GalleryMenu). Starts as a copy of div.text-open-files-menu. */
div.text-gallery-menu {
    position: fixed;
    right: auto;
    visibility: visible;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
    font-weight: bold;
    font-size: small;
}