/* Platform-neutral interface arrows. Drawn with CSS so mobile systems never
   substitute a coloured emoji glyph. */
.ui-arrow{
  --ui-arrow-rotation:0deg;
  display:inline-block;
  position:relative;
  width:1em;
  height:1em;
  flex:0 0 auto;
  vertical-align:-.14em;
  background:linear-gradient(currentColor,currentColor) .1em 50%/.72em max(1px,.08em) no-repeat;
  transform:rotate(var(--ui-arrow-rotation));
}
.ui-arrow::after{
  content:"";
  position:absolute;
  right:.02em;
  top:.2em;
  width:.5em;
  height:.6em;
  background:currentColor;
  clip-path:polygon(0 0,100% 50%,0 100%,27% 50%);
}
.ui-arrow-ne{--ui-arrow-rotation:-45deg}
.ui-arrow-e{--ui-arrow-rotation:0deg}
.ui-arrow-w{--ui-arrow-rotation:180deg}
.ui-arrow-n{--ui-arrow-rotation:-90deg}
.ui-arrow-s{--ui-arrow-rotation:90deg}
.ui-arrow-ew{--ui-arrow-rotation:0deg;background-position:center;background-size:.72em max(1px,.08em)}
.ui-arrow-ew::before{
  content:"";
  position:absolute;
  left:.02em;
  top:.2em;
  width:.5em;
  height:.6em;
  background:currentColor;
  clip-path:polygon(100% 0,0 50%,100% 100%,73% 50%);
}
.ui-arrow-ew::after{right:.02em}
@media(forced-colors:active){
  .ui-arrow,.ui-arrow::before,.ui-arrow::after{forced-color-adjust:auto}
}