.tracks {
  flex: 1;
  display: flex;
  height: 0;
  flex-direction: column;
  overflow: hidden;
  background: inherit;

  .wrapper {
    overflow: auto;
    display: flex;
    flex: 1;
    align-items: flex-start;
  }

  .scale-slider {
    background: inherit;
    position: absolute;
    width: 200px;
    top: 4px;
    z-index: 2;
    padding: 0 20px;
  }

  ol {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 200px;
    min-height: 100%;
    z-index: 2;

    li {
      position: relative;
      counter-increment: track-li;
      padding: 8px 16px;
      transition: background-color .15s;

      .muicc-colorpicker-button {
        width: 6px;
        left: 0;
        top: 0;
        bottom: 0;
        height: unset;
        min-width: unset;
        margin: 0;
        border-radius: 0;
        position: absolute;
        box-shadow: none;

        span { transition: inherit; }

        div {
          min-width: unset;
          height: 100%;
          width: 100%;
          position: absolute;
          border-radius: 0;
          transition: inherit;
        }
      }

      .MuiSlider-valueLabel { pointer-events: none; }
      .volume-mark { display: none; }

      .title {
        display: flex;
        align-items: center;

        .instrument { padding: 0; }

        .name {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          outline: none;
        }

        .solo {
          padding: 0;
          line-height: 1.4;
          min-width: 24px;
          margin-right: 4px;

          &::before {
            content: counter(track-li);
          }
        }
      }

      h4 {
        margin: 0;
      }
    }
  }

  .play-ruler {
    position: relative;
    left: 200px;
    top: 0;
  }

  .playlist {
    flex: 1;
    min-height: 100%;
    width: 0;
    overflow: hidden;
    position: relative;

    & > div {
      min-width: 100%;
      padding-bottom: 36.5px;
    }

    .grid {
      position: absolute;
      width: inherit;
      min-width: 100%;
    }

    .content {
      position: relative;

      .notes div {
        pointer-events: none;
        position: absolute;
      }
    }

    .audio-clips {
      position: absolute;
      height: inherit;
      & > div {
        height: inherit;
        width: fit-content;
        image-rendering: pixelated;
        position: absolute;
        transform-origin: left;
        border-radius: 3px;
        overflow: hidden;

        & > div {
          pointer-events: none;
          height: inherit;
        }

        .sample-name {
          font-size: 8px;
          letter-spacing: -1px;
          position: absolute;
          top: 0;
          left: 0;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
          pointer-events: none;
        }
      }

      .loading-sample {
        background-color: unset;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
