Cacher is the code snippet organizer for pro developers

// usage arrow(top, 10px white, 2px blue)

arrow(position, arrow, border = 0 white)
	// Resolve arguments
	$arrowSize = arrow[0]
	$arrowColor = arrow[1]
	$borderWidth = border[0]
	$borderColor = border[1]

	$oppositePosition = opposite-position(position)

	// Base CSS
	position: relative unless @position
	background: $arrowColor

	// Selector generation
	$selectors = "&:after"
	if $borderWidth > 0
		$selectors = $selectors + ", &:before"

	// Arrow position
	{$selectors}
		{$oppositePosition}: 100%

		// Offset
		if position in (top bottom)
			left: 50%
		else
			top: 50%

		border: solid transparent
		content: " "
		height: 0
		width: 0
		position: absolute
		pointer-events: none

	// The arrow itself
	&:after
		border-color: rgba(white, 0) // transparent
		border-{$oppositePosition}-color: $arrowColor
		border-width: $arrowSize

		if position in (top bottom)
			margin-left: (- @border-width)
		else
			margin-top: (- @border-width)

	// The border
	if $borderWidth > 0
		&:before
			border-color: rgba(white, 0) // transparent
			border-{$oppositePosition}-color: $borderColor
			border-width: $arrowSize + $borderWidth

			if position in (top bottom)
				margin-left: (- @border-width)
			else
				margin-top: (- @border-width)