/*
 * The letterhead preview of a PDF configuration record.
 *
 * Loaded through $GLOBALS['TYPO3_CONF_VARS']['BE']['stylesheets']['pdf'], which registers this whole
 * directory — a FormEngine node cannot add a stylesheet of its own.
 *
 * The frame is positioned by TemplatePreview.js in per cent of the sheet; everything here only says
 * what it looks like.
 */

.pdf-template-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0.5rem 0;
}

.pdf-template-preview__page {
    margin: 0;
    max-width: 18rem;
}

.pdf-template-preview__page figcaption {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* the positioning context of the frame — the image defines the size */
.pdf-template-preview__sheet {
    position: relative;
    display: inline-block;
    border: 1px solid var(--typo3-component-border-color, #d7d7d7);
    background: #fff;
}

.pdf-template-preview__sheet img {
    display: block;
    width: 100%;
    height: auto;
}

.pdf-template-preview__frame {
    position: absolute;
    border: 1px dashed #ff8700;
    background: rgb(255 135 0 / 8%);
    pointer-events: none;
}