.notification-bell {
    position:relative;
}

.notification-badge {
    position:absolute;
    top:-.35rem;
    right:-.4rem;
    min-width:1.25rem;
    height:1.25rem;
    padding:0 .3rem;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.68rem;
}

.notification-grid > [class*="col-"] {
    min-width:0;
}

.notification-item {
    border-left:4px solid transparent;
    transition:box-shadow .16s ease, transform .16s ease;
}

.notification-item.notification-unread {
    background:#f5f7ff;
    border-left-color:#4f46e5;
}

.notification-item:focus-within {
    box-shadow:0 0 0 .2rem rgba(79,70,229,.14);
}

.notification-card-layout {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:.8rem;
    align-items:start;
    height:100%;
}

.notification-card-copy {
    min-width:0;
}

.notification-body {
    overflow-wrap:anywhere;
}

.notification-card-actions {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
    margin-left:.25rem;
    min-width:max-content;
}

.notification-card-actions .btn {
    white-space:nowrap;
}

.notification-dot {
    width:.65rem;
    height:.65rem;
    border-radius:50%;
    background:#cbd5e1;
    flex:0 0 auto;
}

.notification-unread .notification-dot {
    background:#4f46e5;
    box-shadow:0 0 0 4px #e0e7ff;
}

@media(max-width:767.98px) {
    .notification-page-actions {
        width:100%;
    }
    .notification-page-actions .btn {
        flex:1 1 auto;
    }
    .notification-card-layout {
        grid-template-columns:auto minmax(0,1fr);
    }
    .notification-card-actions {
        grid-column:2;
        flex-direction:row;
        flex-wrap:wrap;
        margin-left:0;
        min-width:0;
    }
}

@media(max-width:575.98px) {
    .notification-item .card-body {
        padding:1rem!important;
    }
    .notification-card-layout {
        gap:.65rem;
    }
    .notification-card-actions {
        width:100%;
    }
    .notification-card-actions .btn {
        min-height:40px;
    }
}