/* Transitions.dev — Card resize (https://transitions.dev) */

/*
  Usage:
    <div class="t-resize">…</div>

  Put `.t-resize` on any element and change its width/height
  (directly, or via a state class such as `.is-small`). The
  transition will tween the two sizes.
*/

:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-resize {
  transition:
    width var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}

.t-resize.is-resizing {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}