/**
 * Feeds
 *
 * The feeds manager shared by the side panel and the website
 * (shared/feeds-ui/feeds-manager.ts), with its menu, member search, undo toast
 * and deletion dialog.
 *
 * Loaded after components.css on side-panel.html and on the website. Never
 * injected into LinkedIn: the profile bar uses feeds-content.css.
 *
 *   .keycap            A key the user can press, beside the control it drives.
 *   .icon-button       A square button holding one stroke icon.
 *   .search-field      A search input with its icon and Esc keycap. Child: __input.
 *   .avatar            A member's photo or initials. Pair with --2xs, --sm or --md.
 *   .member-identity   A person's name over their headline, beside an avatar.
 *                      Children: __name, __headline.
 *   .feeds             The manager. Children: __toolbar, __tools, __search,
 *                      __locked, __locked-text, __upgrade, __error, __list,
 *                      __notice, __status. __notice and __locked-text pair
 *                      with .subtitle for their type.
 *   .feed-item         One feed. Children: __row (--active), __grip, __chevron
 *                      (an .icon-button), __open, __name, __hint, __avatars,
 *                      __count, __more, __input, __draft-icon, __error, __body,
 *                      __members, __add, __add-icon.
 *                      --expanded when open; --dragging, --drop-before and
 *                      --drop-after while reordering.
 *   .feed-menu         The ··· menu of a feed. Children: __item (--danger),
 *                      __separator.
 *   .feed-member       One member of an open feed. Children: __profile (a link
 *                      to LinkedIn when the profile is known), __remove.
 *   .member-search     The LinkedIn search under a feed. Children: __results,
 *                      __status, __result.
 *   .undo-toast        The message after a removal, with Annuler. Children:
 *                      __message, __action.
 *   .feed-dialog       The deletion confirmation. Children: __form, __title,
 *                      __message, __actions, __button.
 */

:root {
  --linkgif-keycap-size: 20px;
  --linkgif-icon-button-size: 28px;
  --linkgif-avatar-size-2xs: 20px;
  --linkgif-avatar-size-sm: 32px;
  --linkgif-avatar-size-md: 48px;
  --linkgif-feed-row-height: 36px;
  /* A 24px minimum target (WCAG 2.5.8) for the only way to show the members. */
  --linkgif-feed-chevron-size: var(--linkgif-icon-button-size);
  --linkgif-feed-grip-width: 14px;
  /* Lines the members up under the feed name, past the chevron. */
  --linkgif-feed-indent: calc(var(--linkgif-feed-chevron-size) + var(--linkgif-space-2));
  --linkgif-feed-avatar-overlap: var(--linkgif-space-1);
  --linkgif-feed-dragging-opacity: 0.4;
  --linkgif-feed-menu-width: 220px;
  --linkgif-member-row-height: 44px;
  --linkgif-undo-toast-width: 400px;
  --linkgif-feed-dialog-width: 360px;
}

/* ================================================
   Keycap
================================================ */

.keycap {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;

  min-width: var(--linkgif-keycap-size);
  height: var(--linkgif-keycap-size);
  padding-inline: var(--linkgif-space-1);

  border: var(--linkgif-border);
  border-radius: var(--linkgif-radius-sm);
  color: var(--linkgif-text-muted);

  font-family: var(--linkgif-font);
  font-size: var(--linkgif-font-size-xs);
  font-weight: var(--linkgif-font-weight-medium);
  line-height: var(--linkgif-line-height-tight);
}

/* ================================================
   Icon button
================================================ */

.icon-button {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;

  width: var(--linkgif-icon-button-size);
  height: var(--linkgif-icon-button-size);
  padding: 0;

  border: none;
  border-radius: var(--linkgif-radius-base);
  background: none;
  color: var(--linkgif-text-muted);

  cursor: pointer;
  transition:
    background var(--linkgif-transition-fast),
    color var(--linkgif-transition-fast),
    opacity var(--linkgif-transition-fast);
}

.icon-button svg {
  display: block;

  width: var(--linkgif-icon-sm);
  height: var(--linkgif-icon-sm);
}

