.notifications .mark-read {
    display: flex;
    transition: border-color var(--timing) var(--function);
}
    .notifications .mark-read:hover {
        border: 1px solid var(--pink);
        transition: border-color var(--timing) var(--function);
    }

.notifications .mark-read .hide {
    position: absolute;
}
.notifications .mark-read:hover .show,
.notifications .mark-read .hide {
    transform: scale(0);
    transform-origin: center;
    opacity: 0;
    transition: opacity var(--timing) var(--function);
    transition-property: opacity, transform;
}
.notifications .mark-read .show,
.notifications .mark-read:hover .hide {
    transform: scale(1);
    transform-origin: center;
    opacity: 1;
    transition: opacity var(--timing) var(--function);
    transition-property: opacity, transform;
}

.notifications .empty-state {
    padding: 1rem 0;
}
.notifications  #view-all {
    background-color: var(--overlay);
}

.notification-preview {
    transition: all 0.3s ease-out;
}

.notification-preview.fade-in {
    opacity: 0;
    transform: translateX(-20px);
}

.notification-preview.fade-out {
    opacity: 0;
    transform: translateX(20px);
}

.notification-preview.slide-out {
    opacity: 0;
    transform: translateX(100%);
}

.empty-state {
    transition: opacity 0.3s ease-out;
}

.empty-state.fade-in {
    opacity: 0;
}