@import "woople-theme/variables.css.less";
@import "woople-theme/colours.css.less";

.player-video() {
  overflow: visible;

  .player-video {
    display: block;
    height: 550px;
    overflow: hidden;

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

    .player-video-box {
      background: black;
      width: 100%;
      height: 100%;

      #theme_video_html5_api {
        margin: 0;
      }

      img {
        display: block;
      }
    }
  }
}

.player {
  .player-header {
    border-bottom: 1px solid #ddd;
    padding: @contentPadding * 0.5 @contentPadding;

    h3 {
      .content-title();
      margin-bottom:0;
    }
  }

  .player-body {
    padding: @contentPadding * 0.5 @contentPadding;

    .player-video();
  }

  .player-footer {
    border-bottom: 1px solid #ddd;
    padding: @contentPadding * 0.5 @contentPadding;
    padding-top: 0;

    #btn-favorite {
      .border-radius(0);
    }

    .likes {
      float: right;
    }

    .btn-group {
      display:inline-block;
    }

    .btn {
      line-height:16px;
    }

    button {
      opacity: 0.8;
    }
    button.active {
      background-color: @grayLight;
      color: @white;
      text-shadow: none;
    }

    #btn-favorite.active i {
      color: @red;
    }
  }
}

@media (max-width: 1024px) {
  .player {
    .player-body {
      //padding: @phoneMargin;

      .player-video {
        height: 410px;
      }
    }
  }
}

@media (max-width: 768px) {
  .player {
    .player-body {
      //padding: @phoneMargin;

      .player-video {
        height: 430px;
      }
    }
  }
}

@media (max-width: 480px) {
  .player {
    .player-header {
      padding: @phoneMargin;
    }

    .player-body {
      padding: @phoneMargin;

      .player-video {
        height: 210px;
      }
    }

    .player-footer {
      padding: @phoneMargin;
      padding-top: 0;
    }
  }
}

@media (max-width: 320px) {
  .player {
    .player-body {
      .player-video {
        height: 180px;
      }
    }
  }
}