/* Text-only post expanders share the Manage accordion animation, but not its
   layout. The decoration is out of the flex flow so existing centered labels
   and the Feed full-width bar's balancing pseudo-elements stay centered. */
.post-expand-btn.has-flip-text-icon {
  position: relative;
}

.post-expand-btn.has-flip-text-icon > .accordion-flip-icon--text {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: .4rem;
  display: block;
  flex: none;
  inline-size: 1.4rem;
  margin: 0;
  line-height: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.post-expand-btn.has-flip-text-icon > .accordion-flip-icon--text img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  transition: transform .3s ease;
}

.post-expand-btn.has-flip-text-icon[aria-expanded="true"] > .accordion-flip-icon--text img {
  transform: rotate(180deg);
}

/* Feed's post-action pill is only 1.1rem tall. Reserve space for a smaller
   picture without changing its existing flex alignment or touch target. */
.post-expand-btn.has-flip-text-icon.post-top-toggle-btn,
html[data-theme-preference] body.pc-feed-shell .post .post-actions > button.post-top-toggle-btn.has-flip-text-icon,
body.pc-feed-shell .post .post-actions > button.post-top-toggle-btn.has-flip-text-icon {
  padding-inline-end: 1.65rem !important;
}

.post-expand-btn.has-flip-text-icon.post-top-toggle-btn > .accordion-flip-icon--text {
  inset-inline-end: .28rem;
  inline-size: 1.15rem;
}

/* The Feed header's badge planner relies on the pill's original compact
   footprint at phone/narrow-tablet widths. Keep the picture in the DOM for
   state/reduced-motion consistency, but let the full-width button carry the
   visible animation when this header cannot afford the extra icon width. */
@media (max-width: 640px) {
  .post-expand-btn.has-flip-text-icon.post-top-toggle-btn,
  html[data-theme-preference] body.pc-feed-shell .post .post-actions > button.post-top-toggle-btn.has-flip-text-icon,
  body.pc-feed-shell .post .post-actions > button.post-top-toggle-btn.has-flip-text-icon {
    padding-inline-end: 12px !important;
  }

  .post-expand-btn.has-flip-text-icon.post-top-toggle-btn > .accordion-flip-icon--text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-expand-btn.has-flip-text-icon > .accordion-flip-icon--text img {
    transition: none;
  }
}

html[data-a11y-reduce-motion="true"] .post-expand-btn.has-flip-text-icon > .accordion-flip-icon--text img {
  transition: none;
}