/* Monochrome interface arrows that never fall through to an emoji font. */
.ui-arrow {
  --ui-arrow-rotation: 0deg;
  position: relative;
  display: inline-grid;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  place-items: center;
  color: currentColor;
  line-height: 1;
  vertical-align: -.08em;
}

.ui-arrow::before {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 7l5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 7l5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(var(--ui-arrow-rotation));
  transform-origin: center;
}

.ui-arrow--back { --ui-arrow-rotation: 180deg; }
.ui-arrow--external { --ui-arrow-rotation: -45deg; }
.ui-arrow--down { --ui-arrow-rotation: 90deg; }

@media (forced-colors: active) {
  .ui-arrow::before { background: CanvasText; }
}