@import "client/common";

.jam-track-preview {

  position:relative;
  display:inline-block;
  line-height:24px;
  vertical-align: middle;
  @include border_box_sizing;
  color:$ColorTextTypical;
  font-size:14px;

  .actions {
    display:inline;
    vertical-align: middle;
  }

  img.instrument-icon {
    display:inline;
    vertical-align: middle;
    margin-left:10px;
  }

  .instrument-part {
    display:inline-block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align: middle;
    margin-left:10px;
  }

  .instrument-name {
    display:inline;
    vertical-align: middle;
    margin-left:10px;
  }

  .part {
    display:inline;
    vertical-align: middle;
    margin-left:4px;
  }
  .play-button, .stop-button {
    vertical-align:middle;
    height:24px;
    line-height:24px;
    width:24px;
    background-repeat:no-repeat;
    background-position:center;
  }

  .play-button {
    &.gray {
      background-image: url('/assets/content/icon-play-24-gray.png');
    }
    &.black {
      background-image: url('/assets/content/icon-play-24-black.png');
    }
  }

  .stop-button {
    &.gray {
      background-image: url('/assets/content/icon-pause-24-gray.png');
    }
    &.black {
      background-image: url('/assets/content/icon-pause-24-black.png');
    }
  }

  .spinner-small {
    vertical-align: middle;
    top: -4px;
    left:160px;
    position:absolute;
    &.hidden {
      display:none;
    }
  }

  .loading-text {
    position:absolute;
    top:25px;
    left:0;
    padding:0 7px;
    font-style:italic;
    z-index:1;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    border:0 solid black;
    background-color:black;
  }

  .adds-line-break {
    display:block;
    margin-left:66px;
    vertical-align: top;
  }
}