/*
	stylus-boilerplate

	dropdown.styl

	Author: Sean Goresht

	Dropdown component, specifically designed for nav elements
*/

/* Dropdown */
$dropdownColour ?= black
$dropdownSize ?= 8rem

/* Dropdown Menu Items */
$dropdownItemPadding ?= 1em
$dropdownItemMargin ?= 1em
$dropdownItemBorderColour ?= $dropdownColour + 35
$dropdownItemBorderWidth ?= 1px
$dropdownItemBorderStyle ?= solid

/* Dropdown caret */
$dropdownCaret ?= true
$dropdownCaretPosition ?= bottom
$dropdownCaretSize ?= 0.5em
$dropdownCaretColour ?= $dropdownColour

/* Transitions */
$dropdownTransitionTime ?= 0.5s
$dropdownTransitionFunction ?= ease

.dropdown
	position relative
	&:hover
		> .dropdown-menu
			opacity 1
	&-menu
		background $dropdownColour
		border 1px solid $dropdownColour + 25
		position absolute
		left 0
		z-index 9
		min-width $dropdownSize
		transition opacity $dropdownTransitionTime $dropdownTransitionFunction
		opacity 0
		&-item
			display block
			width 100%
			border $dropdownItemBorderWidth $dropdownItemBorderStyle color-fallback($dropdownItemBorderColour)
			&-link
				display block
				padding $dropdownItemPadding
				margin $dropdownItemMargin
		if $dropdownCaret
			&:before, &:after
				content ""
				position absolute
				display inline-block
				if $dropdownCaretPosition is top
					bottom ($dropdownCaretSize * -0.8)
				else
					top ($dropdownCaretSize * -0.8)
				left 50%
				border-right $dropdownCaretSize solid transparent
				border-bottom $dropdownCaretSize solid invert($dropdownCaretColour)
				border-left $dropdownCaretSize solid transparent
			&:after
				border-bottom $dropdownCaretSize solid $dropdownCaretColour