.with-transition .playlist-image {
  view-transition-name: playlist-image;
}

.with-transition .playlist-title {
  view-transition-name: playlist-title;
}

.with-transition .playlist-stats {
  view-transition-name: playlist-stats;
}

.with-transition .playlist-description {
  view-transition-name: playlist-description;
}

.with-transition .playlist-avatar {
  view-transition-name: playlist-avatar;
}

.with-transition .playlist-add-button {
  view-transition-name: playlist-add-button;
}

.with-transition .playlist-user-name {
  view-transition-name: playlist-user-name;
}

.with-transition .playlist-user-date {
  view-transition-name: playlist-user-date;
}

.with-transition .playlist-controls {
  view-transition-name: playlist-controls;
}

.with-transition .playlist-overlay {
  view-transition-name: playlist-overlay;
}

.with-transition .playlist-background {
  view-transition-name: playlist-background;
}

.with-transition .playlist-back-button {
  view-transition-name: playlist-back-button;
}

/**
* Handle card background transition: expanding and shrinking with
* different aspect ratios
*/

::view-transition-old(playlist-background),
::view-transition-new(playlist-background) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

::view-transition-old(playlist-background) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

::view-transition-new(playlist-background) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

/**
* Handle smooth video transition
*/

::view-transition-old(playlist-image) {
  display: none;
}

::view-transition-new(playlist-image) {
  animation: none;
}

/**
* App Header Entry and Exit transitions
*/

::view-transition-new(app-header):only-child {
  animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in;
}

::view-transition-old(app-header):only-child {
  animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out;
}

/**
* Custom animations
*/

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-in {
  from {
    transform: translateY(-70px);
  }
}

@keyframes slide-out {
  to {
    transform: translateY(-70px);
  }
}
