.tracks {
  @media ($mobile) {
    width: 100%;
    flex: 1 1;
    overflow: auto;
    min-height: 1px;
  }
  @media ($desktop) {
    margin-left: -$trackTitleWidth;
  }
}

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

  @media ($mobile) {
    flex-wrap: wrap;
  }
}

@media ($mobile) {
  .track._hidden {
    display: none;
  }
}

.track-title {
  color: $white;
  width: $trackTitleWidth;
  padding-right: 10px;
  text-align: right;

  @media ($mobile) {
    display: none;
  }
}

.track-sequence {
  @media ($mobile) {
    display: flex;
    flex-wrap: wrap;
  }

  @media ($desktop) {
    padding: 5px 0;
  }
}

.step {
  cursor: pointer;
  padding: 20px;
  margin: 2px;
  background-color: $step;

  border: 1px solid transparent;
  border-bottom: 2px solid $stepShadow;
  border-radius: $radiusCurved;
  box-shadow: 0 2px 3px $stepShadow;

  &:hover {
    transform: translateY(-1px) scaleY(1.025);
  }

  &:nth-of-type(8n),
  &:nth-of-type(8n - 1),
  &:nth-of-type(8n - 2),
  &:nth-of-type(8n - 3) {
    background-color: $stepAlt;
  }

  @media ($desktop) {
    &:first-of-type {
      margin-left: initial;
    }
  }

  @media ($mobile) {
    flex: 1 0 calc(25% - 4px);
    min-height: 60px;
  }
}

.step:active,
.step._active {
  background-color: $primaryActive;
  border-bottom: 1px solid $stepShadow;

  @media ($desktop) {
    transform: translateY(2px);
  }
}

.step._flashing {
  background-color: $primaryHighlight;
  box-shadow: 0 0 15px $primaryHighlight;
  transition: box-shadow .2s cubic-bezier(0, 0, 0.64, 1.52);
}

.track-selector {
  margin-bottom: 20px;

  @media ($desktop) {
    display: none;
  }
}

.selector-button {
  cursor: pointer;
  padding: 5px 15px;
  border: none;
  background-color: transparent;
  color: $white;
}

.selector-button._active {
  border-bottom: 3px solid $primaryActive;
}
