.arrow {
  position: relative;
}
.arrow::before {
  --translate-x: 0;
  --translate-y: 0;
  --offset-arrow-reduction: 0.375;
  --offset-arrow-pos: 2ch;
  --offset-arrow-neg: calc(var(--offset-arrow-pos) * -1);
  --offset-arrow-pos-reduced: calc(var(--offset-arrow-pos) * var(--offset-arrow-reduction));
  --offset-arrow-neg-reduced: calc(var(--offset-arrow-neg) * var(--offset-arrow-reduction));
  position: absolute;
  transform: translate(var(--translate-x), var(--translate-y));
  transition: 0.175s transform;
}
.arrow.static::before {
  transform: none;
}
.arrow.up::before {
  content: "\2191";
}
.arrow.up:hover::before,
.arrow.up:focus::before {
  --translate-y: var(--offset-arrow-neg-reduced);
  margin-bottom: var(--offset-arrow-neg-reduced);
  padding-bottom: var(--offset-arrow-pos-reduced);
}
.arrow.up.left::before {
  content: "\2196";
}
.arrow.up.right::before {
  content: "\2197";
}
.arrow.down::before {
  content: "\2193";
}
.arrow.down:hover::before,
.arrow.down:focus::before {
  --translate-y: var(--offset-arrow-pos-reduced);
  margin-top: var(--offset-arrow-neg-reduced);
  padding-top: var(--offset-arrow-pos-reduced);
}
.arrow.down.left::before {
  content: "\2199";
}
.arrow.down.right::before {
  content: "\2198";
}
.arrow.left::before {
  content: "\2190";
}
.arrow.left:hover::before,
.arrow.left:focus::before {
  --translate-x: var(--offset-arrow-neg-reduced);
}
.arrow.right::before {
  content: "\2192";
}
.arrow.right:hover::before,
.arrow.right:focus::before {
  --translate-x: var(--offset-arrow-pos-reduced);
}
.arrow.after::before {
  right: var(--offset-arrow-neg);
  padding-left: var(--offset-arrow-pos);
}
.arrow.before::before {
  left: var(--offset-arrow-neg);
  padding-right: var(--offset-arrow-pos);
}
.arrow.up.left:hover::before, .arrow.up.left:focus::before, .arrow.up.right:hover::before, .arrow.up.right:focus::before, .arrow.down.left:hover::before, .arrow.down.left:focus::before, .arrow.down.right:hover::before, .arrow.down.right:focus::before {
  --offset-arrow-reduction: 0.25;
}