/* Notifications — layout + banner-specific behavior only.
 * Visual styling comes from .dslc-alert / .dslc-banner / .dslc-badge.
 */

.dslc-notification { margin: var(--dslc-sp-3) 0; }
.dslc-notification.dslc-banner { margin: 0; }

/* Banner stack offsets — JS sets --dslc-banner-offset per banner so stacked
 * banners butt against each other instead of overlapping. */
.dslc-banner--top    { top:    var(--dslc-banner-offset, 0); }
.dslc-banner--bottom { bottom: var(--dslc-banner-offset, 0); }

/* Dismissal animation */
.dslc-notification--dismissing {
    animation: dslc-notification-out var(--dslc-transition) forwards;
    pointer-events: none;
}
@keyframes dslc-notification-out {
    to { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0; }
}
.dslc-banner.dslc-notification--dismissing       { animation: dslc-banner-out        var(--dslc-transition) forwards; }
.dslc-banner--bottom.dslc-notification--dismissing { animation: dslc-banner-out-bottom var(--dslc-transition) forwards; }
@keyframes dslc-banner-out        { to { opacity: 0; transform: translateY(-100%); } }
@keyframes dslc-banner-out-bottom { to { opacity: 0; transform: translateY( 100%); } }

/* Countdown uses the shared .dslc-badge — this only adds the inline layout
 * so the clock icon and the time string share a baseline. */
.dslc-countdown {
    font-family: var(--dslc-font-mono);
    font-feature-settings: var(--dslc-num-font-feature);
    margin-top: var(--dslc-sp-2);
}