/* Vector arrows preserve the fine shaft and filled head on every device. */
.arrow-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  line-height: 1;
  vertical-align: -.15em;
}

.arrow-glyph > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Rotate the same artwork so every direction shares the same shape. */
.arrow-glyph-right {
  transform: rotate(45deg);
}

.arrow-glyph-down {
  transform: rotate(135deg);
}