@keyframes softshake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0% {
    transform: translate(2px, 0px);
  }
  10% {
    transform: translate(0px, 0px);
  }
  30% {
    transform: translate(-2px, 0px);
  }
  40% {
    transform: translate(1px, 0px);
  }
  50% {
    transform: translate(-1px, 0px);
  }
  70% {
    transform: translate(2px, 0px);
  }
  80% {
    transform: translate(-1px, 0px);
  }
  90% {
    transform: translate(2px, 0px);
  }
  100% {
    transform: translate(1px, 0px);
  }
}

.shake {
  animation-name: shake;
  animation-duration: 0.5s;
  transform-origin: 50% 50%;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

.fill-to-bottom {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  transition-property: color;
  transition-duration: 0.3s;
}
.fill-to-bottom:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.fill-to-bottom:hover,
.fill-to-bottom:focus,
.fill-to-bottom:active {
  color: var(--color-background-white);
}
.fill-to-bottom:hover:before,
.fill-to-bottom:focus:before,
.fill-to-bottom:active:before {
  transform: scaleY(1);
}

.fill-to-top {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  transition-property: color;
  transition-duration: 0.3s;
}

.fill-to-top:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.fill-to-top:hover,
.fill-to-top:focus,
.fill-to-top:active {
  color: var(--color-background-white);
}
.fill-to-top:hover:before,
.fill-to-top:focus:before,
.fill-to-top:active:before {
  transform: scaleY(1);
}
