/* Alert + — i2t3 component styles
 * Richer alert (vs. the Bootstrap "alert"): optional close button, sizes,
 * leading icon and an optional title. Built on the Bootstrap alert.
 */

.i2t3-alert-plus__body { display: flex; gap: .75rem; align-items: flex-start; }
.i2t3-alert-plus__icon { font-size: 1.25em; line-height: 1.45; flex: 0 0 auto; }
.i2t3-alert-plus__content { min-width: 0; }
.i2t3-alert-plus__title { margin-bottom: .25rem; }
.i2t3-alert-plus__content > :last-child { margin-bottom: 0; }

/* Sizes */
.i2t3-alert-plus--sm { padding: .5rem .85rem; font-size: .9rem; }
.i2t3-alert-plus--lg { padding: 1.5rem 1.75rem; font-size: 1.1rem; }

/* Style: solid — full accent background, white text */
.i2t3-alert-plus--style-solid.alert {
    background: var(--i2t3-alert-accent, #0dcaf0);
    border-color: var(--i2t3-alert-accent, #0dcaf0);
    color: #fff;
}
.i2t3-alert-plus--style-solid.alert .i2t3-alert-plus__icon,
.i2t3-alert-plus--style-solid.alert a { color: #fff; }
.i2t3-alert-plus--style-solid .btn-close { filter: brightness(0) invert(1); }

/* Style: outline — transparent background, accent border + text */
.i2t3-alert-plus--style-outline.alert {
    background: transparent;
    border-color: var(--i2t3-alert-accent, #0dcaf0);
    color: var(--i2t3-alert-accent, #0dcaf0);
}
.i2t3-alert-plus--style-outline.alert .i2t3-alert-plus__icon {
    color: var(--i2t3-alert-accent, #0dcaf0);
}