/* =====================================================
   TRYHARD — CSS ARROWS
   NO EMOJI / NO UNICODE
===================================================== */

.arrow,
.join-final-arrow,
.shows-calendar-all > span {
  position: relative;
  display: inline-block;

  width: 12px;
  height: 12px;

  flex: 0 0 12px;

  font-size: 0 !important;
  line-height: 0;

  color: currentColor;
}


/* diagonal line */

.arrow::before,
.join-final-arrow::before,
.shows-calendar-all > span::before {
  content: "";

  position: absolute;

  left: 1px;
  top: 5px;

  width: 11px;
  height: 1px;

  background: currentColor;

  transform: rotate(-45deg);
  transform-origin: center;
}


/* arrow head */

.arrow::after,
.join-final-arrow::after,
.shows-calendar-all > span::after {
  content: "";

  position: absolute;

  right: 0;
  top: 0;

  width: 5px;
  height: 5px;

  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}