.ui-arrow {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("assets/icons/arrow-line.svg") center / contain no-repeat;
  mask: url("assets/icons/arrow-line.svg") center / contain no-repeat;
  vertical-align: -0.12em;
}

.ui-arrow--down { transform: rotate(90deg); }
.ui-arrow--left { transform: rotate(-90deg); }
.ui-arrow--right { transform: rotate(0deg); }
.ui-arrow--up { transform: rotate(-45deg); }
.ui-arrow--down-right { transform: rotate(45deg); }

.ui-motif {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.ui-motif::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
}