/* ==========================================================================
   Bookmarks — the top bar's menu, and the star on a record page

   The menu sits where the account menu does (see components/topbar) but is
   opened by clicking rather than hovering, and is wider: a bookmark carries a
   name and the context that tells two similar ones apart, where the account menu
   carries one word. Its open state is a `hidden` class rather than a :hover rule,
   because you have to be able to move the pointer into it — see
   controllers/dropdown.
   ========================================================================== */
.topbar__bookmarks {
  position: relative;
}

.topbar__bookmarks-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  padding: 0;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.topbar__bookmarks-trigger:hover,
.topbar__bookmarks-trigger[aria-expanded="true"] {
  background-color: var(--tint-white-16);
}

.topbar__bookmarks-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 300px;
  max-height: 420px;
  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__bookmarks-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;
}

/* ==========================================================================
   The list
   ========================================================================== */
.bookmarks__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

/* The remove control sits over the row rather than beside it, so the row's own
   name has the full width and the list does not develop a ragged right edge. */
.bookmarks__item {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

/* The row being dragged stays visible but recedes, so the gap it will land in is
   what the eye follows rather than the row itself. */
.bookmarks__item--dragging {
  opacity: 0.4;
}

.bookmarks__grip {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 2px;
  color: var(--color-text-faint);
  cursor: grab;
  /* Faint rather than hidden, as the remove control is: a handle that only
     appears under the pointer is a handle nobody knows is there, and one on a
     touch screen would never appear at all. */
  opacity: 0.45;
  transition: opacity var(--transition-base);
}

.bookmarks__item:hover .bookmarks__grip {
  opacity: 1;
}

.bookmarks__item--dragging .bookmarks__grip {
  cursor: grabbing;
}

.bookmarks__link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.bookmarks__link:hover {
  background-color: var(--tint-navy-04);
}

.bookmarks__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text);
  font-size: var(--font-size-medium);
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.bookmarks__context {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Which of the four kinds this row is, leading the context line. Inked a shade
   darker than the rest of it so a column of them can be scanned. */
.bookmarks__kind {
  color: var(--color-text);
  font-family: var(--font-family-bold);
  font-weight: 600;
}

.bookmarks__remove {
  position: absolute;
  right: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  padding: 0;
  color: var(--color-text-faint);
  cursor: pointer;
  /* Faint rather than hidden. The menu was opened deliberately, so the control
     that empties it has no reason to hide — and a row that only reveals it on
     hover cannot be emptied on a touch screen at all. */
  opacity: 0.5;
  transition: opacity var(--transition-base), background-color var(--transition-base),
    color var(--transition-base);
}

.bookmarks__item:hover .bookmarks__remove,
.bookmarks__remove:focus-visible {
  opacity: 1;
}

.bookmarks__remove:hover {
  background-color: var(--tint-danger-10);
  color: var(--color-danger);
}

.bookmarks__empty,
.bookmarks__loading {
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: 1.5;
}

.bookmarks__loading {
  color: var(--color-text-faint);
}

/* ==========================================================================
   The star on a record page

   Filled is bookmarked, outline is not — one control in two positions, sitting
   in the record header's row of actions.
   ========================================================================== */
.bookmark-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base),
    color var(--transition-base);
}

.bookmark-toggle:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.bookmark-toggle--on {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.bookmark-toggle--on:hover {
  border-color: var(--color-warning-dark);
  color: var(--color-warning-dark);
}

.bookmark-toggle__icon {
  display: block;
}