.mobile-like-motion-graphic {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: visible;
}

[data-mobile-like-motion] .mobile-like-motion-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 40px;
  height: 40px;
  max-width: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: none;
}

[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"] {
  height: 44px;
}

/* Figma frames 0-3 place the foreground 10px above the fixed canvas center. */
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="0"],
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"],
[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="3"] {
  transform: translate(-50%, calc(-50% + 10px));
}

/* Figma 45129:318392: video-detail idle heart is solid white. */
.video-detail-mobile-info__like .video-detail-mobile-info__like-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  overflow: visible;
}

.video-detail-mobile-info__like .video-detail-mobile-info__like-idle {
  display: block;
  width: 18px;
  height: 18px;
  filter: none;
  opacity: 1;
}

.video-detail-mobile-info__like .mobile-like-motion-graphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0;
}

.video-detail-mobile-info__like.is-like-animating .video-detail-mobile-info__like-idle,
.video-detail-mobile-info__like[aria-pressed="true"] .video-detail-mobile-info__like-idle {
  opacity: 0;
}

.video-detail-mobile-info__like.is-like-animating .mobile-like-motion-graphic,
.video-detail-mobile-info__like[aria-pressed="true"] .mobile-like-motion-graphic {
  opacity: 1;
}

.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame {
  width: 24px;
  height: 24px;
}

.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"] {
  height: 26.4px;
}

.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="0"],
.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"],
.video-detail-mobile-info__like[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="3"] {
  transform: translate(-50%, calc(-50% + 6px));
}

@media (prefers-reduced-motion: reduce) {
  [data-mobile-like-motion] .mobile-like-motion-frame {
    transition: none;
  }
}