@import 'compass';

// This file is best viewed with Tab size 4 code indentation


// -----------------------------------------------------------------------------------------------------------------
// 1. Theme Quick Settings (Variables)
// (for further control, you will need to dig into the actual CSS in 2.)
// -----------------------------------------------------------------------------------------------------------------


// ----------------------------------------------------------
// :: 1.1. Colors
// ----------------------------------------------------------

$sm-mint__white:										#fff !default;
$sm-mint__black:										#333 !default;
$sm-mint__green:										#F6FFED !default;
$sm-mint__green-dark:									#8db863 !default;

$sm-mint__box-shadow:									rgba(0, 0, 0, 0.25) !default;


// ----------------------------------------------------------
// :: 1.2. Breakpoints
// ----------------------------------------------------------

$sm-mint__desktop-vp:									768px !default;		// switch from collapsible to desktop


// ----------------------------------------------------------
// :: 1.3. Typography
// ----------------------------------------------------------

$sm-mint__font-family:									Arial, sans-serif !default;
$sm-mint__font-size-base:								16px !default;
$sm-mint__font-size-small:								14px !default;
$sm-mint__line-height:									17px !default;


// ----------------------------------------------------------
// :: 1.4. Borders
// ----------------------------------------------------------

$sm-mint__border-width:									2px !default;
$sm-mint__border-radius-base:							4px !default;


// ----------------------------------------------------------
// :: 1.5. Collapsible main menu
// ----------------------------------------------------------

// Menu box
$sm-mint__collapsible-bg:								$sm-mint__white !default;
$sm-mint__collapsible-border-color:						$sm-mint__green-dark !default;

// Items
$sm-mint__collapsible-item-color:						$sm-mint__black !default;
$sm-mint__collapsible-item-disabled-color:				darken($sm-mint__white, 20%) !default;
$sm-mint__collapsible-item-padding-vertical:			13px !default;
$sm-mint__collapsible-item-padding-horizontal:			20px !default;

// Items separators
$sm-mint__collapsible-separators-color:					rgba($sm-mint__green-dark, 0.2) !default;

// Toggle button (sub menu indicators)
$sm-mint__collapsible-toggle-bg:						rgba($sm-mint__green-dark, 0.2) !default;


// ----------------------------------------------------------
// :: 1.6. Collapsible sub menus
// ----------------------------------------------------------

// Menu box
$sm-mint__collapsible-sub-bg:							rgba($sm-mint__green-dark, 0.2) !default;

// Items text indentation for deeper levels
$sm-mint__collapsible-sub-item-indentation:				8px !default;


// ----------------------------------------------------------
// :: 1.7. Desktop main menu
// ----------------------------------------------------------

// Menu box
$sm-mint__desktop-bg:									transparent !default;

// Items
$sm-mint__desktop-item-color:							$sm-mint__black !default;
$sm-mint__desktop-item-hover-color:						$sm-mint__white !default;
$sm-mint__desktop-item-hover-bg:						$sm-mint__green-dark !default;
$sm-mint__desktop-item-highlighted-color:				$sm-mint__black !default;
$sm-mint__desktop-item-highlighted-bg:					$sm-mint__green !default;
$sm-mint__desktop-item-highlighted-box-shadow:			0 4px 3px $sm-mint__box-shadow !default;
$sm-mint__desktop-item-disabled-color:					darken($sm-mint__white, 20%) !default;
$sm-mint__desktop-item-padding-vertical:				11px !default;
$sm-mint__desktop-item-padding-horizontal:				20px !default;

// Sub menu indicators
$sm-mint__desktop-arrow-size:							6px !default;		// border-width
$sm-mint__desktop-arrow-color:							$sm-mint__green-dark !default;
$sm-mint__desktop-arrow-hover-color:					$sm-mint__white !default;
$sm-mint__desktop-arrow-highlighted-color:				$sm-mint__green-dark !default;
$sm-mint__desktop-arrow-spacing:						6px !default;