/* A button that opens something stays lit while it is open; a disclosure
   chevron only turns. */
.icon-button:is([aria-haspopup], [aria-controls])[aria-expanded='true'],
.icon-button:hover:not(:disabled) {
  background: var(--linkgif-background-subtle);
  color: var(--linkgif-text-primary);
}

.icon-button:focus-visible {
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-inset);
}

.icon-button:disabled {
  color: var(--linkgif-text-faint);

  cursor: not-allowed;
}

/* ================================================
   Search field
================================================ */

.search-field {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-2);

  height: var(--linkgif-space-8);
  padding-inline: var(--linkgif-space-3) var(--linkgif-space-1);

  border: var(--linkgif-border);
  border-radius: var(--linkgif-input-radius);
  background: var(--linkgif-input-background);
  color: var(--linkgif-text-muted);

  cursor: text;
  transition: border-color var(--linkgif-transition-fast);
}

.search-field svg {
  flex-shrink: 0;

  width: var(--linkgif-icon-xs);
  height: var(--linkgif-icon-xs);
}

.search-field__input {
  flex: 1;

  min-width: 0;
  height: 100%;
  padding: 0;

  border: none;
  outline: none;
  background: none;
  color: var(--linkgif-text-primary);
  caret-color: var(--linkgif-accent);

  font-size: var(--linkgif-font-size-sm);
}

.search-field__input::placeholder {
  color: var(--linkgif-text-muted);
}

.search-field__input::-webkit-search-cancel-button {
  appearance: none;
}

.search-field:hover {
  border-color: var(--linkgif-border-color-hover);
}

/* A text field signals focus with its border alone. */
.search-field:focus-within {
  border-color: var(--linkgif-accent);
}

/* ================================================
   Avatar
================================================ */

.avatar {
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  border-radius: var(--linkgif-radius-full);
  background: var(--linkgif-background-elevated);
  color: var(--linkgif-text-muted);

  font-size: var(--linkgif-font-size-2xs);
  font-weight: var(--linkgif-font-weight-semibold);

  object-fit: cover;
}

.avatar--2xs {
  width: var(--linkgif-avatar-size-2xs);
  height: var(--linkgif-avatar-size-2xs);
}

.avatar--sm {
  width: var(--linkgif-avatar-size-sm);
  height: var(--linkgif-avatar-size-sm);

  font-size: var(--linkgif-font-size-xs);
}

.avatar--md {
  width: var(--linkgif-avatar-size-md);
  height: var(--linkgif-avatar-size-md);

  font-size: var(--linkgif-font-size-sm);
}

/* ================================================
   Member identity
================================================ */

.member-identity {
  display: flex;
  flex: 1;
  flex-direction: column;

  min-width: 0;
}

.member-identity__name,
.member-identity__headline {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-identity__name {
  font-size: var(--linkgif-font-size-sm);
  font-weight: var(--linkgif-font-weight-medium);
  line-height: var(--linkgif-line-height-snug);
}

.member-identity__headline {
  color: var(--linkgif-text-muted);

  font-size: var(--linkgif-font-size-xs);
}

/* ================================================
   Feeds
================================================ */

.feeds {
  display: flex;
  flex-direction: column;
  gap: var(--linkgif-space-4);

  width: 100%;
}

.feeds__toolbar {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-3);

  min-height: var(--linkgif-icon-button-size);
}

.feeds__tools {
  display: flex;
  gap: var(--linkgif-space-1);

  margin-inline-start: auto;
}

.feeds__locked {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-3);

  padding: var(--linkgif-space-2) var(--linkgif-space-2) var(--linkgif-space-2)
    var(--linkgif-space-3);

  border: var(--linkgif-border);
  border-radius: var(--linkgif-radius-base);
  background: var(--linkgif-background-card);
}

.feeds__locked-text {
  flex: 1;
}

