@use '../../styles/mixin/mixin.scss' as *;

.up-live-photo {
  position: relative;
  overflow: hidden;
  border-radius: inherit;

  &--round {
    border-radius: 50%;
  }

  &__image-layer,
  &__video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  &__image-layer {
    z-index: 1;
    opacity: var(--up-opacity-main);
    transform: scale(1);
    // 默认无过渡，仅在切换时启用
    transition: none;

    &--transitioning {
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &--hidden {
      opacity: 0;
      transform: scale(0.98);
    }
  }

  &__video-layer {
    z-index: 2;
    opacity: 0;
    transform: scale(1.02);
    transition: none;

    &--transitioning {
      transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &--visible {
      opacity: var(--up-opacity-main);
      transform: scale(1.05);
    }
  }

  &__image,
  &__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &__loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__loading-bg {
    width: 100%;
    height: 100%;
    background-color: var(--up-filled-bottom);
  }

  &__interaction {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: transform 0.2s ease-out;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    &--pressing {
      transform: scale(0.98);
    }
  }

  &__indicator {
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: var(--up-padding-main);
    top: var(--up-padding-main);
    z-index: 20;
    background: var(--up-opacfilled-light-cover);
    border-radius: 20rpx;
    color: var(--up-text-white);
    height: 40rpx;
    padding: 0 12rpx;
    box-sizing: border-box;
    transition: background-color 0.3s ease-out;
    transform: none !important;
    pointer-events: none;

    &--active {
      background: var(--up-opacfilled-main-cover);
    }
  }

  &__indicator-icon {
    display: inline-flex;
    align-items: center;
    gap: 6rpx;
  }

  &__indicator-svg-wrap {
    position: relative;
    width: 26rpx;
    height: 26rpx;
    flex-shrink: 0;
  }

  &__indicator-svg {
    width: 26rpx;
    height: 26rpx;
    display: block;
  }

  &__indicator-svg-bright {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    overflow: hidden;
    transition: height 0.3s ease-out;
  }

  &__indicator-text {
    font-size: 20rpx;
    font-weight: var(--up-font-weight-medium);
    color: var(--up-text-white);
    letter-spacing: 0.5rpx;
    line-height: 1;
  }

  &__mute-btn {
    position: absolute;
    right: var(--up-padding-main);
    bottom: var(--up-padding-main);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: var(--up-opacfilled-light-cover);
    transition: background-color 0.2s ease-out;
    pointer-events: auto;

    &:active {
      background: var(--up-opacfilled-main-cover);
    }
  }

  &__mute-btn-img {
    width: 32rpx;
    height: 32rpx;
  }
}