:root {
    --sa-alert-center-gap: var(--sa-space-sm);
    --sa-alert-center-padding: var(--sa-space-md);
    --sa-alert-center-radius: var(--sa-radius-md);
    --sa-alert-center-border: var(--sa-border);
    --sa-alert-center-background: var(--sa-color-panel);
    --sa-alert-center-icon-size: var(--sa-size-icon);
    --sa-alert-center-critical-background: var(--sa-color-danger-soft);
    --sa-alert-center-critical-color: var(--sa-color-danger);
    --sa-alert-center-warning-background: var(--sa-color-warning-soft);
    --sa-alert-center-warning-color: var(--sa-color-warning);
    --sa-alert-center-info-background: var(--sa-color-info-soft);
    --sa-alert-center-info-color: var(--sa-color-info);
    --sa-alert-center-mobile-icon-column: var(--sa-alert-center-icon-size);
}

.superadmin-alert-center {
    display: grid;
    gap: var(--sa-alert-center-gap);
    margin-bottom: var(--sa-space-lg);
    padding: var(--sa-alert-center-padding);
    background: var(--sa-alert-center-background);
    border: var(--sa-alert-center-border);
    border-radius: var(--sa-alert-center-radius);
}

.superadmin-alert-center__header,
.superadmin-alert-center__item,
.superadmin-alert-center__item em {
    display: flex;
    align-items: center;
}

.superadmin-alert-center__header {
    justify-content: space-between;
    gap: var(--sa-alert-center-gap);
}

.superadmin-alert-center__header h2,
.superadmin-alert-center__header p,
.superadmin-alert-center__item strong,
.superadmin-alert-center__item small {
    margin: 0;
}

.superadmin-alert-center__header h2 {
    font-size: var(--sa-font-size-md);
}

.superadmin-alert-center__header p,
.superadmin-alert-center__item small {
    color: var(--sa-color-muted);
    font-size: var(--sa-font-size-sm);
}

.superadmin-alert-center__count {
    color: var(--sa-color-label);
    font-size: var(--sa-font-size-xs);
    font-weight: 700;
}

.superadmin-alert-center__list {
    display: grid;
    gap: var(--sa-space-xs);
}

.superadmin-alert-center__item {
    gap: var(--sa-alert-center-gap);
    flex-wrap: wrap;
    padding: var(--sa-space-sm);
    border-radius: var(--sa-radius-sm);
    color: var(--sa-color-text);
    text-decoration: none;
}

.superadmin-alert-center__item > .bi {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--sa-alert-center-icon-size);
    height: var(--sa-alert-center-icon-size);
    border-radius: var(--sa-radius-sm);
}

.superadmin-alert-center__item > span {
    display: grid;
    gap: var(--sa-space-xs);
    min-width: 0;
    flex: 1;
}

.superadmin-alert-center__item em {
    gap: var(--sa-space-xs);
    margin-left: auto;
    font-size: var(--sa-font-size-sm);
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.superadmin-alert-center__item--critical {
    background: var(--sa-alert-center-critical-background);
    color: var(--sa-alert-center-critical-color);
}

.superadmin-alert-center__item--warning {
    background: var(--sa-alert-center-warning-background);
    color: var(--sa-alert-center-warning-color);
}

.superadmin-alert-center__item--info {
    background: var(--sa-alert-center-info-background);
    color: var(--sa-alert-center-info-color);
}

.superadmin-alert-center__item:focus-visible {
    outline: 0;
    box-shadow: var(--sa-focus-shadow);
}

@media (max-width: 45rem) {
    .superadmin-alert-center__item {
        display: grid;
        grid-template-columns: var(--sa-alert-center-mobile-icon-column) minmax(0, 1fr);
        align-items: start;
    }

    .superadmin-alert-center__item > span,
    .superadmin-alert-center__item > em {
        grid-column: 2;
    }

    .superadmin-alert-center__item > em {
        justify-self: end;
        margin-left: 0;
    }
}