.notifications {
   position: relative;
}

.notifications input[type=checkbox] {
   display: none;
}

.notifications input:checked ~ label {
   background-color: var(--c-primary-highlight);
}

.notifications label img {
   width: auto;
}

.notifications .listbox {
   background-color: var(--c-primary-highlight);
   border-radius: var(--u-2);
   color: var(--c-black);
   overflow: hidden;
   position: absolute;
   right: 0;
   transform: translate(0, -50%) scaleY(0);
   transition: transform 0.1s ease-in;
   width: 500px;
}

.notifications input:checked ~ .listbox {
   transform: none;
   transition: transform 0.1s ease-out;
}

.notifications .listbox li {
   background-color: var(--c-base);
   border-radius: var(--u-2);
   display: block;
   margin: var(--u0);
   overflow: auto;
   padding: var(--u0);
}

.notifications .listbox li.unread {
   font-weight: bold;
}