// Vertical items
$sm-mint__desktop-vertical-item-highlighted-color:		$sm-mint__desktop-item-hover-color !default;
$sm-mint__desktop-vertical-item-highlighted-bg:			$sm-mint__desktop-item-hover-bg !default;
$sm-mint__desktop-vertical-item-padding-vertical:		10px !default;
$sm-mint__desktop-vertical-item-padding-horizontal:		20px !default;


// ----------------------------------------------------------
// :: 1.8. Desktop sub menus
// ----------------------------------------------------------

// Menu box
$sm-mint__desktop-sub-bg:								$sm-mint__green !default;
$sm-mint__desktop-sub-box-shadow:						0 4px 3px $sm-mint__box-shadow !default;
$sm-mint__desktop-sub-padding-vertical:					8px !default;
$sm-mint__desktop-sub-padding-horizontal:				0 !default;

// Items
$sm-mint__desktop-sub-item-color:						$sm-mint__black !default;
$sm-mint__desktop-sub-item-hover-color:					$sm-mint__white !default;
$sm-mint__desktop-sub-item-hover-bg:					$sm-mint__green_dark !default;
$sm-mint__desktop-sub-item-disabled-color:				lighten($sm-mint__black, 50%) !default;
$sm-mint__desktop-sub-item-padding-vertical:			10px !default;
$sm-mint__desktop-sub-item-padding-horizontal:			20px !default;


// -----------------------------------------------------------------------------------------------------------------
// 2. Theme CSS
// -----------------------------------------------------------------------------------------------------------------


// ----------------------------------------------------------
// :: 2.1. Collapsible mode (mobile first)
// ----------------------------------------------------------

// calc item height and sub menus toggle button size
$sm-mint__item-height: $sm-mint__line-height + $sm-mint__collapsible-item-padding-vertical * 2;
// set toggle button size to 80% of item height
$sm-mint__toggle-size: floor($sm-mint__item-height * 0.8);
$sm-mint__toggle-spacing: floor($sm-mint__item-height * 0.1);

// Main menu box
.sm-mint {
	border-top: $sm-mint__border-width solid $sm-mint__collapsible-border-color;
	border-bottom: $sm-mint__border-width solid $sm-mint__collapsible-border-color;
	background: $sm-mint__collapsible-bg;

	// Main menu items
	a {
		&,
		&:hover,
		&:focus,
		&:active {
			padding: $sm-mint__collapsible-item-padding-vertical $sm-mint__collapsible-item-padding-horizontal;
			/* make room for the toggle button (sub indicator) */
			padding-right: $sm-mint__collapsible-item-padding-horizontal + $sm-mint__toggle-size + $sm-mint__toggle-spacing;
			color: $sm-mint__collapsible-item-color;
			font-family: $sm-mint__font-family;
			font-size: $sm-mint__font-size-base;
			font-weight: normal;
			line-height: $sm-mint__line-height;
			text-decoration: none;
		}

		&.current {
			font-weight: bold;
		}

		&.disabled {
			color: $sm-mint__collapsible-item-disabled-color;
		}

		// Toggle buttons (sub menu indicators)
		span.sub-arrow {
			position: absolute;
			top: 50%;
			margin-top: -(ceil($sm-mint__toggle-size / 2));
			left: auto;
			right: $sm-mint__toggle-spacing;
			width: $sm-mint__toggle-size;
			height: $sm-mint__toggle-size;
			overflow: hidden;
			font: bold #{$sm-mint__font-size-small}/#{$sm-mint__toggle-size} monospace !important;
			text-align: center;
			text-shadow: none;
			background: $sm-mint__collapsible-toggle-bg;
			@include border-radius($sm-mint__border-radius-base);
		}
		// Change + to - on sub menu expand
		&.highlighted span.sub-arrow:before {
			display: block;
			content: '-';
		}
	}

	// Main menu items separators
	li {
		border-top: 1px solid $sm-mint__collapsible-separators-color;
	}
        > li:first-child {
		border-top: 0;
	}

	// Sub menus box
	ul {
		background: $sm-mint__collapsible-sub-bg;

		// Sub menus items
		a {
			&,
			&:hover,
			&:focus,
			&:active {
				font-size: $sm-mint__font-size-small;
				// add indentation for sub menus text
				border-left: $sm-mint__collapsible-sub-item-indentation solid transparent;
			}
		}

		// Add indentation for sub menus text for deeper levels
		@include sm-mint__sub-items-indentation($sm-mint__collapsible-sub-item-indentation);
	}
}


