/* ==========================================================================
   Hlásenia (flash správy, chyby formulára, stav synchronizácie)
   Varianty: --success, --error, --warning
   ========================================================================== */

.notice {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--notice-bg, var(--color-highlight));
    color: var(--notice-color, var(--color-ink));
    font-size: var(--fs-small);
    line-height: 1.5;
}

.notice::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 0.5em;
    border-radius: 50%;
    background: var(--notice-dot, var(--color-violet));
}

.notice + .notice {
    margin-top: 10px;
}

.notice__list {
    margin: 0;
    padding-left: 18px;
}

.notice--success {
    --notice-bg: var(--color-success-bg);
    --notice-color: var(--color-success-strong);
    --notice-dot: var(--color-success-on-light);
}

.notice--error {
    --notice-bg: var(--color-error-bg);
    --notice-color: var(--color-error-strong);
    --notice-dot: var(--color-error-on-light);
}

.notice--warning {
    --notice-bg: var(--color-warning-bg);
    --notice-color: var(--color-warning-strong);
    --notice-dot: var(--color-warning);
}