//
//** Header Settings
//

$m-config-header: (
	//== Header
	header: (
		// header itself
		self: (
			padding: (
				desktop: 0 5px 0 20px,
				mobile: 0
			),
			height: (
				desktop: 100px,
				mobile: 60px
			)
		),

		// fixed mode
		fixed: (
			zindex: 101,
			height: (
				default: (
					desktop: 100px,
					mobile: 60px
				),
				minimize: (
					desktop: 70px,
					mobile: 60px
				)
			),
			bg-color: (
				minimize: #fff
			),
			shadow: (
				minimize: get-shadow(light, '-')
			),
			transition: all 0.3s ease
		)		
	),

	//== Brand
	brand: (
		// brand itself
		self: (
			padding: (
				desktop: 0px 30px 0px 0px,
				mobile: 0px 20px
			),
			width: 255px
		),

		// brand tools
		tools: (
			// itself
			self: (
				// space between togglers and icons
				space: (
					mobile: 15px 
				)
			),

			// toggler
			toggler: (
				width: 24px,
				height: 24px,  
				transition-duration: 0.4s,
				thickness: 1px,
				space: 6px, 
				radius: 4px,
				color: (
					default: (
						default: lighten(#ffffff, 10%),
						hover: get-brand-color(),
						active: get-brand-color()
					),
					minimize: (
						default: #7a8091,
						hover: get-brand-color(),
						active: get-brand-color()
					)
				)
			),

			// icon
			icon: (
				font-size: 1.3rem,
				color: (
					default: (
						default: lighten(#ffffff, 10%),
						hover: get-brand-color(),
						active: get-brand-color()
					),
					minimize: (
						default: #7a8091,
						hover: get-brand-color(),
						active: get-brand-color()
					)
				)
			),

			// dropdown
			dropdown: (
				margin: (
					desktop: 0 0 0 40px,
					mobile: 0 0 0 10px
				),
				btn: (
					padding: (
						desktop: 0.9rem 1.5rem 1rem 1.5rem,
						mobile: 0.9rem 1.5rem 1rem 1.5rem
					),
					bg-color: (
						default: (
							default: transparent,
							hover: rgba(#2d1b5b, 0.43)
						),
						minimize: (
							default: darken(#f7f7fb, 0%),
							hover: get-brand-color()
						)
					),
					border-color: (
						default: (
							default: rgba(#ffffff, 0.2),
							hover: rgba(#2d1b5b, 0.43)
						),
						minimize: (
							default: darken(#f7f7fb, 0%),					
							hover: get-brand-color()
						) 						
					),
					color: (
						default: (
							default: #a886f4,
							hover: get-brand-inverse-color()
						),
						minimize: (
							default: darken(#9099b1, 2%),
							hover: get-brand-inverse-color()
						)
					)
				)
			)
		)
	),

	//== Topbar
	topbar: (
		// Default mode
		default: (		
			// self
			self: (
				padding: (
					desktop: 0px,
					mobile: 0px 20px 0px 20px
				),
				transition-time: (
					push: .6s
				)
			),
			// nav bar
			nav: (
				// nav itself 
				self: (
					margin: (
						desktop: 0 0 0 30px,
						min-desktop: 0 0 0 5px,
						mobile: 0
					)
				),
				// nav item
				item: (
					// self
					self: (
						padding: (
							desktop: 0 4px,
							min-desktop: 0 4px,
							mobile: 0 2px
						)
					),
					// item link
					link: (
						// general icon
						icon: (
							size: 3.5rem,
							font-size: (
								desktop: 1.6rem,
								mobile: 1.6rem
							),
							align: center,
							bg-hover: (
								desktop: (
									default: rgba(#48209c, 0.4),
									minimize: rgba(#98a4c4, 0.2)
								),
								mobile: rgba(#b7bace, 0.2)
							),
							font-color:	(
								desktop: (
									default: #ffffff,
									minimize: darken(#98a4c4, 10%)
								),
								mobile: #bc1965
							)
						),

						// user link
						user: (
							// self
							self: (
								padding-left: (
									desktop: 15px,
									mobile: 5px
								)
							),
							// welcome
							welcome: (
								font-size: 1rem,
								font-weight: 500,
								font-color:	(
									desktop: (
										default: #a886f4,
										minimize: #a886f4
									),
									mobile: #b7bace
								)
							),

							// username
							username: (
								align: left,
								font-size: 1rem,
								font-weight: 500,
								font-transform:	inherit,
								font-color:	(
									desktop: (
										default: (
											default: #ffffff,
											hover: #ffffff
										),
										minimize: (
											default: #666666,
											hover: get-brand-color()
										)
									),
									mobile: (
										default: #5b5c6e,
										hover: get-brand-color()
									)
								)
							),

							// userpic
							userpic: (
								max-width: (
									desktop: 41px,
									mobile: 31px
								),
								margin: 0 0 0 5px
							)
						),
						// link badge
						badge:	(
							top: (
								desktop: 20%,
								mobile: 5px
							)
						)
					),
				),

				// dropdowns
				dropdown: (
					notifications: (
						bg-color: #7e55dd
					),
					quick-actions: (
						bg-color: #6f47d0
					),
					user-profile: (
						bg-color: #7948e1
					)
				)
			)
		),

		// Mobile toggle mode
		toggle: (
			transition: all 0.3s ease,
			bg-color: #fff,
			box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.1),
			height: (
				mobile: 50px
			)
		)
	),

	//== search
	search: (
		// self
		self: (
			transition-time: 0.4s,
			width: (
				desktop: (
					expandable: (
						initial: 160px,
						expanded: 240px
					),
					default: 180px
				)						
			),
			border-radius: 30px
		),
		// input
		input: (
			font-size: 1rem,
			padding: (
				desktop: 0.75rem 1.5rem 0.75rem 0.75rem,
				mobile: 7px 10px 7px 20px
			),
			border-color: (
				desktop: #e3e4ed, 
				mobile: transparent
			),
			bg-color: (
				desktop: (
					default: transparent,
					focus: transparent
				),
				mobile: #ffffff
			),
			font-color: (
				desktop: darken(#c1c7d9, 5%),
				mobile: #333333
			),
			placeholder-color: (
				desktop: #c1c7d9,
				mobile: #666666
			)
		),

		// icon
		icon: (
			// search icon
			search: (
				width: (
					desktop: 30px,
					mobile: 30px
				),
				padding: (
					desktop: 0 0 0 1.25rem,
					mobile: 0 0 0 10px
				),
				font-size: (
					desktop: 1.4rem,
					mobile: 1.6rem
				),
				font-color: (
					desktop: get-brand-color(),
					mobile:  #bcc0cd
				)
			),

			// cancel icon for desktop mode
			cancel: (
				width: (
					desktop: 30px
				),
				padding: (
					desktop: 0 1.25rem 0 0
				),
				font-size: (
					desktop: 1.3rem
				),
				font-color: (
					desktop: #64688d
				)
			),
			// close icon for mobile mode
			close: (
				width: (
					mobile: 30px
				),
				padding: (
					mobile: 0 0 0 0
				),
				font-size: (
					mobile: 1.3rem
				),
				font-color: (
					mobile:  #bcc0cd
				)
			)
		),

		// spinner 
		spinner: (
			color: #282a3c,
			right: (
				desktop: 16px, 
				mobile: 1.7rem
			)
		)
	)
);