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

//
// Video Portal Example App
// --------------------------------------------------
// "Spotlight" container styles that celebrate a selection of videos


.SpotLight-container { 
  background-color: $ms-color-neutralDark;
}

.SpotLightList { 
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

.SpotLight-title {
  text-indent: 16px;
}

.SpotLight-item { 
  position: relative;
  display: inline-block;
  float: none;
  margin: 0;
}

.SpotLight-thumb {
  padding: 10px;
}

.SpotLight-thumbImg {
  max-width: 100%;
  min-width: 100%;
}

.SpotLight-text {
  position: absolute;
  right: 10px;
  bottom: 13px;
  left: 10px;
  overflow: hidden;
  color: #fff;
  background: rgba(0,0,0,.4);
  padding: 5px;
}

.SpotLight-videoTitle,
.SpotLight-videoLength {
  color: $ms-color-white;
  display: block;
}


@media (min-width: $ms-screen-lg-min) {
  .SpotLightList {
    overflow: hidden;
  }

  .SpotLight-container { 
    padding: 10px 0;
  }
}

@media (min-width: $ms-screen-xl-min) {
  .SpotLight-title {
    text-indent: 8px;
  }
}