$play-button-background-color: #ccc;
$play-button-color: black;

.splide {
  $root: &;

  &__slide {
    &--has-video {
      cursor: pointer;

      &:hover {
        #{$root}__video {
          &__play {
            opacity: 1;
          }
        }
      }
    }

    &__container {
      &--has-video {
        cursor: pointer;
        position: relative;

        &:hover {
          #{$root}__video {
            &__play {
              opacity: 1;
            }
          }
        }
      }
    }
  }

  &__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;

    // for vimeo
    div {
      height: 100%;
    }

    iframe, video {
      width: 100%;
      height: 100%;
    }

    &__play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate( -50%, -50% );
      background: $play-button-background-color;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: .7;

      &:after {
        content: "";
        display: inline-block;
        border-style: solid;
        border-width: 9px 0 9px 17px;
        border-color: transparent transparent transparent $play-button-color;
        margin-left: 4px;
      }
    }
  }
}