.feeds__upgrade {
  flex-shrink: 0;

  height: var(--linkgif-icon-button-size);
  padding: 0 var(--linkgif-space-3);

  border: var(--linkgif-border-width-base) var(--linkgif-border-style)
    var(--linkgif-border-color-pro);
  border-radius: var(--linkgif-radius-base);
  background: none;
  color: var(--linkgif-pro);

  font-size: var(--linkgif-font-size-sm);
  font-weight: var(--linkgif-font-weight-medium);
  white-space: nowrap;

  cursor: pointer;
  transition: background var(--linkgif-transition-fast);
}

.feeds__upgrade:hover {
  background: var(--linkgif-background-pro);
}

.feeds__upgrade:focus-visible {
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-offset);
}

.feeds__error {
  color: var(--linkgif-error);

  font-size: var(--linkgif-font-size-sm);
}

.feeds__list {
  display: flex;
  flex-direction: column;
  gap: var(--linkgif-space-1);

  list-style: none;
}

.feeds__notice {
  padding: var(--linkgif-space-3) var(--linkgif-space-1);

  list-style: none;
}

/* Read by screen readers only: announces where a reordered feed landed. */
.feeds__status {
  position: absolute;

  width: 1px;
  height: 1px;
  overflow: hidden;

  clip-path: inset(50%);

  white-space: nowrap;
}

/* ================================================
   Feed item
================================================ */

.feed-item {
  position: relative;
}

.feed-item__row {
  --linkgif-feed-item-ring: var(--linkgif-background);

  position: relative;

  display: flex;
  align-items: center;
  gap: var(--linkgif-space-1);

  height: var(--linkgif-feed-row-height);
  padding-inline: var(--linkgif-space-1);

  border-radius: var(--linkgif-radius-base);

  transition: background var(--linkgif-transition-fast);
}

/* Drawn in the page margin, left of the row, so it never shifts the names. */
.feed-item__grip {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--linkgif-feed-grip-width));

  display: flex;

  width: var(--linkgif-feed-grip-width);

  color: var(--linkgif-text-faint);
  opacity: 0;
  transform: translateY(-50%);

  cursor: grab;
  transition: opacity var(--linkgif-transition-fast);
}

.feed-item__grip svg {
  width: var(--linkgif-icon-xs);
  height: var(--linkgif-icon-xs);
}

.feed-item__chevron {
  color: var(--linkgif-text-faint);
}

.feed-item__chevron svg {
  width: var(--linkgif-icon-xs);
  height: var(--linkgif-icon-xs);

  transition: transform var(--linkgif-transition-base);
}

/* No ring of its own: the whole row lights up on focus (see the states below). */
.feed-item__open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--linkgif-space-2);

  min-width: 0;
  height: 100%;
  padding: 0 var(--linkgif-space-1);

  border: none;
  outline: none;
  background: none;
  color: var(--linkgif-text-primary);

  text-align: start;

  cursor: pointer;
}

