.arrow {
  display: inline-block;
  width: 0;
  height: 0;

  &.up {
    border: {
      left: 4px solid transparent;
      right: 4px solid transparent;
      bottom: 6px solid var(--c-bg-arrow);
    }
  }

  &.down {
    border: {
      left: 4px solid transparent;
      right: 4px solid transparent;
      top: 6px solid var(--c-bg-arrow);
    }
  }

  &.right {
    border: {
      top: 4px solid transparent;
      bottom: 4px solid transparent;
      left: 6px solid var(--c-bg-arrow);
    }
  }

  &.left {
    border: {
      top: 4px solid transparent;
      bottom: 4px solid transparent;
      right: 6px solid var(--c-bg-arrow);
    }
  }
}