/* Video Thumbnail Generator - tool-specific styles */

/* Custom output-size inputs row: laid out as a flex row when visible
   (display is toggled to 'flex' from JS). */
.custom-size-row {
    align-items: flex-end;
}

/* Letterbox background note: small swatch indicating the default fill colour
   for "contain" exports. Uses Bootstrap CSS vars so it stays dark-mode safe. */
#bgNote::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.4em;
    vertical-align: -0.1em;
    border-radius: 2px;
    background: #000;
    border: 1px solid var(--bs-border-color);
}

/* In dark mode keep the swatch outline visible against dark surfaces. */
[data-bs-theme="dark"] #bgNote::before {
    border-color: var(--bs-border-color-translucent);
}