// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Video Portal Example App
// --------------------------------------------------
// Video Item tile styles


.VideoList-item.ms-Grid-col { 
  margin-bottom: 16px; 
  float: none;
  display: inline-block;
  vertical-align: top;
  padding-left: 8px;
  padding-right: 12px;
}

.VideoList-thumbLink { 
  display: block; 
  position: relative; 
  width: 100%;
  padding-bottom: 56.25%;
}

.VideoList-thumbImg {
  max-width: 100%;
  min-width: 100%;
  position: absolute;
}

.VideoList-thumbCaption {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 3px;
  color: $ms-color-white;
  font-size: $ms-font-size-s;
  background-color: rgba(0,0,0,.4);
}

.VideoList-text {
  padding-top: 5px;
  margin: 0;
}

.VideoList-title,
.VideoList-channel,
.VideoList-viewCount {
  display: block;
}

.VideoList-title { 
  display: block; 
  top: 0;
  left: 10px;
  bottom: 50%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.VideoList-channel { 
  bottom: 1.2em; 
}

.VideoList-viewCount { 
  bottom: 0; 
}

@media (min-width: $ms-screen-md-min) {
  .VideoList-item { 
    margin-right: -4px; // Need to offset margins from inline-block elements
  }
}