/* Plugin-scoped overrides applied via the ``event-notify-banner`` modifier.
   Renders the pending-notification banner as a slim one-line toolbar instead
   of Indico's hero-sized ``action-box`` default. */

.event-notify-banner.action-box {
    padding: 0.25em 0.5em;
    margin-bottom: 0.6em;
    font-size: 0.85em;
}

.event-notify-banner > .section {
    padding: 0.15em 0.25em;
    align-items: center;
    gap: 0.6em;
}

.event-notify-banner > .section:not(:first-child) {
    margin-top: 0.25em;
    padding-top: 0.4em;
}

.event-notify-banner > .section > .icon {
    font-size: 1.1em;
    padding-right: 0;
    align-self: center;
}

.event-notify-banner > .section > .text {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.6em;
    align-items: baseline;
    line-height: 1.4;
}

.event-notify-banner > .section > .text > .label {
    font-size: 1em;
}

.event-notify-banner > .section > .text > .description {
    opacity: 0.85;
    font-size: 0.95em;
}

/* Compact i-buttons used in the toolbar. Indico has no built-in ``small``
   modifier for ``.i-button``, so we shrink padding + font-size directly. */
.event-notify-banner > .section > .toolbar > .i-button {
    padding: 2px 8px;
    font-size: 0.9em;
    line-height: 1.5;
}

.event-notify-banner > .section > .toolbar > .i-button::before {
    /* Tighten the gap between the leading icon (icon-mail / icon-disable) and
       the button label without affecting buttons elsewhere on the page. */
    margin-right: 0.3em;
}