ul {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  width: max-content;
}

ul > li {
  view-transition-name: match-element;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 0.3vw;
  overflow: hidden;
  contain: layout;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

ul > li > button {
  background: #cfd8dc;
  border: 0;
  border-radius: 100px;
  padding: 0.25rem 0.65rem;
  font-size: 0.85rem;
  text-transform: none;
  cursor: pointer;
}

ul > li > button:hover,
ul > li > button:focus-visible {
  background: #b0bec5;
}

.incoming {
  view-transition-name: incoming;
}

body {
  font:
    100%/1.4 system-ui,
    sans-serif;
  background: #455a64;
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}
header {
  display: flex;
  gap: 1rem;
  view-transition-name: buttons-header;
}
header > button {
  flex: 1;
  background: #90a4ae;
  color: white;
  border: 0;
  border-radius: 100px;
  line-height: unset;
  view-transition-name: match-element;
}
header > button:hover,
header > button:focus-visible {
  background: #b0bec5;
}
button {
  font-family: inherit;
}

::view-transition-group(incoming) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-new(incoming) {
  animation-name: incoming-slide-fade;
}

::view-transition-group(outgoing) {
  animation-duration: 280ms;
  animation-timing-function: ease-in;
}
::view-transition-old(outgoing) {
  animation-name: outgoing-shrink-fade;
}

@keyframes incoming-slide-fade {
  from {
    opacity: 0;
    transform: translateX(-64px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes outgoing-shrink-fade {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(72px) scale(0.88);
  }
}