.notification{display:block;background:var(--bg-light-accent);padding:8px;margin:4px 0;text-decoration:none;min-height:64px;border-radius:2px}.notification--read{background:var(--bg-dark-accent)}.notification--reply{border-left:4px solid var(--color-tag-alert)}.notification--thread{border-left:4px solid var(--color-tag-op)}.notification--follow{border-left:4px solid var(--color-tag-self)}.notification__title{color:var(--bg-font-clear)}.notification__time{float:right;color:var(--bg-font-dim)}.notification__body{display:block;color:var(--bg-font-dim);font-style:italic;font-size:0.8rem;margin:8px 0}.notification__attachment{background-color:var(--bg-dark-accent);display:block;height:32px;width:32px;border-radius:50%;overflow:hidden;float:left;margin:0 8px 8px 0}.notification__attachment img{width:100%;height:100%;object-fit:cover}.notification:hover{background:var(--bg-dark-accent)}.notification:hover .notification__title{color:var(--bg-font-dim)}.notifications-header{display:flex;margin:0;padding:8px 8px;background:var(--bg-light-accent);color:var(--bg-font-clear);font-size:1.6rem}.notification-functions{display:grid;grid-template-columns:1fr 1fr;margin:16px 4px;gap:4px}.notification-functions__button{display:block;color:var(--hl-font-clear);background:var(--hl-dark-shade);font-weight:700;padding:8px 16px;border-radius:6px;border:none}.notification-functions__button:hover{background:var(--hl-light-shade)}.notifications-tab-selectors{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-top-right-radius:8px;border-top-left-radius:8px;margin:16px 4px 0}.notifications-tab-selectors__selector{color:var(--bg-font-dim);background:var(--bg-dark-accent);padding:12px;cursor:pointer;text-align:center}.notifications-tab-selectors__selector--checked{color:var(--bg-font-clear);font-weight:500;background:var(--bg-light-accent)}.notifications-tab{display:none;margin:0 4px}.notifications-tab__none-label{margin:4px 0;padding:64px 0;color:var(--bg-font-dim);background:var(--bg-dark-accent);text-align:center;border-radius:4px}#unread,#read{display:none}#unread:checked ~ #unread-tab,#read:checked ~ #read-tab{display:block}@media screen and (min-width: 512px){.notification-functions{display:flex;justify-content:flex-end}.notification-functions__button{min-width:200px}}@media screen and (min-width: 1024px){.notifications-tab{margin-left:0;margin-right:0}.notifications-tab-selectors{display:inline-flex;margin-left:0;margin-right:0}.notifications-tab-selectors__selector{min-width:200px}.notification-functions{margin-left:0;margin-right:0}.notification-label{margin-left:0;margin-right:0}}