.dfao-ui-arrow {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  color: currentColor;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.13em;
}

.dfao-ui-arrow::before,
.dfao-ui-arrow::after {
  position: absolute;
  display: block;
  box-sizing: border-box;
  content: "";
}

.dfao-ui-arrow--forward::before,
.dfao-ui-arrow--back::before {
  top: calc(50% - 1px);
  width: 0.78em;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.dfao-ui-arrow--forward::before {
  left: 0.08em;
}

.dfao-ui-arrow--back::before {
  right: 0.08em;
}

.dfao-ui-arrow--forward::after,
.dfao-ui-arrow--back::after {
  top: 50%;
  width: 0.48em;
  height: 0.48em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.dfao-ui-arrow--forward::after {
  right: 0.08em;
  transform: translateY(-50%) rotate(45deg);
}

.dfao-ui-arrow--back::after {
  left: 0.08em;
  transform: translateY(-50%) rotate(-135deg);
}

.dfao-ui-arrow--external::before {
  top: 0.08em;
  right: 0.08em;
  width: 0.58em;
  height: 0.58em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 0 2px 0 0;
}

.dfao-ui-arrow--external::after {
  right: 0.08em;
  bottom: 0.11em;
  width: 0.88em;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

@media (forced-colors: active) {
  .dfao-ui-arrow::before,
  .dfao-ui-arrow::after {
    forced-color-adjust: auto;
  }
}