@use "sass:math";
@use "global/acms-common" as acms;
@use "global/common" as global;

$_video-thumbnail-size: 31rem;
$_video-play-btn-size: 4rem;
$_video-play-btn-arrow-height: 1.5rem;
$_video-play-btn-arrow-width: 1rem;
$_video-play-btn-arrow-color: #fff;
$_video-thumbnail-size-lg: 42rem;
$_video-play-btn-size-lg: 5rem;
$_video-play-btn-arrow-height-lg: 2rem;
$_video-play-btn-arrow-width-lg: 1.5rem;

/* ------------------------------
　　ビデオ
------------------------------ */
.video-modal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-thumbnail {
  position: relative;
  display: block;
  max-width: $_video-thumbnail-size;
  margin: 0 auto 2rem;
  overflow: hidden;
  border-radius: global.$border-radius-xl;
  box-shadow: global.$elevation02;
  transition: box-shadow 0.2s;

  .video-modal-play-icon {
    transform: scale(0.9);
  }

  &:hover {
    box-shadow: global.$elevation10;

    .video-modal-play-icon {
      transform: scale(1);
    }
  }
}

.video-modal-play-icon-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc($_video-play-btn-size / -2);
  margin-left: calc($_video-play-btn-size / -2);

  .js .js-animation & {
    opacity: 0;
    will-change: transform, opacity;
  }

  .js .js-animation.is-show & {
    animation: fade-in 0.2s 0.8s 1 both;
  }
}

.video-modal-play-icon {
  position: relative;
  display: block;
  width: $_video-play-btn-size;
  height: $_video-play-btn-size;
  background: global.$color-primary;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
  transition: transform 0.2s ease;

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin-top: calc($_video-play-btn-arrow-height / -2);
    margin-left: calc($_video-play-btn-arrow-height / -4);
    border: calc($_video-play-btn-arrow-height / 2) solid transparent;
    border-left: $_video-play-btn-arrow-width solid $_video-play-btn-arrow-color;
    content: "";
  }
}

@media screen and (min-width: acms.$breakpoint-sm-min) {
  .video-modal-thumbnail {
    margin: 0 0 2rem;
  }
}

@media screen and (min-width: acms.$breakpoint-md-min) {
  .video-modal {
    justify-content: flex-end;
    padding: 0 10% 0 0;
  }
}

@media screen and (min-width: acms.$breakpoint-lg-min) {
  .video-modal {
    margin: 0 0 0 auto;
  }

  .video-modal-thumbnail {
    max-width: $_video-thumbnail-size-lg;
    margin: 3rem auto;
  }

  .video-modal-play-icon-wrap {
    margin-top: calc($_video-play-btn-size-lg / -2);
    margin-left: calc($_video-play-btn-size-lg / -2);
  }

  .video-modal-play-icon {
    width: $_video-play-btn-size-lg;
    height: $_video-play-btn-size-lg;

    &::before {
      margin-top: calc($_video-play-btn-arrow-height-lg / -2);
      margin-left: -0.5rem;
      border: calc($_video-play-btn-arrow-height-lg / 2) solid transparent;
      border-left: $_video-play-btn-arrow-width-lg solid $_video-play-btn-arrow-color;
    }
  }
}

@media screen and (max-width: acms.$breakpoint-md-max) {
  .modal-video-inner {
    padding: 0 1.25rem;
  }

  .modal-video-close-btn {
    top: -3rem;
    right: -5px;
  }
}
