/* ==========================================================================
   Notifications — index table with unread emphasis
   ========================================================================== */

/* == bulk actions == */
.notifications-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* == table form == */
.notifications-table-form {
  width: 100%;
}

/* == column sizing == */
.notifications-table__cell--checkbox {
  width: 48px;
  vertical-align: middle;
}

.notifications-table__cell--status {
  width: 96px;
}

.notifications-table__cell--date {
  width: 160px;
}

.notifications-table__cell--actions {
  width: 192px;
}

/* == checkboxes == */
.notifications-table__select-all,
.notifications-table__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-green);
  cursor: pointer;
}

/* == unread emphasis == */
.notifications-table__row--unread {
  background-color: var(--tint-green-10);
  box-shadow: inset 3px 0 0 var(--color-primary-green);
}

.table-container .notifications-table__row--unread:hover {
  background-color: var(--tint-green-16);
}

.notifications-table__row--unread .notifications-table__message {
  font-weight: 600;
}

/* == message == */
.notifications-table__message {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .notifications-table__message {
    max-width: none;
    white-space: normal;
  }
}

/* Underlined at rest, faintly, so a message reads as somewhere to go rather
   than as the plain text it sits beside when there is nowhere to go. */
.notifications-table__message-link {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.notifications-table__message-link:hover {
  text-decoration-color: currentColor;
}

/* == timestamp == */
.table-container .notifications-table__date {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

/* ==========================================================================
   The bell's drop-down in the top bar (see notifications/_menu)

   Opened by clicking, like the bookmarks beside it and for the same reason: the
   pointer has to be able to move into it (see controllers/dropdown). Wider than
   the bookmarks, because a notification is a sentence rather than a name.
   ========================================================================== */
.topbar__notifications {
  position: relative;
}

/* The bell is a button now, so it sheds a button's own look. */
button.topbar__notifications-link {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.topbar__notifications-link[aria-expanded="true"] {
  background-color: var(--tint-white-16);
}

.topbar__notifications-badge[hidden] {
  display: none;
}

.topbar__notifications-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 360px;
  max-height: 460px;
  overflow-y: auto;
  padding: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1;
}

.topbar__notifications-heading {
  padding: var(--space-1) var(--space-2) var(--space-2);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
}

.notifications-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.notifications-menu__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.notifications-menu__link:hover {
  background-color: var(--color-surface-sunken);
}

/* Unread: the same green edge and weight as an unread row on the page. */
.notifications-menu__item--unread .notifications-menu__link {
  box-shadow: inset 3px 0 0 var(--color-primary-green);
  background-color: var(--tint-green-10);
}

.notifications-menu__item--unread .notifications-menu__message {
  font-weight: 600;
}

.notifications-menu__message {
  font-size: var(--font-size-medium);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notifications-menu__time {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.notifications-menu__empty,
.notifications-menu__loading {
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
}

.notifications-menu__all {
  display: block;
  margin-top: var(--space-1);
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  font-size: var(--font-size-medium);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.notifications-menu__all:hover {
  text-decoration: underline;
}