@import "import";

.videoContainer {
  position: relative;
  //width: 100%;
  height: 100%;
  max-height: 90vh;
  background-color: rgb(185 182 174);

  .fileVideo {
    //width: 100%;
    height: 100%;
    max-height: 90vh;
    display: block;
    //transform: scale(1.03);
    pointer-events: none;
    //transition: transform 0.4s ease-out;

    &.show {
      pointer-events: auto;

      &:active {
        //transform: scale(1);
      }
    }
  }

  video {
    max-height: 90vh;
  }

  //- Mux-player customize
  mux-player {
    // --controls: none;
    --play-button: none;
    --live-button: none;
    --seek-backward-button: none;
    --seek-forward-button: none;
    --mute-button: none;
    --captions-button: none;
    --airplay-button: none;
    --pip-button: none;
    --fullscreen-button: none;
    --cast-button: none;
    //--playback-rate-button: none;
    --volume-range: none;
    //--time-range: none;
    //--time-display: none;
    --title-display: none;
    //--duration-display: none;
    --media-object-fit: cover;
    //width: 100%;
    height: 100%;
  }

  mux-player,
  mux-video,
  media-theme,
  img {
    //width: 100%;
    height: 100%;
    max-height: 90vh !important;
    display: block;
    object-fit: cover;
  }

  .extVideo {
    position: relative;

    & > iframe {
      width: 100%;
      height: 100%;
      max-height: 90vh;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.controls {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 90vh;
  z-index: z(1);

  .playIconsWrapper {
    position: absolute;
    --radius: 36px;
    width: var(--radius);
    height: var(--radius);
    left: 1.2rem;
    bottom: 1.2rem;
    line-height: 0;
    background-color: rgba(109, 109, 109, 0.65);
    backdrop-filter: blur(8px);
    border-radius: rounded(circle);
    z-index: z(3);

    @include flex();

    opacity: 0;
    transform: scale(0);
    transition:
      transform 0.5s ease-out,
      opacity 0.4s ease,
      background-color 0.3s ease;

    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.5);

      width: 14px;
      height: 14px;

      color: color(white);

      transition:
        opacity 0.25s,
        transform 0.25s ease-out;
      opacity: 0;

      &.active {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    .iconPlay {
      left: 54%;
    }
    .iconPause {
    }

    @include breakpoint(medium) {
      --radius: 36px;
    }

    &.show {
      transform: scale(1);
      opacity: 1;
      pointer-events: auto;
      cursor: pointer;

      &:hover {
        background-color: rgba(161, 161, 161, 0.65);
      }

      &:active {
        transition: transform 0.2s ease-out;
        transform: scale(0.96);
      }
    }
  }

  .download {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: z(4);
    overflow: hidden;

    display: flex;
    padding: 3px 5px 3px 7px;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;

    border-radius: 99px;
    background-color: rgba(109, 109, 109, 0.65);
    backdrop-filter: blur(8px);

    transition:
      opacity 0.25s ease-out 0.15s,
      width 0.3s ease-out 0s,
      background-color 0.3s ease;
    width: 16px;
    opacity: 0;

    @include breakpoint(medium) {
      padding: 3px 5px 3px 8px;
    }

    .iconDownload {
      position: relative;
      width: 16px;
      height: 16px;
      color: color(white);

      .arrow,
      .spinner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transform: scale(0);
        @include transition("transform, opacity", 0.25s, ease-in-out, 0.4s);
      }
    }

    > span {
      color: color(white);
      font-size: 14px;
      font-family: var(--font-family-sans-serif);
      font-style: normal;
      font-weight: 500;
      letter-spacing: var(--letter-spacing-base);

      opacity: 0;
      transition: opacity 0.2s ease-out 0.15s;

      @include breakpoint(medium) {
        font-size: 16px;
      }
    }

    &.show {
      width: 92px;
      opacity: 1;
      transition:
        opacity 0.2s ease-out 0s,
        width 0.33s ease-out 0.17s,
        background-color 0.3s ease,
        transform 0.2s ease-out;

      cursor: pointer;
      pointer-events: auto;

      @include breakpoint(medium) {
        width: 101px;
      }

      &:hover {
        background: rgba(161, 161, 161, 0.65);
      }
      &:active {
        transform: scale(0.96);
      }

      .iconDownload {
        .arrow {
          transition-delay: 0.5s;
          opacity: 1;
          transform: scale(1);
        }

        @keyframes spinner {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

        .spinner {
          top: -2px;
          transition-delay: 0s;
          opacity: 0;
          transform: scale(0);

          .spinnerIcon {
            animation: none;
          }
        }
      }

      > span {
        opacity: 1;
        transition: opacity 0.2s ease-out 0.5s;
      }
    }

    &.downloading {
      pointer-events: none;

      > span {
        opacity: 0.4;
      }

      .iconDownload {
        .arrow {
          transition-delay: 0s;
          opacity: 0;
          transform: scale(0);
        }

        .spinner {
          transition-delay: 0.5s;
          opacity: 1;
          transform: scale(1);

          .spinnerIcon {
            animation: spinner 0.8s linear infinite;
          }
        }
      }
    }
  }
}