// RAMEN VIDEO COMPONENT
//
//
// Required Global Variables:
// $global-transition-speed
// $global-easing
// $spacing-base
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
// $video-play-button-background-color
// $video-play-button-background-color-hover
// $video-overlay-background-color: Sets the video overlay background color
// $video-aspect-ratio: Sets the video aspect ratio in percentage
//
//
.c-video {
  &__action {
    align-content: center;
    align-items: center;
    bottom: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;

    svg {
      display: block;
      fill: $video-play-button-background-color;
      height: auto;
      transition: fill $global-transition-speed $global-easing;
      width: 10%;
    }

    &:hover {
      svg {
        fill: $video-play-button-background-color-hover;
      }
    }
  }

  &__image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    position: absolute;
    width: 100%;

    &:after {
      background-color: $video-overlay-background-color;
      bottom: 0;
      content: '';
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }

    img {
      display: none;
    }
  }

  &__iframe {
    height: 0;
    margin: 0 auto;
    max-width: 100%;
    opacity: 1;
    overflow: hidden;
    padding-bottom: $video-aspect-ratio;
    position: relative;
    transform: scale(1);
    transition: opacity $global-transition-speed $global-easing 0s,
      transform $global-transition-speed $global-easing 0s;
    visibility: visible;
    width: 100%;

    .js & {
      opacity: 0;
      overflow: hidden;
      transform: scale(1.1);
      visibility: hidden;
    }

    iframe,
    object,
    embed {
      border: none;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  &__wrapper {
    position: relative;

    &.is-playing {
      .c-video__iframe {
        opacity: 1;
        transform: scale(1);
        visibility: visible;
      }
    }
  }
}