/* ==========================================================================
   Bulk messages (AI-1825): the recipients, message, send and progress cards
   of a bulk message ("Zendingen").
   ========================================================================== */

/* Fields that need not run the full width of the card. */
.bm-field {
    width: 100%;
}

.bm-field--sm { max-width: 240px; }
.bm-field--md { max-width: 420px; }
.bm-field--lg { max-width: 520px; }
.bm-field--date { width: 180px; }
.bm-field--time { width: 140px; }

.bm-field--binding {
    width: auto;
    min-width: 200px;
    max-width: 260px;
}

.bm-field--fixed {
    width: auto;
    min-width: 220px;
}

/* Takes the full width inside a stack that aligns its children to the start. */
.bm-fill {
    align-self: stretch;
}

/* Pushes what follows to the end of a row. */
.bm-spacer {
    flex: 1 1 auto;
}

/* Pasted lists and the list configuration read as code. */
.bm-mono textarea,
.bm-mono-text {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.bm-mono textarea {
    font-size: 0.85rem;
}

.bm-mono--small textarea {
    font-size: 0.8rem;
}

.bm-bullets {
    margin: 4px 0 0;
    padding-left: 20px;
    list-style: disc;
}

.bm-endpoints__source {
    margin: 8px 0 0;
}

.bm-variable {
    min-width: 90px;
}

.bm-template-body {
    white-space: pre-wrap;
    background: var(--ui-bg-sunken);
}

.bm-pre {
    white-space: pre-wrap;
}

.bm-preview__text {
    margin-top: 8px;
}

.bm-preview__subject {
    margin: 4px 0 0;
}

.bm-preview__attachments {
    margin-top: 4px;
}

.bm-preview__divider {
    margin: 8px 0;
}

/* The e-mail shows as in a mailbox: always on white, whatever the app's theme
   (the document inside sets the same light colours). */
.bm-preview__frame {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: white;
}

/* Recipient files (BulkMessageRecipientFilesSection): the two choices side by side. */
.bm-files__mode {
    flex: 0 1 420px;
    min-width: 280px;
}

.bm-files__column {
    flex: 0 1 320px;
    min-width: 220px;
}