.bit-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 5px;
  grid-row-gap: 20px;
  max-width: var(--content-width);
  margin: 0 auto;
}

.bit-control--captions {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  text-align: right;
  text-decoration: none;
}

.bit-control--caption {
  padding-right: 10px;
  height: 42px;
  line-height: 42px;
}

.bit-control--caption:last-child {
  border-bottom: 10px double transparent;
  height: 28px;
  line-height: 28px;
}

.machine-back.-active .bit-control--caption {
  color: var(--color-text-active);
}

.bit-control--buttons {
  display: flex;
  flex-direction: column;
}

@media (min-width: 741px) {
  .bit-control--buttons {
    align-items: center;
  }
}

.bit-control--button {
  width: 50px;
  height: 30px;
  margin: 4px 0;
  cursor: pointer;
  color: transparent;
  background: radial-gradient(
    closest-side,
    var(--inner-button-color),
    var(--outer-button-color) 70%
  );
  border-radius: 4px;
  border-color: var(--outer-button-color);
  border-width: 1px;
  border-top-style: ridge;
  filter: brightness(0.59) saturate(0.75);
}

.machine-back.-active .bit-control.-active .bit-control--button.-active,
.machine-back.-active .bit-control.-active .bit-control--button:active,
.machine-back.-active .bit-control.-active .bit-control--button:hover {
  filter: brightness(1.2) saturate(1);
}
.machine-back.-active .bit-control.-active .bit-control--button.-midi-active {
  filter: brightness(1.5) saturate(1);
}

.bit-control--button.-reset {
  --inner-button-color: #cecece;
  --outer-button-color: #fffcfc;
  box-shadow: inset 0 0 30px #a0a0a7, 0px 1px 0px 0px var(--outer-button-color);
}

.bit-control--button.-invert {
  --inner-button-color: #64b5ef;
  --outer-button-color: #3b9ce0;
  box-shadow: inset 0 0 3px #4b5086, 0px 1px 0px 0px var(--outer-button-color);
}

.bit-control--button.-mute {
  --inner-button-color: rgb(255, 32, 32);
  --outer-button-color: red;
  box-shadow: inset 0 0 30px #ad0409, 0px 1px 0px 0px var(--outer-button-color);
}

.bit-control--labels {
  height: 18px;
  padding: 5px 0;
  border-bottom: 10px double currentColor;
  text-align: center;
  cursor: pointer;
}

.bit-control--labels.-midi-active {
  filter: invert(0.25);
}

.machine-back.-active .bit-control.-active .bit-control--labels {
  color: var(--color-text-active);
}

.bit-control--index {
  cursor: pointer;
}
.machine-back.-active .bit-control--index {
  color: var(--color-text-muted);
  text-shadow: none;
}
.machine-back.-active .bit-control.-active .bit-control--index {
  color: aliceblue;
  text-shadow: 0 0 3px aliceblue;
}

@media (max-width: 880px) {
  .bit-controls {
    grid-column-gap: 5px;
  }
}

@media (max-width: 740px) {
  .bit-controls {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 15px;
  }

  .bit-control--captions {
    display: none;
  }

  .bit-control--button {
    width: auto;
    height: auto;
    color: black;
    padding: 10px 15px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    text-decoration: none;
  }
}

@media (max-width: 440px) {
  .bit-controls {
    grid-column-gap: 5px;
  }

  .bit-control--button {
    padding: 5px 0px;
  }
}