@use '../../sass/abstracts/variables';

#{variables.$component-prefix}video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  width: 100%;

  // will show the overlay when video is paused
  :has([data-button-state='pause'])::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 5;
    pointer-events: none; // Allow clicks to pass through the overlay
  }

  iframe,
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  // Custom play/pause button for html video
  .video__ {
    &play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      z-index: 10;
      fill: variables.$sodra-green;
      &:hover {
        fill: darken(variables.$sodra-green, 5);
      }
      &-icon {
        // this will result in 80x80px icon on bigger screens
        width: 27%;
        height: 27%;
      }
    }
  }

  .video__play-button[data-button-state='pause']
    .video__play-button-icon--pause,
  .video__play-button[data-button-state='play'] .video__play-button-icon--play {
    display: none;
  }

  .video__play-button[data-button-state='play'] .video__play-button-icon {
    opacity: 0;
  }

  .video__container:hover .video__play-button-icon {
    opacity: 1;
  }

  .video__play-button:hover {
    opacity: 0.9;
  }
}