.arrow {
  --color: #fff;
  --duration: .3s;
  --ripple-duration: .4s;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  display: block;
  outline: none;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-appearence: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: rotate(var(--rotate));
          transform: rotate(var(--rotate));
}
.arrow.top {
  --rotate: 90deg;
  --direction: -1;
}
.arrow.right {
  --rotate: 180deg;
  --direction: -1;
}
.arrow.bottom {
  --rotate: 270deg;
  --direction: -1;
}
.arrow:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.25);
          transform: scale(0.25);
  opacity: 0;
  border-radius: 50%;
  background: var(--color);
}
.arrow div,
.arrow div:before,
.arrow div:after {
  width: var(--w, 24px);
  height: 2px;
  border-radius: 1px;
  background: var(--color);
  position: var(--p, relative);
}
.arrow div {
  margin: 15px 4px;
}
.arrow div:before, .arrow div:after {
  content: '';
  --w: 13px;
  --p: absolute;
  --r: 135deg;
  --m: 1;
  -webkit-transform-origin: 1px 1px;
          transform-origin: 1px 1px;
  top: var(--t, -8px);
  left: 8px;
  -webkit-transform: rotate(calc(var(--r) * var(--m)));
          transform: rotate(calc(var(--r) * var(--m)));
}
.arrow div:after {
  --t: 8px;
  --m: -1;
}
.arrow.animation:before {
  -webkit-animation: ripple var(--ripple-duration);
          animation: ripple var(--ripple-duration);
}
.arrow.animation div {
  --c: calc(45deg * var(--direction, 1));
  --c-to: 0deg;
  -webkit-animation: rotate var(--duration) ease-in forwards;
          animation: rotate var(--duration) ease-in forwards;
}
.arrow.animation div:before, .arrow.animation div:after {
  --x-from: 3px;
  --x-to: 0;
  --y-from: calc(-3px * var(--m));
  --y-to: 0;
  --r-from: calc(90deg * var(--m));
  --r-to: calc(135deg * var(--m));
  -webkit-animation: cross var(--duration) ease-in forwards;
          animation: cross var(--duration) ease-in forwards;
}
.arrow.animation.active div {
  --c: 0deg;
  --c-to: calc(-45deg * var(--direction, 1));
}
.arrow.animation.active div:before, .arrow.animation.active div:after {
  --x-from: 0;
  --x-to: 3px;
  --y-from: 0;
  --y-to: calc(-3px * var(--m));
  --r-from: calc(135deg * var(--m));
  --r-to: calc(90deg * var(--m));
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(var(--c));
            transform: rotate(var(--c));
  }
  to {
    -webkit-transform: rotate(var(--c-to));
            transform: rotate(var(--c-to));
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(var(--c));
            transform: rotate(var(--c));
  }
  to {
    -webkit-transform: rotate(var(--c-to));
            transform: rotate(var(--c-to));
  }
}
@-webkit-keyframes cross {
  from {
    -webkit-transform: translate(var(--x-from), var(--y-from)) rotate(var(--r-from));
            transform: translate(var(--x-from), var(--y-from)) rotate(var(--r-from));
  }
  to {
    -webkit-transform: translate(var(--x-to), var(--y-to)) rotate(var(--r-to));
            transform: translate(var(--x-to), var(--y-to)) rotate(var(--r-to));
  }
}
@keyframes cross {
  from {
    -webkit-transform: translate(var(--x-from), var(--y-from)) rotate(var(--r-from));
            transform: translate(var(--x-from), var(--y-from)) rotate(var(--r-from));
  }
  to {
    -webkit-transform: translate(var(--x-to), var(--y-to)) rotate(var(--r-to));
            transform: translate(var(--x-to), var(--y-to)) rotate(var(--r-to));
  }
}
@-webkit-keyframes ripple {
  25% {
    opacity: .08;
  }
  100% {
    -webkit-transform: scale(1.6);
            transform: scale(1.6);
  }
}
@keyframes ripple {
  25% {
    opacity: .08;
  }
  100% {
    -webkit-transform: scale(1.6);
            transform: scale(1.6);
  }
}