// ----------------------------------------------------------
// :: 2.2. Desktop mode
// ----------------------------------------------------------

@media (min-width: $sm-mint__desktop-vp) {

	/* Switch to desktop layout
	-----------------------------------------------
	   These transform the menu tree from
	   collapsible to desktop (navbar + dropdowns)
	-----------------------------------------------*/
	/* start... (it's not recommended editing these rules) */
	.sm-mint ul{position:absolute;width:12em;}
	.sm-mint li{float:left;}
	.sm-mint.sm-rtl li{float:right;}
	.sm-mint ul li,.sm-mint.sm-rtl ul li,.sm-mint.sm-vertical li{float:none;}
	.sm-mint a{white-space:nowrap;}
	.sm-mint ul a,.sm-mint.sm-vertical a{white-space:normal;}
	.sm-mint .sm-nowrap > li > a,.sm-mint .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
	/* ...end */

	// Main menu box
	.sm-mint {
		border-top: 0;
		background: $sm-mint__desktop-bg;

		// Main menu items
		a {
			&,
			&:hover,
			&:focus,
			&:active,
			&.highlighted {
				padding: $sm-mint__desktop-item-padding-vertical $sm-mint__desktop-item-padding-horizontal;
				color: $sm-mint__desktop-item-color;
				@include border-radius($sm-mint__border-radius-base $sm-mint__border-radius-base 0 0);
			}

			&:hover,
			&:focus,
			&:active {
				background: $sm-mint__desktop-item-hover-bg;
				color: $sm-mint__desktop-item-hover-color;
			}

			&.highlighted {
				background: $sm-mint__desktop-item-highlighted-bg;
				color: $sm-mint__desktop-item-highlighted-color;
				@include box-shadow($sm-mint__desktop-item-highlighted-box-shadow);
			}

			&.disabled {
				background: transparent;
				color: $sm-mint__desktop-item-disabled-color;
				@include box-shadow(none);
			}

			// Make room for the sub arrows
			&.has-submenu {
				padding-right: $sm-mint__desktop-item-padding-horizontal + 8px + $sm-mint__desktop-arrow-spacing;
			}

			// Sub menu indicators
			span.sub-arrow {
				top: 50%;
				margin-top: -(ceil($sm-mint__desktop-arrow-size / 2));
				right: $sm-mint__desktop-item-padding-horizontal;
				width: 0;
				height: 0;
				border-width: $sm-mint__desktop-arrow-size ($sm-mint__desktop-arrow-size * 0.67) 0 ($sm-mint__desktop-arrow-size * 0.67);
				border-style: solid dashed dashed dashed;
				border-color: $sm-mint__desktop-arrow-color transparent transparent transparent;
				background: transparent;
				@include border-radius(0);
			}
			&:hover span.sub-arrow,
			&:focus span.sub-arrow,
			&:active span.sub-arrow {
				border-color: $sm-mint__desktop-arrow-hover-color transparent transparent transparent;
			}
			&.highlighted span.sub-arrow {
				border-color: $sm-mint__desktop-arrow-highlighted-color transparent transparent transparent;
			}
			&.disabled span.sub-arrow {
				border-color: $sm-mint__desktop-arrow-color transparent transparent transparent;
			}
			// reset mobile first style
			&.highlighted span.sub-arrow:before {
				display: none;
			}
		}

		// No main menu items separators
		li {
			border-top: 0;
		}

		// Sub menus box
		ul {
			border: 0;
			padding: $sm-mint__desktop-sub-padding-vertical $sm-mint__desktop-sub-padding-horizontal;
			background: $sm-mint__desktop-sub-bg;
			@include border-radius(0 $sm-mint__border-radius-base $sm-mint__border-radius-base $sm-mint__border-radius-base);
			@include box-shadow($sm-mint__desktop-sub-box-shadow);

			// 2+ sub levels need rounding of all corners
			ul {
				@include border-radius($sm-mint__border-radius-base);
			}

			// Sub menus items
			a {
				&,
				&:hover,
				&:focus,
				&:active,
				&.highlighted {
					border: 0 !important;
					padding: $sm-mint__desktop-sub-item-padding-vertical $sm-mint__desktop-sub-item-padding-horizontal;
					color: $sm-mint__desktop-sub-item-color;
					@include border-radius(0);
				}

				&:hover,
				&:focus,
				&:active,
				&.highlighted {
					background: $sm-mint__desktop-item-hover-bg;
					color: $sm-mint__desktop-item-hover-color;
					@include box-shadow(none);
				}

				&.disabled {
					background: transparent;
					color: $sm-mint__desktop-sub-item-disabled-color;
				}

				// No need for additional room for the sub arrows
				&.has-submenu {
					padding-right: $sm-mint__desktop-item-padding-horizontal;
				}

				// Sub menu indicators
				span.sub-arrow {
					right: 10px;
					margin-top: -($sm-mint__desktop-arrow-size * 0.67);
					border-width: ($sm-mint__desktop-arrow-size * 0.67) 0 ($sm-mint__desktop-arrow-size * 0.67) $sm-mint__desktop-arrow-size;
					border-style: dashed dashed dashed solid;
					border-color: transparent transparent transparent $sm-mint__desktop-arrow-color;
				}
				&:hover span.sub-arrow,
				&:focus span.sub-arrow,
				&:active span.sub-arrow,
 				&.highlighted span.sub-arrow {
					border-color: transparent transparent transparent $sm-mint__desktop-arrow-hover-color;
				}
				&.disabled span.sub-arrow {
					border-color: transparent transparent transparent $sm-mint__desktop-arrow-color;
				}
			}
		}

		// Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." in the default download package
		span.scroll-up,
		span.scroll-down {
			position: absolute;
			display: none;
			visibility: hidden;
			overflow: hidden;
			background: $sm-mint__desktop-sub-bg;
			height: 20px;
			// width and position will be set automatically by the script
		}
		span.scroll-up-arrow {
			position: absolute;
			top: 6px;
			left: 50%;
			margin-left: -8px;
			// we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too
			width: 0;
			height: 0;
			overflow: hidden;
			border-width: 0 6px 8px 6px; // tweak size of the arrow
			border-style: dashed dashed solid dashed;
			border-color: transparent transparent $sm-mint__desktop-arrow-color transparent;
		}
		span.scroll-down-arrow {
			@extend span.scroll-up-arrow;
			border-width: 8px 6px 0 6px;
			border-style: solid dashed dashed dashed;
			border-color: $sm-mint__desktop-arrow-color transparent transparent transparent;
		}


		// Rigth-to-left

		// Main menu box
		&.sm-rtl {

			// Main menu items
			a {

				// Make room for the sub arrows
				&.has-submenu {
					padding-right: $sm-mint__desktop-item-padding-horizontal;
					padding-left: $sm-mint__desktop-item-padding-horizontal + 8px + $sm-mint__desktop-arrow-spacing;
				}

				// Sub menu indicators
				span.sub-arrow {
					right: auto;
					left: $sm-mint__desktop-item-padding-horizontal;
				}
			}

			// Vertical main menu
			&.sm-vertical {
				border-right: 0;
				border-left: $sm-mint__border-width solid $sm-mint__collapsible-border-color;

				// Vertical main menu items
				a {
					@include border-radius(0 $sm-mint__border-radius-base $sm-mint__border-radius-base 0);

					// No need for additional room for the sub arrows
					&.has-submenu {
						padding: $sm-mint__desktop-vertical-item-padding-vertical $sm-mint__desktop-vertical-item-padding-horizontal;
					}

					// Sub menu indicators
					span.sub-arrow {
						right: auto;
						left: 10px;
						border-width: ($sm-mint__desktop-arrow-size * 0.67) $sm-mint__desktop-arrow-size ($sm-mint__desktop-arrow-size * 0.67) 0;
						border-style: dashed solid dashed dashed;
						border-color: transparent $sm-mint__desktop-arrow-color transparent transparent;
					}
					&:hover span.sub-arrow,
					&:focus span.sub-arrow,
					&:active span.sub-arrow,
	 				&.highlighted span.sub-arrow {
						border-color: transparent $sm-mint__desktop-arrow-hover-color transparent transparent;
					}
					&.disabled span.sub-arrow {
						border-color: transparent $sm-mint__desktop-arrow-color transparent transparent;
					}
				}
			}

			// Sub menus box
			ul {
				@include border-radius($sm-mint__border-radius-base 0 $sm-mint__border-radius-base $sm-mint__border-radius-base);

				a {
					@include border-radius(0 !important);

					// No need for additional room for the sub arrows
					&.has-submenu {
						padding: $sm-mint__desktop-sub-item-padding-vertical $sm-mint__desktop-sub-item-padding-horizontal !important;
					}

					// Sub menu indicators
					span.sub-arrow {
						right: auto;
						left: 10px;
						border-width: ($sm-mint__desktop-arrow-size * 0.67) $sm-mint__desktop-arrow-size ($sm-mint__desktop-arrow-size * 0.67) 0;
						border-style: dashed solid dashed dashed;
						border-color: transparent $sm-mint__desktop-arrow-color transparent transparent;
					}
					&:hover span.sub-arrow,
					&:focus span.sub-arrow,
					&:active span.sub-arrow,
	 				&.highlighted span.sub-arrow {
						border-color: transparent $sm-mint__desktop-arrow-hover-color transparent transparent;
					}
					&.disabled span.sub-arrow {
						border-color: transparent $sm-mint__desktop-arrow-color transparent transparent;
					}
				}
			}
		}


		// Vertical main menu

		// Main menu box
		&.sm-vertical {
			border-bottom: 0;
			border-right: $sm-mint__border-width solid $sm-mint__collapsible-border-color;

			// Main menu items
			a {
				padding: $sm-mint__desktop-vertical-item-padding-vertical $sm-mint__desktop-vertical-item-padding-horizontal;
				@include border-radius($sm-mint__border-radius-base 0 0 $sm-mint__border-radius-base);

				&:hover,
				&:focus,
				&:active,
				&.highlighted {
					background: $sm-mint__desktop-item-hover-bg;
					color: $sm-mint__desktop-item-hover-color;
					@include box-shadow(none);
				}

				&.disabled {
					background: transparent;
					color: $sm-mint__desktop-item-disabled-color;
				}

				// Sub menu indicators
				span.sub-arrow {
					right: 10px;
					margin-top: -($sm-mint__desktop-arrow-size * 0.67);
					border-width: ($sm-mint__desktop-arrow-size * 0.67) 0 ($sm-mint__desktop-arrow-size * 0.67) $sm-mint__desktop-arrow-size;
					border-style: dashed dashed dashed solid;
					border-color: transparent transparent transparent $sm-mint__desktop-arrow-color;
				}
				&:hover span.sub-arrow,
				&:focus span.sub-arrow,
				&:active span.sub-arrow,
 				&.highlighted span.sub-arrow {
					border-color: transparent transparent transparent $sm-mint__desktop-arrow-hover-color;
				}
				&.disabled span.sub-arrow {
					border-color: transparent transparent transparent $sm-mint__desktop-arrow-color;
				}
			}

			// Sub menus box
			ul {
				@include border-radius($sm-mint__border-radius-base !important);

				// Sub menus items
				a {
					padding: $sm-mint__desktop-sub-item-padding-vertical $sm-mint__desktop-sub-item-padding-horizontal;
				}
			}
		}
	}
}