.content-lock-multi-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0 none;
}

.content-lock-multi-toggle svg {
  width: 48px;
  height: 48px;
}

.content-lock-multi-toggle[data-disabled="1"] {
  opacity: 0.7;
  cursor: not-allowed;
}

.content-lock-multi-toggle.lock-state--loading {
  opacity: 0.5;
  cursor: wait;
}

.content-lock-multi-toggle .white-bg {
  fill: #fff;
}

.content-lock-multi-toggle .lock-hook {
  transform-origin: 11px 16px;
  fill: none;
  stroke: #000;
  stroke-width: 4;
  stroke-miterlimit: 10;
  transform: scaleX(1) translateY(0);
}
.content-lock-multi-toggle .lock-tumblr {
  transform-origin: 20px 27px;
  transform: rotate(0deg);
}

.content-lock-multi-toggle.lock-state--closed .lock-hook {
  transform: scaleX(1) translateY(0);
}

.content-lock-multi-toggle.lock-state--opening .lock-hook {
  animation: content-lock-multi-toggle--lock-opening 2s linear 1;
  animation-fill-mode: forwards;
}
.content-lock-multi-toggle.lock-state--opening .lock-tumblr {
  animation: content-lock-multi-toggle--lock-tumblr-opening 2s linear 1;
  animation-fill-mode: forwards;
}

.content-lock-multi-toggle.lock-state--open .lock-hook {
  transform: scaleX(-0.33) translateY(0);
}

.content-lock-multi-toggle.lock-state--closing .lock-hook {
  animation: content-lock-multi-toggle--lock-opening 2s linear 1;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

@keyframes content-lock-multi-toggle--lock-opening {
  0%   {
    transform: scaleX(1) translateY(0);
  }
  20%   {
    transform: scaleX(1) translateY(0);
  }
  33%  {
    transform: scaleX(1) translateY(-3px);
  }
  75%  {
    transform: scaleX(-0.33) translateY(-3px);
  }
  100% {
    transform: scaleX(-0.33) translateY(0);
  }
}

@keyframes content-lock-multi-toggle--lock-tumblr-opening {
  0%   {
    transform: rotate(0deg);
  }
  10%  {
    transform: rotate(-90deg);
  }
  20%  {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}