@import "client/common.scss";

.session-controls {
  margin-top: 15px;
  padding: 3px 5px 3px 10px;
  width: 93%;
  min-width: 200px;
  background-color: #242323;
  position: relative;
  font-size: 13px;
  text-align: center;
  @include border_box_sizing;
  height: 36px;
}

.recording-controls {
  margin-top: 15px;
  padding: 3px 5px 3px 10px;
  width: 93%;
  min-width: 200px;
  background-color: #242323;
  position: relative;
  font-size: 13px;
  text-align: center;
  @include border_box_sizing;
  height: 36px;
  display:inline-block;
  white-space:nowrap;

  &.metronome-mode {
    width:200px;
    margin-left:-100px;
    left:50%;
    .recording-position, .recording-current, .playback-mode-buttons {
      display:none;
    }
  }

  &.jamtrack-mode, &.mediafile-mode {
    .metronome-playback-options {
      display:none;
    }
  }

  .recording-status {
    font-size:15px;
  }

  .recording-status .recording-duration {
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    font-size:18px;
    position:absolute;
    //top:3px;
    right:4px;
  }

  .recording-slider {
    cursor:pointer;
  }


  &.has-mix {
    .recording-status {
      display:none;
    }
  }

  &:not(.has-mix) {

    border-width: 0; // override screen_common's .error

    .play-button {
      display:none;
    }
    .recording-current {
      display:none;
    }
    .recording-position {
        display:none;
    }
  }
}


.session-controls, .recording-controls {

  .tick-duration {
    display:none;
  }

  .play-buttons {
    display:inline-block;
    outline: 0;
    // the following 3 properties were to make safari on iOS not wrap text after the .play-button  float:left was preferred
    position:absolute;
    left:5px;
    top:7px;

    a {
      outline: 0;
    }
  }

  &.no-mount{
    .play-button {
      display:none;
    }
  }

  .session-status {
    font-size:18px;
    display:inline;
  }

  .recording-current {
    top:8px;
  }

  .session-duration {
    top:8px;
  }

  &.ended {

    .play-button {
      display:none;
    }
  }

  &.inprogress {

  }
}


.feed-entry {
  position:relative;
  display:block;
  white-space:nowrap;
  min-width:700px;
  border-bottom:solid 1px #666;
  max-height:74px;
  overflow:hidden;
  margin-top:20px;

  .select-box {
    position:absolute;
  }

  &:nth-child(1) {
    margin-top:0;
  }

  &[data-mode="minimal"] {
    .avatar-small {
      display:none;
    }
    .feed-type-title {
      display:none;
    }
    .recording-controls-holder {
      width: 65%;
      float:left;
    }
    .name-and-description {
      margin-left:0;
    }

    min-width:300px;
    border-bottom-width:0;
  }

  .session-controls, .recording-controls {
    display:inline-block;
    &.ended {
      background-color: #471f18;
    }

    &.inprogress {
      background-color: #4C742E;

      .session-status {
        font-size: 15px;
        color: #cccc00;
        margin:auto;
      }
    }
  }

  .recording-controls-holder {
    float:right;
    width:40%;
  }

  .name-and-description {
    float:left;
    width:30%;
    margin-left:20px;
  }
  .recording-controls {
    .recording-position {
      position: absolute;
      left: 0;
      padding: 0 18px 0 5px;
      @include border_box_sizing;
      width:100%;
      margin:0;
    }

    .play-button {
      float:none;
      position: absolute;
      left: 5px;
      z-index: 1;
    }

    .recording-playback {
      width:60%;
    }

    .recording-time {
      display:inline;
      vertical-align:top;
      time {
        vertical-align:top;
      }
    }
  }
  /**
  &.animate-down {
    -webkit-transition: max-height height 2s;
    transition: max-height height 2s;
    -moz-transition: max-height height 2s;
    -o-transition: max-height height 2s;
    -ms-transition: max-height height 2s;
  }

  &.animate-up {
    -webkit-transition: max-height height .4s;
    transition: max-height height .4s;
    -moz-transition: max-height height .4s;
    -o-transition: max-height height .4s;
    -ms-transition: max-height height .4s;
  }
  */


  .recording-controls, .session-controls {
    margin-top:0px;
    margin-bottom:5px;
    padding:8px 5px 8px 10px;
    width:98%;
    line-height:19px;

  }

  .recording-controls {
    padding:8px 5px 8px 5px !important;
  }

  .details {
    color:#ED3618;
  }

  .avatar-small {
    @include content_box_sizing;
    margin-top:0px;
    margin-left:0px;
  }

  .title {
    font-size:16px;
    color:#999;
    margin-bottom:3px;
  }

  .artist {
    font-size:12px;
    font-weight:bold;
    color:#ccc;
    margin-bottom:5px;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
  }

  .name {
    font-weight:bold;
    min-height:16px;
    font-size:14px;
    line-height:14px;
    height:16px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:normal;
  }

  .description {
    font-size:12px;
    white-space:normal;
    line-height:14px;
    overflow:hidden;
    text-overflow:ellipsis;
    height:60px;
  }

  .feed-details {
    vertical-align:middle;

    img {
      vertical-align:middle;
    }
  }

  a.edit-recording-dialog {
    font-size:12px;
    display:none;
  }

  .is_private {
    display:none;
    font-size:12px;
    font-style:italic;
    &.enabled {
      display:inline;
    }
  }

  .play-count {
    margin-right:10px;
  }

  .comment-count {
    margin-right:10px;
  }

  .like-count {
    margin-right:10px;
  }

  .musicians {
    margin-top:10px;
    font-size:11px;
  }

  .musicians td {
    border-right:none;
    border-top:none;
    padding:3px;
    vertical-align:middle;
  }

  .musicians a {
    color:#fff;
    text-decoration:none;
  }

  .avatar-tiny {
    float:left;
    padding:1px;
    width:24px;
    height:24px;
    background-color:#ed3618;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
  }

  .avatar-tiny img {
    width: 24px;
    height: 24px;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
  }
}