/* Notification bell — Feature 4259 / PBI 4325. Sits in the navbar, on both headers. */

.platform-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.platform-bell__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    /* Inherits the navbar's colour so the bell works on any theme rather than assuming white. */
    color: inherit;
    font-size: 17px;
    line-height: 1;
}

.platform-bell__button:hover,
.platform-bell__button:focus-visible {
    background: rgba(255, 255, 255, .14);
}

.platform-bell__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.platform-bell__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #d32f2f;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.platform-bell__panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 1040;
    width: min(380px, calc(100vw - 2rem));
    /* The script sizes the list to exactly five items once the panel is open; this is the ceiling
       that keeps the panel on-screen, and the fallback when scripting is off. */
    max-height: min(70vh, 520px);
    overflow-y: auto;
    background: #fff;
    color: #212529;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    font-size: 14px;
}

.platform-bell__header {
    padding: .75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    position: sticky;
    top: 0;
    background: #fff;
}

.platform-bell__empty {
    padding: 1.25rem 1rem;
    color: #6c757d;
    text-align: center;
}

.platform-bell__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.platform-bell__item {
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.platform-bell__item:last-child {
    border-bottom: 0;
}

/* Unread carries a tint AND a "New" tag — the tint alone would be the colour-only cue the bar
   deliberately avoids. */
.platform-bell__item--unread {
    background: #f3f8ff;
}

.platform-bell__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .35rem;
}

.platform-bell__icon {
    font-size: 13px;
    line-height: 1;
}

.platform-bell__severity {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.platform-bell__severity--error { color: #b3261e; }
.platform-bell__severity--warning { color: #b26a00; }
.platform-bell__severity--information { color: #1a56a0; }

.platform-bell__tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: .1rem .35rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, .07);
    color: #495057;
}

.platform-bell__tag--unread {
    background: #1a56a0;
    color: #fff;
}

.platform-bell__date {
    margin-left: auto;
    font-size: 11px;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.platform-bell__body {
    line-height: 1.4;
    word-break: break-word;
}

.platform-bell__body p {
    margin: 0;
}

.platform-bell__body p + p {
    margin-top: .35rem;
}

@media (max-width: 767px) {
    /* Anchored to the viewport rather than the button: inside a narrow header the panel would
       otherwise be clipped or pushed off-screen. */
    .platform-bell__panel {
        position: fixed;
        top: 60px;
        right: .5rem;
        left: .5rem;
        width: auto;
    }
}

@media (forced-colors: active) {
    .platform-bell__panel {
        border: 1px solid CanvasText;
    }

    .platform-bell__badge {
        border: 1px solid CanvasText;
    }
}