@import 'colors';
@import 'fonts';
@import 'mixins';

.live-track {
  @include sheet;
  @include shadow-light;
  margin-bottom: 24px;
  cursor: pointer;
  display: block;

  &:hover {
    @include shadow-medium;
  }

  &:focus {
    text-decoration: none;
    outline: none;
  }

  .live-track-header {
    position: relative;
    display: block;
    margin: 0;
    padding: 24px 12px 16px 16px;
    @include gradient-directional($whiteSmoke, $white, -30deg);
    border-bottom: $border;

    i {
      float: right;
      color: $lightGrey;
      font-size: 42px;
      transition: bezier(color);
    }

    &:hover {
      i {
        color: $mediumGrey;
        // @include pulse(launch-track, $lightGrey, $orange);
      }
    }

    h3 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: $thin;
      font-size: 24px;
      font-weight: bold;
      margin: 0;
    }

    .creator {
      color: $grey;
    }

    .live-players {
      position: absolute;
      right: 16px;
      top: -16px;
      width: 32px;
      line-height: 32px;
      border-radius: 16px;
      background-color: $orange;
      color: white;
      text-align: center;
      font-family: $mono;
      font-weight: bold;
      font-size: 18px;
      /* @include shadow-light; */
    }

  }

  .live-track-body {
    padding: 0;
    position: relative;

    i {
      opacity: 0;
      line-height: 36px;
      margin-right: 8px;
      transition: bezier(opacity);
      position: absolute;
      right: 0;
    }

    &:hover {
      i {
        opacity: 0.5;
      }
    }

    .list-rankings {
      margin-bottom: 0;
      overflow-y: hidden;
      height: 147px;
    }

    .live-track-meta {
      border-top: $border;
      background-color: $whiteSmoke;
      text-align: center;
      font-family: $mono;
      line-height: 36px;
      color: $grey;
    }
  }

  .live-track-actions {
    border-top: $border;

    .btn-flat {
      display: block;
      line-height: 42px;
    }
  }

}
