.filter {
  display: inline-flex;
  margin: 0 40px;
  flex-direction: column;
}

@media (max-width: 810px) {
  .filter {
    display: flex;
    align-items: center;
    margin: 20px 0;
  }
}

.filter--icon {
  height: 72px;
  width: 72px;
  background-size: 100% 100%;
  cursor: pointer;
  filter: brightness(0.6);
  transition: filter ease-in-out 0.08s;
}

.machine-back.-active .filter:hover .filter--icon,
.machine-back.-active .filter.-midi-active .filter--icon {
  filter: unset;
}

.filter.-lowpass .filter--icon {
  background-image: url(../../assets/filter_lowpass.svg);
}

.filter.-highpass .filter--icon {
  background-image: url(../../assets/filter_highpass.svg);
}

.filter.-bandpass .filter--icon {
  background-image: url(../../assets/filter_bandpass.svg);
}

.machine-back.-active .filter:hover .filter--label,
.machine-back.-active .filter.-midi-active .filter--label {
  color: var(--color-text-active);
}

.filter--label {
  transition: color ease-in-out 0.08s;
  min-width: 77px;
  /*"highpass*/
}