@import "imports/utils.less";

	// Config

	@fs-navigation-margin:							0;

	@fs-navigation-icon-offset:						15px;
	@fs-navigation-icon-color:						#ccc;
	@fs-navigation-icon-height:						3px;
	@fs-navigation-icon-width:						15px;
	@fs-navigation-icon-gap:						2px;

	@fs-navigation-icon-close-size:					15px;
	@fs-navigation-icon-close-font-size:			22px;

	// Toggle

	@fs-navigation-toggle-background:				#fff;
	@fs-navigation-toggle-border-color:				#ccc;
	@fs-navigation-toggle-border-size:				1px;
	@fs-navigation-toggle-border-radius:			3px;

	@fs-navigation-toggle-handle-text-color:		#111;
	@fs-navigation-toggle-handle-font-size:			14px;
	@fs-navigation-toggle-handle-height:			40px;
	@fs-navigation-toggle-handle-padding:			0 45px 0 15px;

	// Slide

	@fs-navigation-slide-background:				#fff;
	@fs-navigation-slide-width:						270px;
	@fs-navigation-slide-zindex:                    0;

	@fs-navigation-slide-transition-speed:			0.2s;
	@fs-navigation-slide-transition-timing:			ease;

	@fs-navigation-slide-handle-background:			#fff;

	@fs-navigation-slide-handle-text-color:			#111;
	@fs-navigation-slide-handle-font-size:			14px;
	@fs-navigation-slide-handle-padding:			10px 40px 10px 15px;

	@fs-navigation-slide-content-box-shadow-color: 	rgba(0, 0, 0, 0.15);
	@fs-navigation-slide-content-box-shadow-blur: 	2px;

	@fs-navigation-overlay-zindex:					2;

	@fs-navigation-overlay-content-background:		#fff;
	@fs-navigation-overlay-content-opacity:			75;
	@fs-navigation-overlay-content-zindex:			1;

	@fs-navigation-push-zindex:						0;
	@fs-navigation-push-content-zindex:				1;


	/**
	 * @class
	 * @name .fs-navigation-element
	 * @type element
	 * @description Target elmement
	 */

	/**
	 * @class
	 * @name .fs-navigation
	 * @type element
	 * @description Base widget class
	 */

	.fs-navigation {
		&&-enabled {
			margin: @fs-navigation-margin;
		}

		&,
		&:after,
		&:before,
		*,
		*:after,
		*:before {
			box-sizing: border-box;
			transition: none;
			user-select: none !important;
		}

		/**
		 * @class
		 * @name .fs-navigation-toggle-nav
		 * @type element
		 * @description Toggle navigation
		 */
		/**
		 * @class
		 * @name .fs-navigation-toggle-nav.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */

		&-toggle-nav&-enabled {
			background: @fs-navigation-toggle-background;
			border: @fs-navigation-toggle-border-size solid @fs-navigation-toggle-border-color;
			border-width: 0 @fs-navigation-toggle-border-size @fs-navigation-toggle-border-size;
			border-radius: 0 0 @fs-navigation-toggle-border-radius @fs-navigation-toggle-border-radius;
			display: none;
		}

		/**
		 * @class
		 * @name .fs-navigation-toggle-nav.fs-navigation-open
		 * @type modifier
		 * @description Indicates open state
		 */

		&-toggle-nav&-open {
			display: block;
		}

		/**
		 * @class
		 * @name .fs-navigation-toggle-handle
		 * @type element
		 * @description Toggle handle
		 */
		/**
		 * @class
		 * @name .fs-navigation-toggle-handle.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */
		/**
		 * @class
		 * @name .fs-navigation-toggle-handle.fs-navigation-open
		 * @type modifier
		 * @description Indicates open state
		 */

		&-toggle-handle&-enabled {
			width: 100%;

			background: @fs-navigation-toggle-background;
			border: @fs-navigation-toggle-border-size solid @fs-navigation-toggle-border-color;
			border-radius: @fs-navigation-toggle-border-radius;
			color: @fs-navigation-toggle-handle-text-color;
			cursor: pointer;
			display: block;
			font-size: @fs-navigation-toggle-handle-font-size;
			height: @fs-navigation-toggle-handle-height;
			line-height: @fs-navigation-toggle-handle-height;
			margin: 0;
			padding: @fs-navigation-toggle-handle-padding;
			position: relative;
			user-select: none;
		}

		&-toggle-handle&-open {
			border-radius: @fs-navigation-toggle-border-radius @fs-navigation-toggle-border-radius 0 0;
		}

		/**
		 * @class
		 * @name .fs-navigation-overlay-nav
		 * @type element
		 * @description Overlay nav
		 */
		/**
		 * @class
		 * @name .fs-navigation-overlay-nav.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */
		/**
		 * @class
		 * @name .fs-navigation-overlay-nav.fs-navigation-animated
		 * @type modifier
		 * @description Indicates animated state
		 */
		/**
		 * @class
		 * @name .fs-navigation-overlay-nav.fs-navigation-open
		 * @type modifier
		 * @description Indicates open state
		 */
		/**
		 * @class
		 * @name .fs-navigation-overlay-left-nav
		 * @type modifier
		 * @description Indicates left hand nav
		 */
		/**
		 * @class
		 * @name .fs-navigation-overlay-right-nav
		 * @type modifier
		 * @description Indicates right hand nav
		 */

		/**
		 * @class
		 * @name .fs-navigation-push-nav
		 * @type element
		 * @description Push nav
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-nav.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-nav.fs-navigation-animated
		 * @type modifier
		 * @description Indicates animated state
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-nav.fs-navigation-open
		 * @type modifier
		 * @description Indicates open state
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-left-nav
		 * @type modifier
		 * @description Indicates left hand nav
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-right-nav
		 * @type modifier
		 * @description Indicates right hand nav
		 */

		/**
		 * @class
		 * @name .fs-navigation-reveal-nav
		 * @type element
		 * @description Reveal nav
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-nav.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-nav.fs-navigation-animated
		 * @type modifier
		 * @description Indicates animated state
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-nav.fs-navigation-open
		 * @type modifier
		 * @description Indicates open state
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-left-nav
		 * @type modifier
		 * @description Indicates left hand nav
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-right-nav
		 * @type modifier
		 * @description Indicates right hand nav
		 */

		&-push-nav&-enabled,
		&-reveal-nav&-enabled,
		&-overlay-nav&-enabled {
			width: @fs-navigation-slide-width;
			height: 100%;
			height: ~"calc(100% + 60px)";

			position: fixed;
			top: 0;

			background: @fs-navigation-slide-background;
			display: block;
			overflow: auto;
			visibility: hidden;
		}

		&-reveal-nav&-animated {
			transition: visibility 0.001s linear @fs-navigation-slide-transition-speed; // delay when closing
		}

		&-push-nav&-animated,
		&-overlay-nav&-animated {
			transition:
				transform @fs-navigation-slide-transition-speed @fs-navigation-slide-transition-timing,
				visibility 0.001s linear @fs-navigation-slide-transition-speed; // delay when closing
		}

		// reveal / push / overlay

		&-push-nav&-enabled,
		&-reveal-nav&-enabled {
			z-index: @fs-navigation-push-zindex;
		}

		&-push-left-nav&-enabled,
		&-reveal-left-nav&-enabled,
		&-overlay-left-nav&-enabled {
			left: 0;
		}

		&-push-right-nav&-enabled,
		&-reveal-right-nav&-enabled,
		&-overlay-right-nav&-enabled {
			right: 0;
		}

		// reveal



		// push / overlay

		&-push-left-nav&-enabled,
		&-overlay-left-nav&-enabled {
			transform: translate3D(-(@fs-navigation-slide-width), 0, 0);
		}

		&-push-right-nav&-enabled,
		&-overlay-right-nav&-enabled {
			transform: translate3D(@fs-navigation-slide-width, 0, 0);
		}

		// overlay

		&-overlay-nav&-enabled {
			z-index: @fs-navigation-overlay-zindex;
		}

		&-overlay-left-nav&-enabled {
			box-shadow: @fs-navigation-slide-content-box-shadow-blur 0 @fs-navigation-slide-content-box-shadow-blur @fs-navigation-slide-content-box-shadow-color;
		}

		&-overlay-right-nav&-enabled {
			box-shadow: -(@fs-navigation-slide-content-box-shadow-blur) 0 @fs-navigation-slide-content-box-shadow-blur @fs-navigation-slide-content-box-shadow-color;
		}

		// open

		&-reveal-nav&-open {
			visibility: visible;
			transition: visibility 0.001s @fs-navigation-slide-transition-timing;
		}

		&-push-nav&-open,
		&-overlay-nav&-open {
			transform: translate3D(0, 0, 0);
			transition:
				transform @fs-navigation-slide-transition-speed @fs-navigation-slide-transition-timing,
				visibility 0.001s @fs-navigation-slide-transition-timing;
			visibility: visible;
		}

		/**
		 * @class
		 * @name .fs-navigation-overlay-handle
		 * @type element
		 * @description Overlay handle
		 */
		/**
		 * @class
		 * @name .fs-navigation-overlay-handle.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */

		/**
		 * @class
		 * @name .fs-navigation-push-handle
		 * @type element
		 * @description Push handle
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-handle.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */

		&-push-handle&-enabled,
		&-overlay-handle&-enabled {
			padding: @fs-navigation-slide-handle-padding;

			background: @fs-navigation-toggle-background;
			color: @fs-navigation-toggle-handle-text-color;
			cursor: pointer;
			display: block;
			font-size: @fs-navigation-toggle-handle-font-size;
			margin: 0;
			padding: @fs-navigation-toggle-handle-padding;
			position: relative;
			user-select: none;
		}

		/**
		 * @class
		 * @name .fs-navigation-overlay-content:before
		 * @type element
		 * @description Overlay mask
		 */
		/**
		 * @class
		 * @name .fs-navigation-overlay-content.fs-navigation-open:before
		 * @type modifier
		 * @description Indicates open state
		 */

		&-overlay-content:before {
			width: 100%;
			height: 100%;
			height: ~"calc(100% + 60px)";

			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: @fs-navigation-overlay-content-zindex;

			background: @fs-navigation-overlay-content-background;
			background: fade(@fs-navigation-overlay-content-background, @fs-navigation-overlay-content-opacity);
			content: '';
			display: block;
			opacity: 0;
			transition:
				opacity @fs-navigation-slide-transition-speed @fs-navigation-slide-transition-timing,
				visibility @fs-navigation-slide-transition-speed @fs-navigation-slide-transition-timing;
			visibility: hidden;
		}

		&-overlay-content&-open:before {
			opacity: 1;
			visibility: visible;
		}

		/**
		 * @class
		 * @name .fs-navigation-push-content
		 * @type element
		 * @description Target page content
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-content.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-content.fs-navigation-animated
		 * @type modifier
		 * @description Indicates animted state
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-content.fs-navigation-open
		 * @type modifier
		 * @description Indicates open state
		 */

		/**
		 * @class
		 * @name .fs-navigation-push-left-content
		 * @type modifier
		 * @description Indicates left hand nav
		 */
		/**
		 * @class
		 * @name .fs-navigation-push-right-content
		 * @type modifier
		 * @description Indicates right hand nav
		 */

		/**
		 * @class
		 * @name .fs-navigation-reveal-content
		 * @type element
		 * @description Target page content
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-content.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-content.fs-navigation-animated
		 * @type modifier
		 * @description Indicates animted state
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-content.fs-navigation-open
		 * @type modifier
		 * @description Indicates open state
		 */

		/**
		 * @class
		 * @name .fs-navigation-reveal-left-content
		 * @type modifier
		 * @description Indicates left hand nav
		 */
		/**
		 * @class
		 * @name .fs-navigation-reveal-right-content
		 * @type modifier
		 * @description Indicates right hand nav
		 */

		&-reveal-content&-enabled,
		&-push-content&-enabled {
			position: relative;
			z-index: @fs-navigation-push-content-zindex;

			display: block;
			overflow: hidden;
			transform: translate3D(0, 0, 0);
		}

		&-reveal-content&-animated,
		&-push-content&-animated {
			transition:
				transform @fs-navigation-slide-transition-speed @fs-navigation-slide-transition-timing;
		}

		&-reveal-left-content&-enabled,
		&-push-left-content&-enabled {
			box-shadow: -(@fs-navigation-slide-content-box-shadow-blur) 0 @fs-navigation-slide-content-box-shadow-blur @fs-navigation-slide-content-box-shadow-color;
		}

		&-reveal-right-content&-enabled,
		&-push-right-content&-enabled {
			box-shadow: @fs-navigation-slide-content-box-shadow-blur 0 @fs-navigation-slide-content-box-shadow-blur @fs-navigation-slide-content-box-shadow-color;
		}

		// open

		&-reveal-left-content&-open,
		&-push-left-content&-open {
			transform: translate3D(@fs-navigation-slide-width, 0, 0);
		}

		&-reveal-right-content&-open,
		&-push-right-content&-open {
			transform: translate3D(-(@fs-navigation-slide-width), 0, 0);
		}

		/**
		 * @class
		 * @name .fs-navigation-handle
		 * @type element
		 * @description Click target to toggle navigation
		 */
		/**
		 * @class
		 * @name .fs-navigation-handle.fs-navigation-open
		 * @type modifier
		 * @description Indicates open state
		 */
		/**
		 * @class
		 * @name .fs-navigation-handle.fs-navigation-enabled
		 * @type modifier
		 * @description Indicates enabled state
		 */

		/**
		 * @class
		 * @name .fs-navigation-handle:after
		 * @type element
		 * @description Icon displayed in handle
		 */

		&-handle&-enabled {
			position: relative;
		}

		&-handle&-enabled:after {
			height: @fs-navigation-icon-height;
			width: @fs-navigation-icon-width;

			position: absolute;
			top: 0;
			right: @fs-navigation-icon-offset;
			bottom: 0;

			background: @fs-navigation-icon-color;
			box-shadow:
				0  (@fs-navigation-icon-height + @fs-navigation-icon-gap) 0 @fs-navigation-icon-color,
				0 -(@fs-navigation-icon-height + @fs-navigation-icon-gap) 0 @fs-navigation-icon-color;
			content: '';
			display: block;
			margin: auto 0;
		}

		// Open

		&-handle&-open:after {
			width: @fs-navigation-icon-close-size;
			height: @fs-navigation-icon-close-size;

			background: transparent;
			border: none;
			box-shadow: none;
			color: @fs-navigation-icon-color;
			content: "\00d7";
			font-size: @fs-navigation-icon-close-font-size;
			font-weight: 700;
			line-height: @fs-navigation-icon-close-size - 2;
			text-align: center;
		}

		/**
		 * @class
		 * @name .fs-navigation-lock
		 * @type modifier
		 * @description Indicates locked state; Applied to body element
		 */

		&-lock {
			overflow: hidden !important;
		}
	}