/**
* Apart from their function and position, cable-connectors and output-cables
* are basically the same. Because of this, output cables are just a wrapper around
* cable-connectors!
* See: output-cable.css, cable-connector-stub.css
**/
.cable-connector {
  position: absolute;
  left: 100px;
  top: -15px;
  --connector-width: 45px;
  width: var(--connector-width);
  z-index: 0;
}

.cable-connector.microphone {
  margin-left: calc(1 * var(--connector-width) + 1 * 25px);
}

.cable-connector--part {
  background: linear-gradient(
    90deg,
    #705c53,
    #fff8ed,
    #7d746b,
    #a28e75,
    #766450
  );
  border-radius: 25% 25% 0 0;
  margin: 0 auto;
  border-bottom: 1px solid #705c5382;
  box-shadow: 0px 1px 0px 0px #705c5382;
}

.cable-connector--part.-top {
  width: 31px;
  height: 3px;
}

.cable-connector--part.-center {
  width: 33px;
  height: 3px;
}

.cable-connector--part.-bottom {
  width: 35px;
  height: 2px;
  border-bottom: none;
  box-shadow: none;
}

.cable-connector--label {
  margin-top: 18px;
  position: absolute;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

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

.cable-connector--jack {
  background-image: url(../../assets/jack-connector-cable.svg);
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 275px;
  background-size: 54% 100%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: -50px;
  -webkit-mask-image: linear-gradient(to top, black 30%, transparent 80%);
  mask-image: linear-gradient(to top, black 30%, transparent 80%);
  transition: opacity 0.21s ease-in-out 0.25s,
    background-position-y 0.5s ease-in-out 0.46s;
  z-index: -1;
  opacity: 0; /* only the active one is shown */
}

.output-cable.-phono-red .cable-connector--jack {
  background-image: url(../../assets/jack-connector-cable-red.svg);
}

.cable-connector.-active .cable-connector--jack {
  background-position-y: 50px;
  opacity: 1;
}

.cable-connector.-plugging-out .cable-connector--jack {
  transition: opacity 0.21s ease-in-out 1s,
    background-position-y 0.5s ease-in-out 0.5s;
}