@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@import "animation";

.dailymotion-cpe {
  &:before {
    content: "";
    padding-top: 56.25%;
    background: #000;
    display: block;
    animation: slideInDown;
    animation-duration: 1s;
    animation-iteration-count: 1;
  }
}

.dm__close-button {
  position: absolute !important;
  top: var( --dm-close-top, -38px) !important;
  right: var( --dm-close-right, 0) !important;
  width: var( --dm-close-width, 33px) !important;
  height: var( --dm-close-height, 33px) !important;
  background: var( --dm-close-bg, #000) !important;
  opacity: var( --dm-close-opacity, .45) !important;
  border-radius: 50% !important;
  padding: var( --dm-close-padding, 9px ) !important;
  border: var( --dm-close-border, 0) !important;
  cursor: pointer;

  svg {
    width: 100%;
    height: 100%;
  }
}

.dm__pre-video-title {
  text-align: var(--dm-video-align, center) !important;
  margin: var(--dm-video-margin, 8px 0) !important;
  font-style: var(--dm-video-style, normal) !important;
  color: var(--dm-video-color, #000) !important;
  font-size: var(--dm-video-size, 1.2em) !important;
  font-weight: var(--dm-video-weight, 700) !important;
}

.dm-player {
  position: relative;
  height: 0;
  overflow: hidden;
  width: var(--dm-player-width, 100%) !important;
  clear: left !important; // in some partner website still implement floating grid. this will clear the floating part

  .dailymotion-cpe iframe {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
  }

  &.dm--has-placeholder {
    overflow: visible;
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--dm-thumbnail);
    background-position: center;
    padding-bottom: 56.25%;
    width: 100%;

    .dailymotion-cpe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      // Remove the slidedown animation
      &:before {
        display: none;
      }
    }
  }

  &.dm--has-close-button, &.dm--has-close-pip {
    .dailymotion-cpe {
      overflow: visible;
    }
    .cpeClosePipBtn {
      display: none;
    }
  }

  &.dm--has-close-button {
    padding-top: 40px;
  }

  &.dm--has-close-pip {
    .dm__close-button {
      display: none;
    }

    .insider.pip .dm__close-button {
      display: block;
    }
  }

  &.dm--pip-closed.dm-playback-ready {
    .insider.pip {
      display: none;
    }
  }

  .insider {
    display: none;
  }

  &.dm-playback-ready {
    height: auto;

    .dailymotion-cpe {
      animation: scaling 1 1s;
      transform-origin: top;
    }

    &.dm--has-placeholder .dailymotion-cpe {
      animation: visibility 1 1s;
      transform-origin: unset;
    }

    .insider {
      display: block;
    }
  }

  &.dm--hidding-player, &.dm--hidding-player .insider iframe {
    animation: hidePlayer forwards 1s;
    transform-origin: top;
  }
  &.dm--hidding-player .dailymotion-cpe {
    animation: slideOutUp forwards 1s;
  }
  &.dm--player-hidden {
    height: 0;
    padding: 0;
    display: none;
  }

  // Cover the video that not playing yet when ad is playing
  .insider.dm-disabled:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
  }
  // adding padding to close pip image
  .insider div.cpeClosePipBtn img.cpeClosePipPicto {
    padding: 0px;
  }
}