@import "compass/css3";
@import "lib.directional";
@import "tools.mixins";


@font-face {
    font-family: "mace";
    src:url("./../../../assets/iconfont/fonts/mace.eot");
    src:url("./../../../assets/iconfont/fonts/mace.eot?#iefix") format("embedded-opentype"),
    url("./../../../assets/iconfont/fonts/mace.woff") format("woff"),
    url("./../../../assets/iconfont/fonts/mace.ttf") format("truetype"),
    url("./../../../assets/iconfont/fonts/mace.svg#mace") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.mace-video-playlist{
  @include display(flex);
  @include flex-direction(row);
  @include flex-wrap(wrap);
  margin-top:20px;
  margin-bottom:30px;
}
.mace-video-main {
    min-width: 66.666%;
    @include flex-grow(1);
    background: yellow;
    min-height:432px;
}
.mace-video-sidebar{
  @include display(flex);
  @include flex-direction(column);
  @include flex-grow(1);

  min-width: 280px;
  width: 33.333%;
  min-height: 372px;

  background: #1a1a1a;
  color: #fff;
}
.mace-video-list-wrapper{
  @include flex-grow(1);
  position:relative;
}

.mace-video-list {
  overflow-y: auto;
  width: 100%;
  margin: 0;
  padding: 0;

  position: absolute;
  top: 0;
  bottom: 0;

  counter-reset: video-playlist-counter;
}

.mace-video-list li{
  @include display(flex);
  border-top:1px solid #262626;
  list-style-type:none;
}

.mace-video-list li:before{
  float:$left;
  @include align-self(center);
  width: 30px;
  min-width: 30px;
  text-align: center;
  content: counter(video-playlist-counter);
  counter-increment: video-playlist-counter;
}
.mace-video-list li.mace-video-current{
  background: #262626;
}
.mace-video-list li.mace-video-current:before{
  content: "\e004";
  font-family: mace;
}
.mace-video-list img{
    @include align-self(center);
    height: 56px;
    width: auto;
    margin: side-values(5px 15px 5px 0);
}
.mace-video-title{
  margin-top: 5px;
  margin-#{$right}: 30px;

  font-size: 13px;
  line-height: 16px;
}

.mace-video-playlist {
  .mace-video-duration{
    margin-bottom:12px;
    opacity:0.4;
  }
}

.mace-video-controls {
    padding-#{$left}: 30px;
    padding-#{$right}: 15px;
    margin-bottom: 10px;

    a:before{
        margin-#{$right}: 15px;
        opacity:0.4;
        font-family:mace;
        font-size:18px;
        color:#fff;
    }

    .mace-selected:before,
    a:hover:before {
        opacity: 1;
    }
}



.mace-video-prev:before{
  content:"\e000";
}
.mace-video-next:before{
  content:"\e001";
}
.mace-video-loop:before{
  float:$right;
  content:"\e002";
}
.mace-video-shuffle:before{
  float:$right;
  content:"\e003";
}

.mace-video-sidebar .mace-video-playlist-title {
  margin: 20px 30px 6px;

  color: #fff;
}