/**
 * Notifications
 * Notification dropdown, notification dialog, notification bar,
 * notification links, and info role styles.
 */

details#notifications ul {
  overflow-y: scroll;
  height: 500px !important;
}

.notificationbar {
  width: 100%;
  flex: 1;
  max-width: 376px;
}

[role=info] {
  padding: 1rem;
  background: #f3f3f3;
  border-radius: var(--pico-border-radius);
  width: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 1rem;
  justify-content: space-between;
}

.notification_link {
  font-size: var(--hb-font-size-xs);
}

.notification_link h5 {
  margin-bottom: 0px;
  font-size: var(--hb-font-size-base);
}

.notification_link u {
  margin-top: 5px;
  display: block;
}

a.notification_link {
  padding-block: 10px !important;
}

a.notification_link.state_0 {
  border-left: 3px solid var(--pico-primary);
  background: #0172ad17;
}