.bottom-bar .mixer {
  height: 100%;
  padding: 10px;
  align-items: flex-start;
  overflow: auto;

  .track {
    width: 80px;
    display: inline-block;
    overflow: visible;
    background-image: linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09));
    counter-increment: track-mixer;

    .mid-divider { margin: 0 8px; }

    .name {
      padding: 2px 0 0;
      font-size: 12px;
      min-height: 25px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      display: flex;
      font-weight: bold;
      
      &::before {
        content: counter(track-mixer);
        padding: 0 4px;
        font-size: 14px;
        line-height: 0;
        font-weight: bolder;
      }

      .marquee {
        text-transform: none;
      }
    }

    .content {
      padding: 0 10px;
    }

    .level {
      height: 150px;
      display: flex;
      justify-content: center;
      margin: 10px 0;
      position: relative;

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

      .volume-slider {
        z-index: 1;
        margin-left: -14px;
        margin-right: 0;
      }

      .volume-mark {
        opacity: 0.5;
        margin-left: -4px;
        font-size: 0.7rem;
        letter-spacing: -1px;
        transform: translate(-100%, 50%);

        &[data-index='2'] {
          margin-left: -2px;
        }
      }

      input[type=range] {
        -webkit-appearance: slider-vertical;
      }
    }

    .mute {
      position: absolute;
      top: -28px;
      left: -2px;
    }

    .left, .right {
      height: 100%;
      width: 4px;
      position: relative;
      -webkit-tap-highlight-color: transparent;

      div {
        z-index: 1;
        position: absolute;
        border-radius: 12px;
        bottom: 0;
        width: inherit;
        transition: 100ms ease-in-out;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: .38;
        border-radius: 12px;
        white-space: nowrap;
        background-color: var(--primary-color);
      }
    }

    .left {
      margin: 0 1px 0 12px;

      span {
        left: 4px;
        top: -22px;
        transform: translateX(-50%);
        position: absolute;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: -1px;
        white-space: nowrap;
      }
    }

    .plugins {
      button {
        padding: 0 5px;
        display: flex;
        border-radius: 0;

        .marquee {
          text-transform: none;
          font-weight: bold;
          letter-spacing: -0.3px;
        }
      }
    }
  }
}
