/* The bell in the top bar and the list it opens, the same in every Kairo app
   (kairo/_notifications.html.erb). The bar puts it beside the pill out to
   the reader's apps (kairo/topbar.css); everything about the bell itself is
   here.

   Only tokens, never base.css's aliases: Journey and the website load the
   tokens and fonts and nothing else of the system's. The list hangs from the
   bell, its end edge under the bell's, so it opens where the hand is however
   the bar lays out its contents (a centred column on the website, the full
   width in Neo). Nothing clips it: the bar has no overflow of its own. */

/* Turbo's frame, and a bare element on the website, which has no Turbo:
   either way it should not be a box of its own. */
turbo-frame#kairo_notifications {
  display: contents;
}

/* A <details>, so a host's own rules for disclosures (Journey rules one off
   above and below) are undone here: the bell is a button in a bar. */
.kairo-bell {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

.kairo-bell__button {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--k-color-muted);
  border-radius: var(--k-radius-control);
  cursor: pointer;
  list-style: none;
  transition: color var(--k-duration-fast) var(--k-ease-standard),
    background-color var(--k-duration-fast) var(--k-ease-standard);
}

.kairo-bell__button::-webkit-details-marker {
  display: none;
}

.kairo-bell__button:hover,
.kairo-bell[open] .kairo-bell__button {
  color: var(--k-color-ink);
  background-color: var(--k-color-lavender-soft);
}

.kairo-bell__button:focus-visible {
  outline: 2px solid var(--k-color-violet-deep);
  outline-offset: 2px;
}

.kairo-bell__icon {
  width: 20px;
  height: 20px;
}

/* How many are unread, on the bell's shoulder. Violet, where a hand should
   land; nothing at all when there is nothing new. */
.kairo-bell__count {
  position: absolute;
  top: 4px;
  inset-inline-end: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  font: 600 10px/16px var(--k-type-body-font-family);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--k-color-paper);
  background-color: var(--k-color-violet-deep);
  border-radius: var(--k-radius-pill);
}

.kairo-bell__panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - var(--topbar, 64px) - 24px));
  box-sizing: border-box;
  font-family: var(--k-type-body-font-family);
  color: var(--k-color-ink);
  background-color: var(--k-color-paper);
  border: 1px solid var(--k-color-line);
  border-radius: var(--k-radius-panel);
  box-shadow: var(--k-shadow-raised);
  overflow: hidden;
}

.kairo-bell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--k-color-line);
}

.kairo-bell__heading {
  margin: 0;
  font: 600 15px/1.2 var(--k-type-title-font-family);
}

.kairo-bell__read-all {
  padding: 0;
  font: 600 12px/1.4 var(--k-type-body-font-family);
  color: var(--k-color-violet-deep);
  background: none;
  border: 0;
  cursor: pointer;
}

.kairo-bell__read-all:hover {
  text-decoration: underline;
}

.kairo-bell__list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kairo-bell__item a {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 2px 10px;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
}

.kairo-bell__item a:hover {
  background-color: var(--k-color-ivory);
}

/* The dot that says unread, in the column before the words, so read and
   unread lines keep their words in one column. */
.kairo-bell__item--unread a::before {
  content: "";
  grid-row: 1;
  align-self: center;
  width: 8px;
  height: 8px;
  background-color: var(--k-color-violet-deep);
  border-radius: 50%;
}

.kairo-bell__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  line-height: 1.4;
}

.kairo-bell__item--unread .kairo-bell__title {
  font-weight: 600;
}

.kairo-bell__age {
  grid-column: 3;
  grid-row: 1;
  font: 400 11px/1.6 var(--k-type-meta-font-family);
  color: var(--k-color-muted);
  white-space: nowrap;
}

.kairo-bell__excerpt {
  grid-column: 2 / 4;
  font-size: 12px;
  line-height: 1.45;
  color: var(--k-color-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kairo-bell__empty {
  margin: 0;
  padding: 28px 16px;
  font-size: 13px;
  text-align: center;
  color: var(--k-color-muted);
}

/* On a phone the bell is not at the bar's end, and a list hung from it would
   run off the screen's start; there it spans the bar instead. `fixed` places
   it against the bar, not the window, since the bar's backdrop blur makes
   the bar the containing block of anything fixed inside it. */
@media (width <= 560px) {
  .kairo-bell__panel {
    position: fixed;
    top: calc(100% + 6px);
    inset-inline: 12px;
    width: auto;
  }
}