/*
|--------------------------------------------------------------------------
| MKGO - Public Alerts
|--------------------------------------------------------------------------
|
| File:
| /assets/css/components/alerts.css
|
*/

.site-alerts {
    position: relative;

    z-index: 900;

    width: 100%;

    padding-top: 16px;
}

.site-alert {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    width: 100%;

    margin-bottom: 10px;

    padding: 15px 16px;

    border: 1px solid #cbd5e1;
    border-radius: 13px;

    background: #f8fafc;

    color: #334155;
}

.site-alert:last-child {
    margin-bottom: 0;
}

.site-alert-content {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    min-width: 0;
}

.site-alert-content p {
    margin: 0;

    font-size: 0.9rem;

    line-height: 1.6;
}

.site-alert-indicator {
    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    margin-top: 6px;

    border-radius: 50%;

    background: #64748b;
}

.site-alert.alert-success {
    border-color: #bbf7d0;

    background: #f0fdf4;

    color: #166534;
}

.site-alert.alert-success
.site-alert-indicator {
    background: #16a34a;
}

.site-alert.alert-info {
    border-color: #bae6fd;

    background: #f0f9ff;

    color: #075985;
}

.site-alert.alert-info
.site-alert-indicator {
    background: #0284c7;
}

.site-alert.alert-warning {
    border-color: #fde68a;

    background: #fffbeb;

    color: #92400e;
}

.site-alert.alert-warning
.site-alert-indicator {
    background: #d97706;
}

.site-alert.alert-danger {
    border-color: #fecaca;

    background: #fef2f2;

    color: #991b1b;
}

.site-alert.alert-danger
.site-alert-indicator {
    background: #dc2626;
}

.site-alert-close {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: currentColor;

    font-size: 1.35rem;

    line-height: 1;

    cursor: pointer;

    opacity: 0.65;

    transition:
        opacity 0.2s ease,
        background-color 0.2s ease;
}

.site-alert-close:hover {
    opacity: 1;

    background: rgba(15, 23, 42, 0.06);
}

.site-alert-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 576px) {

    .site-alerts {
        padding-top: 12px;
    }

    .site-alert {
        gap: 10px;

        padding: 13px;
    }

}