$video-background: #000 !default;

.video-block {
  .block-content {
    padding: 0;
    height: 100%;
  }
  .video-block__wrap {
    position: relative;
    height: 100%;
    background: $video-background;
    video{
      max-height: 100%;
    }
  }

  .video-block__video {
    width: 100%;
    height: auto;
    display: block;
  }

  .video-block__caption {
    margin-top: 0.75rem;
    font-size: 0.95em;
    opacity: 0.85;
  }

  &.video-block--minimal {
    .video-block__play {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;

      width: 100%;
      height: 100%;

      border: 0;
      padding: 0;
      background: rgba(0, 0, 0, 0.25);
      cursor: pointer;

      transition: opacity 150ms ease;
    }

    .video-block__play-icon {
      width: 74px;
      height: 74px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.6);
      position: relative;
    }

    .video-block__play-icon::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-40%, -50%);

      width: 0;
      height: 0;
      border-top: 14px solid transparent;
      border-bottom: 14px solid transparent;
      border-left: 22px solid #fff;
    }

    // Hidden state toggled by JS
    .video-block__play.is-hidden {
      opacity: 0;
      pointer-events: none;
    }
  }
}