@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
@use '../bubble-mixins' as bubble;

.video-message {
  margin: 2px;
  position: relative;
  @include bubble.bubble-media();

  .video-message__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  &--last--self {
    border-bottom-right-radius: 4px;
  }

  &--last--other {
    border-bottom-left-radius: 4px;
  }

  &--loaded {
    .video-message__video {
      opacity: 1;
    }
  }
}

.video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      rgba(245, 245, 245, 100%) 0%,
      rgba(235, 235, 235, 100%) 50%,
      rgba(245, 245, 245, 100%) 100%
    );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}