/* Dropdowns
   ========================================================================== */

ul.dropdown-menu {
	border: none;

	@include border-top-radius(0);

	@media (min-width: $grid-float-breakpoint) {
		@include box-shadow($gx-dropdown-box-shadow);
	}

	@include background($gx-dropdown-bg-color,
			$gx-dropdown-bg-image-url,
			$gx-dropdown-bg-image-position,
			$gx-dropdown-bg-image-repeat,
			$gx-dropdown-bg-image-size,
			$gx-dropdown-bg-image-attachment,
			$gx-dropdown-bg-image-enabled,
			$gx-dropdown-bg-gradient-enabled,
			$gx-dropdown-bg-gradient-color1,
			$gx-dropdown-bg-gradient-color2,
			$gx-dropdown-bg-gradient-type,
			$gx-dropdown-bg-gradient-angle);
	li {

		// forms within dropdowns

		form {
			padding: 6px 15px 0;
		}

		.form-group {
			padding: $gx-topbar-link-padding 0;
			padding-top: 0;

			> label {
				color: $gx-dropdown-color;
			}
		}

		> a, span {

			// padding used for search 
			// autosuggester and categories dropdown.
			// menu dropdowns overwritten for mobile and desktops
			color: $gx-dropdown-color;
			display: block;
			padding: 5px ($grid-gutter-width / 2);

			// disabled links

			&.disabled {
				color: $gx-dropdown-disabled-color;

				&:hover {
					background-color: transparent;
				}
			}

			// apply hover styling for all dropdown menus except the cart dropdown
			&:hover {
				&:not(.cart-dropdown a) {
					@include background($gx-dropdown-hover-bg-color,
							$gx-dropdown-hover-bg-image-url,
							$gx-dropdown-hover-bg-image-position,
							$gx-dropdown-hover-bg-image-repeat,
							$gx-dropdown-hover-bg-image-size,
							$gx-dropdown-hover-bg-image-attachment,
							$gx-dropdown-hover-bg-image-enabled,
							$gx-dropdown-hover-bg-gradient-enabled,
							$gx-dropdown-hover-bg-gradient-color1,
							$gx-dropdown-hover-bg-gradient-color2,
							$gx-dropdown-hover-bg-gradient-type,
							$gx-dropdown-hover-bg-gradient-angle);
				}
			}
		}
	}

	// arrow-tip above dropdown-layer

	&.arrow-top {
		@include border-top-radius($border-radius-base);

		> .arrow {
			&,
			&:after {
				position: absolute;
				display: block;
				width: 0;
				height: 0;
				border-color: transparent;
				border-style: solid;
			}
		}

		> .arrow {
			display: none;
			border-width: $popover-arrow-outer-width;
			right: 30px;
			margin-left: -$popover-arrow-outer-width;
			border-top-width: 0;
			border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
			border-bottom-color: $gx-dropdown-bg-color;
			top: -$popover-arrow-outer-width;

			&:after {
				content: " ";
				top: 1px;
				margin-left: -$popover-arrow-width;
				border-top-width: 0;
				border-bottom-color: transparent;
				border-width: $popover-arrow-width;
				content: "";
			}
		}

		@media (min-width: $grid-float-breakpoint) {
			margin-top: 10px;
			right: 50%;
			margin-right: -41px;

			@include box-shadow(0 0 20px rgba(0, 0, 0, .35));
			> .arrow {
				display: block;
			}
		}
	}

	// dropdown headers
	// font-size of h4

	.dropdown-header {
		padding: ($grid-gutter-width / 2);
		font-size: $font-size-h4;
		color: $gx-dropdown-color;
	}

	// dropdown footer used in 
	// cart and topbar dropdowns

	.dropdown-footer {
		padding: ($grid-gutter-width / 2);
		margin-bottom: -5px;
		color: $gx-dropdown-footer-color;

		@include border-bottom-radius($border-radius-base);
		@include background($gx-dropdown-footer-bg-color,
				$gx-dropdown-footer-bg-image-url,
				$gx-dropdown-footer-bg-image-position,
				$gx-dropdown-footer-bg-image-repeat,
				$gx-dropdown-footer-bg-image-size,
				$gx-dropdown-footer-bg-image-attachment,
				$gx-dropdown-footer-bg-image-enabled,   
				$gx-dropdown-footer-bg-gradient-enabled,
				$gx-dropdown-footer-bg-gradient-color1, 
				$gx-dropdown-footer-bg-gradient-color2, 
				$gx-dropdown-footer-bg-gradient-type,   
				$gx-dropdown-footer-bg-gradient-angle); 

		// link list
		// i.e. forgot password and create account

		> ul {
			@include reset-list();
			margin-left: -15px;
			margin-right: -15px;
			margin-top: ($grid-gutter-width / 2);

			> li {
				display: block;

				> a {
					display: block;
					padding: 5px ($grid-gutter-width / 2);

					&,
					&:hover,
					&:active,
					&:focus {
						color: $dropdown-link-color;
						background-color: transparent;
					}
				}
			}
		}
	}
}