
/*
style - widget_player
 */

.list-tracks-con {
  &+*{
    margin-top: 10px;
  }
  > .list-track:last-child {
    margin-bottom: 0;
  }
  a{
    text-decoration: none;
  }

  .list-track {
    position: relative;
    display: flex;
    align-content: center;
    overflow: hidden;
    margin-bottom: 10px;
    $transition-property: background;
    $transition-duration: 0.2s;
    $transition-timing: ease-in;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
    $thumb_margin: 15px;
    $size_thumb: 60px;
    $size_thumb_with_margin: $size_thumb + $thumb_margin;
    .track-thumb {
      width: $size_thumb;
      height: $size_thumb;
      display: inline-block;
      vertical-align: middle;
      border: 2px solid rgba(0,0,0,.5);
      background-size: cover;
      background-repeat: no-repeat;
    }
    span{
      text-decoration: none;
    }
    .track-meta {
      vertical-align: middle;
      margin-left: $thumb_margin;
      width: calc(100% - #{$size_thumb_with_margin});
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-flex;
      justify-content: center;
      flex-direction: column;
      .track-title {

        font-size: 20px;
        line-height: 1;
        margin-top: -3px;
        > a {
          color: inherit;
          font-size: 16px;
          font-weight: 600;
          white-space: nowrap;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .track-author {
        color: #777;
        > a {
          color: inherit;
          font-size: 12px;
          white-space: nowrap;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .track-number {
        position: absolute;
        bottom: 0;
        left: 0;
        color: #FFFFFF;
        z-index: 1;
        $transition-property: left,bottom;
        $transition-duration: 0.2s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
        .the-number {
          position: absolute;
          bottom: 0;
          left: 5px;
          font-size: 12px;
          font-weight: 700;
          color: #FFFFFF;
          z-index: 1;
          transform: rotate(10deg);
        }
      }
      .track-number:after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 30px 0 0 30px;
        border-color: transparent transparent transparent rgba(17, 17, 17, 0.5);
      }
    }
  }
  .list-track:hover {
    background-color: #F0EEEE;
    .track-meta {
      .track-number {
        bottom: -15px;
        left: -15px;
      }
    }
  }

  .likes-show{

    position: absolute;
    right: 10px;
    top:50%;
    transform: translate3d(0,-50%,0);

    color: #555555;

    >*{
      display: inline-block;
      vertical-align: middle;

      &+*{
        margin-left: 5px;
      }
    }
  }
}



