.triangle(@direction: right, @width: 10px, @color: #333) {
  display: flex;
  align-items: center;
  &::after {
    content: "";
    display: block;
    & when (@direction = top) {
      border-bottom: @width solid @color;
      border-left: (@width / 1.414) solid transparent;
      border-right: @width / 1.414 solid transparent;
    }
    & when (@direction = bottom) {
      border-top: @width solid @color;
      border-left: (@width / 1.414) solid transparent;
      border-right: @width / 1.414 solid transparent;
    }
    & when (@direction = left) {
      border-right: @width solid @color;
      border-top: (@width / 1.414) solid transparent;
      border-bottom: @width / 1.414 solid transparent;
    }
    & when (@direction = right) {
      border-left: @width solid @color;
      border-top: (@width / 1.414) solid transparent;
      border-bottom: @width / 1.414 solid transparent;
    }
  }
}

.arrow(@direction: right, @width: 0.6em, @color: #ccc) {
  display: flex;
  align-items: center;
  &:after {
    content: "";
    display: block;
    width: @width;
    height: @width;
    border-top: 1px solid @color;
    border-right: 1px solid @color;
    margin-left: 0.5em;
    & when (@direction = top) {
      transform: translateY(35%) rotate(-45deg);
    }
    & when (@direction = bottom) {
      transform: translateY(-35%) rotate(135deg);
    }
    & when (@direction = left) {
      transform: translate(35%) rotate(-135deg);
    }
    & when (@direction = right) {
      transform: translate(-35%) rotate(45deg);
    }
  }
}