/* the bell of the notifications (as in Finance): in the user box, top right, an icon with the explanation over it */
/* One file for one part of the application: a change of that part touches only this file. */

.userbox .who-name {
  grid-column: 1;
}
.userbox .bell {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
}
.userbox .bell:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.userbox .bell.on {
  color: var(--accent);
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.userbox .bell.off {
  opacity: 0.35;
  cursor: default;
}
.userbox .bell:focus-visible {
  outline: 3px solid #f59331;
  outline-offset: 2px;
}
.userbox .bell[data-hint]:hover::after,
.userbox .bell[data-hint]:focus-visible::after {
  right: 0;
  left: auto;
  white-space: normal;
}
/* in the open menu the tip is anchored to the whole user box (not to the bell, which sits near the right edge), so it can never go beyond the menu */
@media (min-width: 861px) {
  html:not(.side-off) .userbox {
    position: relative;
  }
  html:not(.side-off) .userbox .bell[data-hint] {
    position: static;
  }
  html:not(.side-off) .userbox .bell[data-hint]:hover::after,
  html:not(.side-off) .userbox .bell[data-hint]:focus-visible::after {
    left: 0;
    right: auto;
    box-sizing: border-box;
    max-width: calc(100% - 14px);
  }
  /* in the narrow bar the tip is made beside the icon by menu.js */
  html.side-off .userbox .bell[data-hint]:hover::after,
  html.side-off .userbox .bell[data-hint]:focus-visible::after {
    display: none;
  }
}
html.side-off .userbox .bell {
  grid-column: auto;
}
.userbox .bell.busy {
  cursor: progress;
  animation: bell-wait 0.9s ease-in-out infinite;
}
@keyframes bell-wait {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .userbox .bell.busy {
    animation: none;
    opacity: 0.5;
  }
}