/* Sized to its text, so the hint arrow sits right after the name. */
.feed-item__name {
  flex: 0 1 auto;

  min-width: 0;
  overflow: hidden;

  font-size: var(--linkgif-font-size-sm);
  font-weight: var(--linkgif-font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-item__hint {
  display: flex;
  flex-shrink: 0;

  color: var(--linkgif-text-muted);
  opacity: 0;

  transition: opacity var(--linkgif-transition-fast);
}

.feed-item__hint svg {
  width: var(--linkgif-icon-xs);
  height: var(--linkgif-icon-xs);
}

.feed-item__avatars {
  display: flex;

  margin-inline-start: auto;
}

/* The ring takes the row's colour, so overlapping photos read as separate. */
.feed-item__avatars .avatar {
  box-shadow: 0 0 0 var(--linkgif-border-width-thick) var(--linkgif-feed-item-ring);
}

.feed-item__avatars .avatar + .avatar {
  margin-inline-start: calc(-1 * var(--linkgif-feed-avatar-overlap));
}

/* As wide as the ··· button, which takes its place on hover. */
.feed-item__count {
  min-width: var(--linkgif-icon-button-size);

  color: var(--linkgif-text-muted);

  font-size: var(--linkgif-font-size-xs);
  font-variant-numeric: tabular-nums;
  text-align: end;

  transition: opacity var(--linkgif-transition-fast);
}

.feed-item__more {
  position: absolute;
  top: 50%;
  right: var(--linkgif-space-1);

  opacity: 0;
  transform: translateY(-50%);
}

.feed-item__input {
  flex: 1;

  min-width: 0;
  height: calc(var(--linkgif-feed-row-height) - var(--linkgif-space-2));
  padding: 0 var(--linkgif-space-1);

  border: var(--linkgif-border-width-base) var(--linkgif-border-style) var(--linkgif-accent);
  border-radius: var(--linkgif-radius-sm);
  outline: none;
  background: var(--linkgif-input-background);
  color: var(--linkgif-text-primary);
  caret-color: var(--linkgif-accent);

  font-size: var(--linkgif-font-size-sm);
  font-weight: var(--linkgif-font-weight-medium);
}

.feed-item__input::placeholder {
  color: var(--linkgif-text-muted);
}

/* Holds the chevron's place in the new feed's row. */
.feed-item__draft-icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;

  width: var(--linkgif-feed-chevron-size);

  color: var(--linkgif-text-faint);
}

.feed-item__draft-icon svg {
  width: var(--linkgif-icon-xs);
  height: var(--linkgif-icon-xs);
}

.feed-item__error {
  padding: var(--linkgif-space-1) var(--linkgif-space-1) 0 var(--linkgif-feed-indent);

  color: var(--linkgif-error);

  font-size: var(--linkgif-font-size-xs);
}

.feed-item__body {
  display: flex;
  flex-direction: column;

  padding: 0 0 var(--linkgif-space-2) var(--linkgif-feed-indent);
}

.feed-item__members {
  display: flex;
  flex-direction: column;

  list-style: none;
}

.feed-item__add {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-2);

  width: 100%;
  height: var(--linkgif-space-8);
  padding: 0 var(--linkgif-space-1);

  border: none;
  border-radius: var(--linkgif-radius-base);
  background: none;
  color: var(--linkgif-text-muted);

  font-size: var(--linkgif-font-size-sm);
  text-align: start;

  cursor: pointer;
  transition:
    background var(--linkgif-transition-fast),
    color var(--linkgif-transition-fast);
}

.feed-item__add-icon {
  display: flex;
  justify-content: center;

  width: var(--linkgif-avatar-size-sm);
}

.feed-item__add-icon svg {
  width: var(--linkgif-icon-sm);
  height: var(--linkgif-icon-sm);
}

.feed-item--expanded .feed-item__chevron svg {
  transform: rotate(90deg);
}

.feed-item--dragging {
  opacity: var(--linkgif-feed-dragging-opacity);
}

.feed-item--drop-before::before,
.feed-item--drop-after::after {
  content: '';

  position: absolute;
  right: 0;
  left: 0;

  height: var(--linkgif-border-width-thick);

  border-radius: var(--linkgif-radius-full);
  background: var(--linkgif-accent);
}

.feed-item--drop-before::before {
  top: calc(-1 * var(--linkgif-border-width-thick));
}

.feed-item--drop-after::after {
  bottom: calc(-1 * var(--linkgif-border-width-thick));
}

/* The row lights up when hovered, when its menu is open, or when its main
   button has keyboard focus. The avatar ring follows the same surface. */
.feed-item__row:is(:hover, .feed-item__row--active, :has(.feed-item__open:focus-visible)) {
  --linkgif-feed-item-ring: var(--linkgif-background-card);

  background: var(--linkgif-feed-item-ring);
}

.feed-item__row:hover .feed-item__grip {
  opacity: 1;
}

/* ··· takes the count's place. Keyboard focus only: a click leaves focus on
   the chevron, and the row must settle back once the pointer leaves it. */
.feed-item__row:is(:hover, .feed-item__row--active, :has(:focus-visible)) .feed-item__more {
  opacity: 1;
}

.feed-item__row:has(.feed-item__more):is(:hover, .feed-item__row--active, :has(:focus-visible))
  .feed-item__count {
  opacity: 0;
}

.feed-item__open:hover .feed-item__hint,
.feed-item__open:focus-visible .feed-item__hint {
  opacity: 1;
}

