/* AVOLCA interface arrows are drawn geometry, never text glyphs.
   This prevents iOS/Android from substituting coloured emoji arrows. */
.av-arrow{
  --av-arrow-size:1em;
  position:relative;
  display:inline-block!important;
  width:var(--av-arrow-size)!important;
  height:var(--av-arrow-size)!important;
  min-width:var(--av-arrow-size);
  flex:0 0 var(--av-arrow-size);
  font-size:0!important;
  line-height:0!important;
  color:currentColor;
  vertical-align:-.08em;
  transform:rotate(0deg);
  transform-origin:50% 50%;
}
.av-arrow::before{
  content:"";
  position:absolute;
  left:8%;
  top:48%;
  width:82%;
  height:1px;
  background:currentColor;
}
.av-arrow::after{
  content:"";
  position:absolute;
  right:8%;
  top:23%;
  width:50%;
  height:50%;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}
.av-arrow--ne{transform:rotate(-45deg)}
.av-arrow--se{transform:rotate(45deg)}
.av-arrow--s{transform:rotate(90deg)}
.av-arrow--n{transform:rotate(-90deg)}
.av-arrow--w{transform:rotate(180deg)}
.av-arrow--e{transform:rotate(0deg)}