@import 'styles/base';

//=========================================================
//  TrackCardComponent
//---------------------------------------------------------

.track-card {
  overflow: hidden;
}

.track-card__username {
  display: block;
  color: #7d7e7f;
  font-size: rem(13px);
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.track-card__title {
  font-size: rem(15px);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.track-card__actions {
  display: flex;
  height: 40px;
  color: #5d5e5f;
  fill: #4d4e4f;
  font-size: rem(13px);
  line-height: 40px;

  .cell {
    display: flex;
    align-items: center;
    transform: translate(0, 0);

    icon, icon-button {
      display: flex;
    }

    > a {
      display: flex;

      &:visited {
        fill: #4d4e4f;
      }
    }

    > span {
      margin-left: 6px;
    }

    .icon--headset {
      margin-top: 2px;
    }
  }

  .btn--icon {
    &:active {
      background: rgba(0, 0, 0, 0.2);
    }

    &:hover {
      fill: #78797a;
    }
  }
}


//=====================================
//  Layout: compact
//-------------------------------------
.track-card--compact {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid #18191a;
  padding-top: 20px;

  .track-card__image {
    position: relative; // IE11 needs this
    height: auto;
    background: #171819;

    &:before {
      content: '';
      float: left;
      padding-top: 100%;
    }

    img {
      position: absolute; // IE11 needs this
    }
  }

  .track-card__main {
    position: relative;
    background: #1d1e1f;

    &:before {
      content: '';
      float: left;
      padding-top: 61.8%;
    }
  }

  .track-card__timeline {
    border-bottom: 1px solid rgba(0,0,0,.1);
    height: 9px;
    background: #171819;
  }

  .track-card__username {
    margin: 6px 15px 0;
    font-size: rem(13px);
    line-height: (20px / 13px);
  }

  .track-card__title {
    margin: 0 15px;
    color: #bdbebf;
    font-size: rem(14px);
    line-height: (20px / 14px);

    .has-line-clamp & {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      white-space: normal;
      word-wrap: break-word;
    }
  }

  .track-card__actions {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;

    .cell:last-of-type {
      margin-left: auto;
      margin-right: 15px;
    }
  }
}


//=====================================
//  Layout: full
//-------------------------------------
.track-card--full {
  display: flex;
  margin-bottom: 20px;
  height: 220px;
  background: #1d1e1f;

  .track-card__image {
    align-self: flex-start;
    width: 220px;
  }

  .track-card__main {
    flex: 1;
    border-left: 4px solid rgba(0, 0, 0, .1);
    padding: 14px 20px 0 16px;
    overflow: hidden; // required for .track-card__title ellipsis
  }

  .track-card__username {
    line-height: (18px / 13px);
  }

  .track-card__title {
    margin-bottom: 22px;
    color: #bdbebf;
    line-height: (19px / 15px);
  }

  .track-card__actions {
    .cell {
      width: 120px;

      &:first-of-type {
        width: 140px;
      }
    }
  }
}
