/* AlertChips component styles loaded on every route (js/assets/chips/alert-chips.js); dark colours in styles/themes/dark.css */

/* Style 'inline': slim notice in the content flow, for windows and tiles */
.alert-inline {
    --inline-tint: #eef6ff;
    --inline-border: #cfe2fb;
    --inline-accent: #2f6fbf;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 8px 0;
    padding: 10px 12px;
    background: var(--inline-tint);
    border: 1px solid var(--inline-border);
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #3a3a3a;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.alert-inline--success { --inline-tint: #f0f8ef; --inline-border: #cfe8cc; --inline-accent: #2e8b2e; }
.alert-inline--error   { --inline-tint: #fdf1f1; --inline-border: #f3d2d2; --inline-accent: #c0392b; }
.alert-inline--warn    { --inline-tint: #fdf6e9; --inline-border: #f1e0bd; --inline-accent: #b7791f; }

.alert-inline__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--inline-accent) 14%, transparent);
    color: var(--inline-accent);
    font-size: 0.85rem;
}

.alert-inline__body {
    min-width: 0;
    padding-top: 3px;
}

.alert-inline__title {
    font-weight: 600;
    color: var(--inline-accent);
}

.alert-inline__message {
    overflow-wrap: anywhere;
}

.alert-inline.is-hiding {
    opacity: 0;
    transform: translateY(4px);
}