.feed-item__add:hover {
  background: var(--linkgif-background-card);
  color: var(--linkgif-text-primary);
}

.feed-item__row:has(.feed-item__open:focus-visible),
.feed-item__add:focus-visible {
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-inset);
}

/* ================================================
   Feed menu
================================================ */

.feed-menu {
  position: absolute;
  top: calc(100% + var(--linkgif-space-1));
  right: 0;
  z-index: var(--linkgif-z-raised);

  display: flex;
  flex-direction: column;

  width: var(--linkgif-feed-menu-width);
  padding: var(--linkgif-space-1);

  border: var(--linkgif-border);
  border-radius: var(--linkgif-radius-base);
  background: var(--linkgif-background-glass);
  backdrop-filter: var(--linkgif-blur-glass);
  box-shadow: var(--linkgif-shadow-glass);
  transform-origin: top right;

  animation: feed-menu-enter var(--linkgif-transition-base);
}

@keyframes feed-menu-enter {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--linkgif-space-1))) scale(0.97);
  }
}

.feed-menu__item {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-2);

  height: var(--linkgif-space-8);
  padding: 0 var(--linkgif-space-2);

  border: none;
  border-radius: var(--linkgif-radius-sm);
  outline: none;
  background: none;
  color: var(--linkgif-text-secondary);

  font-size: var(--linkgif-font-size-sm);
  text-align: start;

  cursor: pointer;
}

.feed-menu__item svg {
  flex-shrink: 0;

  width: var(--linkgif-icon-sm);
  height: var(--linkgif-icon-sm);

  color: var(--linkgif-text-muted);
}

.feed-menu__separator {
  height: var(--linkgif-border-width-base);
  margin: var(--linkgif-space-1) calc(-1 * var(--linkgif-space-1));

  background: var(--linkgif-border-color);
}

.feed-menu__item--danger,
.feed-menu__item--danger svg {
  color: var(--linkgif-error);
}

.feed-menu__item:hover,
.feed-menu__item:focus-visible {
  background: var(--linkgif-background-subtle);
  color: var(--linkgif-text-primary);
}

.feed-menu__item:focus-visible {
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-inset);
}

/* After the generic states, which would otherwise turn the danger text white. */
.feed-menu__item--danger:hover,
.feed-menu__item--danger:focus-visible {
  background: var(--linkgif-background-error);
  color: var(--linkgif-error);
}

/* ================================================
   Feed member
================================================ */

.feed-member {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-2);

  height: var(--linkgif-member-row-height);
  padding: 0 var(--linkgif-space-1);

  border-radius: var(--linkgif-radius-base);

  transition: background var(--linkgif-transition-fast);
}

.feed-member__profile {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--linkgif-space-2);

  min-width: 0;
  height: 100%;

  border-radius: var(--linkgif-radius-base);
  color: inherit;

  text-decoration: none;
}

.feed-member__remove {
  opacity: 0;
}

.feed-member__remove svg {
  width: var(--linkgif-icon-xs);
  height: var(--linkgif-icon-xs);
}

.feed-member:hover {
  background: var(--linkgif-background-card);
}

.feed-member:hover .feed-member__remove,
.feed-member:has(:focus-visible) .feed-member__remove {
  opacity: 1;
}

.feed-member__profile[href]:hover .member-identity__name {
  text-decoration: underline;
  text-underline-offset: var(--linkgif-underline-offset);
}

.feed-member__profile:focus-visible {
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-inset);
}

/* ================================================
   Member search
================================================ */

.member-search {
  display: flex;
  flex-direction: column;
  gap: var(--linkgif-space-1);

  padding-top: var(--linkgif-space-1);
}

.member-search__results {
  display: flex;
  flex-direction: column;

  list-style: none;
}

.member-search__status {
  padding: var(--linkgif-space-2) var(--linkgif-space-1);

  color: var(--linkgif-text-muted);

  font-size: var(--linkgif-font-size-xs);
}

