.icon-button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 40px;
  border: 1px solid var(--border-header-button);
  background-color: var(--surface-header-button);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: background-color var(--transition-standard), width var(--transition-standard),
    border-radius var(--transition-standard);
}

.icon-button:active {
  background-color: rgba(255, 255, 255, 0.34);
}

.icon-button__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.search-bar {
  position: relative;
  margin-left: auto;
}

/* Width is set inline (js/app.js) to an explicit computed pixel value when
   expanding, not flex-grow — a CSS width transition can't reliably animate
   toward a flex-resolved "auto" target (it tends to snap instead of ease),
   but it animates smoothly between two concrete pixel values. Still fully
   responsive since the target width is recalculated from the actual
   available space every time, not hardcoded. */

/* Icon and label both sit at fixed absolute positions (matching Figma's own
   collapsed-variant layout, where the label already exists just past the
   circle's edge) — expanding never swaps content, it just grows the clipped
   container and eases the icon over, unrolling the label into view. */
/* Plain pixel `top` in both states, no transform — mixing a percentage
   (50%) + translateY(-50%) in one state with a plain px top in the other
   doesn't interpolate as a straight line during the transition, it produces
   a visible rebound/bounce. A single consistent unit for both states fixes it. */
.search-bar__icon {
  position: absolute;
  top: 12px;
  left: 12px;
  transition: left var(--transition-standard), top var(--transition-standard);
}

.search-bar--expanded .search-bar__icon {
  left: 15px;
  top: 11px;
}

/* Fixed position always (icon's expanded left + 16px wide + 4px gap) — it
   never slides. Sliding it in from a hidden position while the icon also
   moves made the two visibly converge/approach each other, which isn't
   wanted. Reveal is purely an opacity fade + the container's own clip while
   narrow, not a position change. */
.search-bar__placeholder {
  position: absolute;
  top: 50%;
  left: calc(15px + 16px + 4px);
  transform: translateY(-50%);
  width: 218px;
  white-space: nowrap;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  text-align: left;
  opacity: 0;
  transition: opacity var(--transition-standard);
}

.search-bar--expanded .search-bar__placeholder {
  opacity: 1;
}