.holder {
  position: relative;
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 0;
  font-size: 15px;
  font-weight: bold;

  cursor: pointer;
  opacity: .25;
  border: 1px solid #FFFFFF;
  border-radius: 32px;
  transform: scale(1);
  transition: opacity .3s, width .3s, margin-top .3s, transform .3s;
}

.holder.disabled {
  opacity: 0;
  transform: scale(0);
}

.holder span {
  opacity: 1;
  transition: opacity .1s;
}

.holder editor-pin {
  position: absolute;
  right: 6px;
  top: 50%;
  margin-top: -7px;
  opacity: 0;
  transition: opacity .3s;
}

.holder:hover {
  opacity: 1;
}

/*** active state ***/

.holder.active {
  width: 100%;
}

.holder.active span {
  opacity: 0;
}

.holder.active editor-pin {
  opacity: 1;
}

/*** reset state ***/

.holder.reset {
  opacity: 0;
  margin-top: -34px;
  transition: none;
}

.holder.reset span {
  transition: none;
}

.holder.reset editor-pin {
  transition: none;
}

/*** switch style ***/

.holder.switch {
  border-color: #FFC400;
  background: #212121;
}

.holder.switch span {
  color: #FFC400;
}

/*** expr style ***/

.holder.expr {
  border: none;
  margin-top: 12px;
  width: 14px;
  height: 14px;

  font-size: 12px;
  margin-bottom: 8px;
}

.holder.expr editor-pin {
  opacity: 1;
  right: auto;
  left: 0px;
}

/*** output & control style ***/

.holder.control {
  border-color: #FFC400;
  color: #FFC400;
}

.holder.output editor-pin,
.holder.control editor-pin {
  right: auto;
  left: 6px;
}