.member-search__result {
  display: flex;
  align-items: center;
  gap: var(--linkgif-space-2);

  width: 100%;
  height: var(--linkgif-member-row-height);
  padding: 0 var(--linkgif-space-1);

  border: none;
  border-radius: var(--linkgif-radius-base);
  outline: none;
  background: none;
  color: var(--linkgif-text-primary);

  text-align: start;

  cursor: pointer;
  transition: background var(--linkgif-transition-fast);
}

.member-search__result:hover:not(:disabled) {
  background: var(--linkgif-background-card);
}

.member-search__result:focus-visible {
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-inset);
  background: var(--linkgif-background-card);
}

.member-search__result:disabled {
  color: var(--linkgif-text-muted);

  cursor: default;
}

/* ================================================
   Undo toast
================================================ */

.undo-toast {
  position: fixed;
  right: var(--linkgif-space-4);
  bottom: var(--linkgif-space-4);
  left: var(--linkgif-space-4);
  z-index: var(--linkgif-z-toast);

  display: flex;
  align-items: center;
  gap: var(--linkgif-space-3);

  max-width: var(--linkgif-undo-toast-width);
  min-height: var(--linkgif-member-row-height);
  margin-inline: auto;
  padding: var(--linkgif-space-2) var(--linkgif-space-2) var(--linkgif-space-2)
    var(--linkgif-space-3);

  border: var(--linkgif-border);
  border-radius: var(--linkgif-radius-base);
  background: var(--linkgif-background-glass);
  backdrop-filter: var(--linkgif-blur-glass);
  box-shadow: var(--linkgif-shadow-glass);
  color: var(--linkgif-text-primary);

  font-size: var(--linkgif-font-size-sm);

  animation: undo-toast-enter var(--linkgif-transition-base);
}

@keyframes undo-toast-enter {
  from {
    opacity: 0;
    transform: translateY(var(--linkgif-space-2));
  }
}

.undo-toast__message {
  flex: 1;

  min-width: 0;
}

.undo-toast__action {
  height: var(--linkgif-icon-button-size);
  padding: 0 var(--linkgif-space-2);

  border: none;
  border-radius: var(--linkgif-radius-sm);
  background: none;
  color: var(--linkgif-accent-hover);

  font-weight: var(--linkgif-font-weight-medium);

  cursor: pointer;
  transition: background var(--linkgif-transition-fast);
}

.undo-toast__action:hover {
  background: var(--linkgif-background-subtle);
}

.undo-toast__action:focus-visible {
  outline: var(--linkgif-focus-ring);
  outline-offset: var(--linkgif-focus-ring-inset);
}

/* ================================================
   Dialog
================================================ */

.feed-dialog {
  width: min(var(--linkgif-feed-dialog-width), calc(100% - 2 * var(--linkgif-space-4)));
  margin: auto;
  padding: var(--linkgif-space-5);

  border: var(--linkgif-card-border);
  border-radius: var(--linkgif-card-radius);
  background: var(--linkgif-card-background);
  color: var(--linkgif-text-primary);
}

.feed-dialog::backdrop {
  background: var(--linkgif-background-scrim);
  backdrop-filter: var(--linkgif-blur-scrim);
}

.feed-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--linkgif-space-4);
}

.feed-dialog__title {
  font-size: var(--linkgif-font-size-base);
  font-weight: var(--linkgif-font-weight-semibold);
  line-height: var(--linkgif-line-height-snug);
}

.feed-dialog__message {
  color: var(--linkgif-text-secondary);

  font-size: var(--linkgif-font-size-sm);
  line-height: var(--linkgif-line-height-base);
}

.feed-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--linkgif-space-2);
}

/* Compact, like every control in the panel, instead of the full-width .btn. */
.feed-dialog__button {
  width: auto;
  height: var(--linkgif-space-8);
  padding: 0 var(--linkgif-space-3);

  font-size: var(--linkgif-font-size-sm);
}

/* ================================================
   Reduced motion
================================================ */

@media (prefers-reduced-motion: reduce) {
  :is(.feeds, .undo-toast),
  :is(.feeds, .undo-toast) * {
    transition: none;
    animation: none;
  }
}