@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;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow);
  

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

  @media (hover: hover) {
    transition: box-shadow 0.3s ease;

    &:hover {
      box-shadow: var(--box-shadow-hover);

      .video-modal-play-icon {
        background-color: var(--color-primary-hover);
        box-shadow: var(--box-shadow-hover);
        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-color: var(--color-primary);
  border-radius: 50%;
  box-shadow: var(--box-shadow);

  &::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);
    content: "";
    border: calc($_video-play-btn-arrow-height / 2) solid transparent;
    border-left: $_video-play-btn-arrow-width solid $_video-play-btn-arrow-color;
  }


  @media (hover: hover) {
    transition:
      transform 0.3s ease,
      background-color 0.3s ease,
      box-shadow 0.3s ease;
  }
}

@include acms.media-breakpoint-up(md) {
  .video-modal {
    justify-content: flex-end;
  }
}

@include acms.media-breakpoint-up(lg) {
  .video-modal-thumbnail {
    max-width: $_video-thumbnail-size-lg;
  }

  .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;
    }
  }
}

@include acms.media-breakpoint-down(md) {
  .modal-video-inner {
    padding: 0 1.25rem;
  }

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