.flash[data-flash] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-right: 3.2rem;
    overflow: hidden;
    transition: opacity .25s ease, transform .25s ease;
}

.flash[data-flash] > span { flex: 1; }
.flash[data-flash] > small { color: var(--muted); font-variant-numeric: tabular-nums; }
.flash[data-flash] > button {
    position: absolute;
    right: .7rem;
    top: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--cream);
    font-size: 1.4rem;
    cursor: pointer;
}

.flash[data-flash] > i {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--green);
    transform-origin: left;
    animation: flash-countdown 5s linear forwards;
}

.flash.error[data-flash] > i { background: var(--danger); }
.flash.flash-hiding { opacity: 0; transform: translateY(-8px); }

@keyframes flash-countdown { to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .flash[data-flash] > i { animation: none; }
    .flash.flash-hiding { transition: none; }
}