/* F4R-130 reminder form: the placeholder panel. As a flat list it ran the whole
   height of the form with the right half empty, so the tokens sit in a
   responsive grid and each one reads as the button it is. */

.reminder-tokens {
    display: grid;
    /* 290px is the widest entry ([ablaufdatum_isic]) plus air: auto-fill never
       makes a column narrower than the minimum, so no label can wrap. */
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 6px 20px;
    padding-top: 10px;
}

.reminder-tokens > div {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.6;
}

.reminder-token {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid var(--content-border, #ccc);
    border-radius: 3px;
    background: var(--content-bg, #fff);
    font-family: monospace;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* --blue is the back end's own accent and is redefined for dark mode; there is
   no --link variable. */
.reminder-token:hover {
    border-color: var(--blue, #006494);
    color: var(--blue, #006494);
}

/* Set by be-reminder.js for a moment after the placeholder went in. */
.reminder-token.is-used {
    border-color: #7cb342;
    background: #c8e6c9;
    color: #2e5d1f;
}

.reminder-token-label {
    opacity: .85;
}

/* tl_help is Contao's own help text — the note is one, and the class carries
   its grey. The size has to be repeated: `.widget > div > *` is a class plus an
   element and so outranks a bare .tl_help. */
.reminder-token-hint.tl_help {
    padding-top: 14px;
    font-size: .75rem;
}