/* Browse hashtags shares the user-profile tag-chip treatment. Explicit html
   specificity keeps seasonal hashtag colors from overriding readable chip text. */
html .hashtag-popover .hashtag-item,
html .profile-tag-list button {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid #d9d2c4 !important;
  border-radius: 4px;
  background: #f1eee7 !important;
  color: #242522 !important;
  font-size: 11px;
  font-weight: 400;
  box-shadow: none !important;
  overflow-wrap: anywhere;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

html .hashtag-popover .hashtag-item:hover,
html .hashtag-popover .hashtag-item:focus-visible,
html .profile-tag-list button:hover,
html .profile-tag-list button:focus-visible {
  background: #f8e7bd !important;
  border-color: #eec170 !important;
  color: #1d1f1d !important;
  outline: none;
  transform: translateX(2px);
}

.hashtag-popover .hashtag-item small {
  color: var(--season-text, var(--muted)) !important;
  opacity: .72;
  font-weight: 500;
}

.hashtag-popover .popover-heading button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--season-border, var(--line));
  border-radius: 7px;
  color: var(--season-text, var(--muted)) !important;
  background: color-mix(in srgb, var(--season-text, var(--ink)) 5%, transparent) !important;
  opacity: 1;
}

.hashtag-popover .popover-heading button:hover,
.hashtag-popover .popover-heading button:focus-visible {
  color: var(--season-accent, var(--green)) !important;
  border-color: var(--season-accent, var(--green));
  background: color-mix(in srgb, var(--season-accent, var(--green)) 10%, transparent) !important;
}

.hashtag-popover .hashtag-list {
  gap: 5px;
}

.hashtag-popover {
  z-index: 50;
}