/* The share popup (public/js/word-actions.js): the word's short link and a Copy button, next to the share button. */

/* The UA styles centre a popover (inset: 0; margin: auto); word-actions.js places it at the button instead. */
.share-popup {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(26rem, calc(100vw - 12px));
  overflow: visible; /* one row, nothing to scroll (the UA's `auto` showed a bar for the hidden status line) */
  padding: var(--space-2) var(--space-3) var(--space-3);
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.share-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.share-header strong {
  flex: 1;
  overflow-wrap: anywhere;
}

.share-close {
  min-width: var(--size-control-sm);
  min-height: var(--size-control-sm);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  background: none;
  cursor: pointer;
}

.share-close:hover {
  color: var(--color-text);
  background: var(--color-border);
}

.share-row {
  display: flex;
  gap: var(--space-2);
}

.share-link {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
}

/* Holds its width when the label becomes "✓ Copied", so the row doesn't jump. */
.share-copy {
  flex: none;
  min-width: 7.5rem;
}

/* Also while hovered: beats `.button-primary:hover:not(…)` (0,3,0). */
.button-primary.share-copy.copied:not(:disabled) {
  color: var(--color-on-solid);
  background: var(--color-success-solid);
  border-color: var(--color-success-solid);
}