@layer components {
.notice {
    --app-notice-border-color: var(--app-muted-border-color);
    --app-notice-background-color: var(--app-card-background-color);
    --app-notice-accent-color: var(--app-color);
    /* border: var(--app-border-width) solid var(--app-notice-border-color); */
    /* border-radius: var(--app-border-radius); */
    background: var(--app-notice-background-color);
    padding: calc(var(--app-spacing) * .5) calc(var(--app-spacing) * 1);
    padding-right: calc(var(--app-spacing) * .5);
    /* margin-bottom: var(--app-spacing); */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-spacing);
    position: relative;
    overflow: hidden;
    color: var(--app-notice-border-color);
    margin-block: calc(var(--app-spacing) * .75);
}

#async-messages .notice {
    border: none;
    border-radius: 0;
    padding: 0;
    padding-right: 5px;
    padding-left: 15px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    position: relative;
    overflow: hidden;
    color: var(--app-notice-border-color);
    margin-block: 0;
}


.notice strong {
    color: var(--app-notice-accent-color);
}

.notice[data-variant=success] {
    --app-notice-border-color: var(--app-notice-success-border-color);
    --app-notice-background-color: var(--app-notice-success-background-color);
    --app-notice-accent-color: var(--app-notice-success-color);
}

.notice[data-variant=warning] {
    --app-notice-border-color: var(--app-notice-warning-border-color);
    --app-notice-background-color: var(--app-notice-warning-background-color);
    --app-notice-accent-color: var(--app-notice-warning-color);
}

.notice[data-variant=info] {
    --app-notice-border-color: var(--app-notice-info-border-color);
    --app-notice-background-color: var(--app-notice-info-background-color);
    --app-notice-accent-color: var(--app-notice-info-color);
}

.notice[data-variant=error] {
    --app-notice-border-color: var(--app-notice-error-border-color);
    --app-notice-background-color: var(--app-notice-error-background-color);
    --app-notice-accent-color: var(--app-notice-error-color);
}

.notice.flash-timed::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--app-notice-border-color);
    transform-origin: left;
    transform: scaleX(0);
    animation: flash-progress var(--flash-timeout, 4000ms) linear forwards;
    opacity: 0.9;
}

.notice.flash-timed:hover::after {
    animation-play-state: paused;
}

@keyframes flash-progress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notice.flash-timed::after {
        animation: none;
    }
}

.notice button[type=submit] {
    border: 1px solid var(--app-notice-border-color) !important;
    background: var(--app-notice-background-color);
    color: var(--app-notice-border-color);
}

.notice ul {
    margin: 0;
    padding-left: 0;
}

.notice li:last-child {
    margin: 0;
}

/* .flash-stack:has(.notice) {
    margin-top: var(--app-spacing);
} */

.app-main-content .flash-stack {
    margin-bottom: var(--app-spacing);
}
.app-main-content:has(.app-details-container) .flash-stack {
    margin-bottom: 0;
}

.flash-stack .notice {
    margin-block: 0;
}

.flash-stack .notice + .notice {
    margin-top: calc(var(--app-spacing) * .5);
}

.notice li {
    list-style: none;
}
}