@import '@/sass/style.scss';

.YouTubePlayer {
  position: relative;

  & > div {
    padding-top: calc((9 / 16) * 100%);
    position: relative;
    width: 100%;

    iframe {
      height: 100%;
      left: 0;
      object-fit: cover;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  .play {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;

    &::after {
      background-image: linear-gradient(to bottom, rgba($black, 0) 0%, rgba($very-dark-green, 0.92) 100%);
      content: '';
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .cover {
      background-position: center center;
      background-size: cover;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

    svg {
      @include z-layer-2;
      bottom: 8px;
      fill: $very-soft-green;
      height: 36px;
      position: absolute;
      right: 16px;
      width: 36px;
    }
  }
}
