/* Activity bar under an article's header: likes, comments, saves, shares, views and the manage
   menu. Shared by ftl/article/content.ftl and the article/content widget that renders node queues
   (editions), with icons from icons.ftl. Colors meet WCAG AA contrast on the bar and hover
   backgrounds.

   The items sit in one centered row that wraps as needed. Narrow-width adjustments follow the
   bar's own width through container queries rather than the viewport, since the two pages give
   the bar very different widths on the same screen. */
.activity-bar {
  container: activity-bar / inline-size;
  /* Containment makes the bar a stacking context, so this keeps the manage menu above the
     content that follows it */
  position: relative;
  z-index: 6;
  clear: both;
  border-radius: 10px;
  background: #ebecef;
  color: #5b6168;
  font-size: 15px;
  line-height: 1;
}
.activity-bar .activity-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 4px;
  padding: 6px;
}
/* The groups only mark which actions belong together; they add no spacing of their own, so every
   item is spaced evenly and the row wraps one item at a time */
.activity-bar .activity-group {
  display: contents;
}
.activity-bar .activity-split {
  display: flex;
  align-items: center;
  gap: 2px;
}
.activity-bar .activity-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  color: #5b6168;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.activity-bar .activity-btn:hover {
  border-color: #d9dcdd;
  background-color: #ffffff;
  color: #4a5058;
}
.activity-bar .activity-btn:focus-visible {
  outline: 2px solid #0175e4;
  outline-offset: 2px;
}
.activity-bar .activity-btn[aria-pressed="true"] {
  border-color: #b8d8fb;
  background-color: #e1effe;
  color: #0360b8;
}
.activity-bar .activity-btn[aria-pressed="true"]:hover {
  background-color: #d3e7fd;
}
.activity-bar .activity-icon-btn {
  justify-content: center;
  width: 36px;
  padding: 0;
}
.activity-bar .activity-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #0175e4;
}
/* The brand logos are solid, so they're drawn a little smaller to match the outline icons */
.activity-bar .activity-brand-icon {
  width: 16px;
  height: 16px;
}
/* Fills the outline icon of a pressed toggle (liked, saved) */
.activity-bar .activity-btn[aria-pressed="true"] .activity-icon {
  color: #0360b8;
  fill: currentColor;
}
.activity-bar .activity-count {
  min-width: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.06);
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Wrapper element of a button whose markup comes from a directive, such as the edition's dz-save */
.activity-bar .activity-slot {
  display: inline-flex;
}
/* Non-interactive items: the view count, and comments being closed on an edition */
.activity-bar .activity-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  font-weight: 600;
  white-space: nowrap;
}
.activity-bar .activity-status .activity-icon {
  color: #5b6168;
}
.activity-bar .right-most {
  display: flex;
  align-items: center;
  gap: 4px;
}
.activity-bar .activity-manage {
  position: relative;
}
.activity-bar .activity-manage-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 6;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid #d9dcdd;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  text-align: left;
}
.activity-bar .activity-manage-menu a,
.activity-bar .activity-manage-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.activity-bar .activity-manage-menu a:hover,
.activity-bar .activity-manage-menu button:hover {
  background-color: #f0f1f3;
  color: #333333;
}
.activity-bar .activity-manage-menu a:focus-visible,
.activity-bar .activity-manage-menu button:focus-visible {
  outline: 2px solid #0175e4;
  outline-offset: -2px;
}

/* Too narrow for one line: tighter buttons fit more on each row */
@container activity-bar (max-width: 820px) {
  .activity-bar .activity-btn {
    padding: 0 10px;
  }
  .activity-bar .activity-icon-btn {
    padding: 0;
  }
}
/* Phone width: the share links go icon-only, keeping their labels for screen readers */
@container activity-bar (max-width: 440px) {
  .activity-bar .activity-manage {
    display: none;
  }
  .activity-bar .activity-share .activity-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .activity-bar .activity-share .activity-btn {
    justify-content: center;
    width: 36px;
    padding: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .activity-bar .activity-btn {
    transition: none;
  }
}