// Variables

// # Contents
// 1. Theme Skin
// 2. Theme Settings
// 3. Theme Variables
// 4. Plugin Variables


// 1. Theme Skin
$primary-color: #08c;
$secondary-color: #e6e5e2;

// 2. Theme Settings
$dot-border: #222529;
$dot-border-active: #222529;
$dot-width: 18px;
$dot-height: 18px;
$nav-color: #fff;
$nav-color-hover: #fff;

// 3. Theme Variables
$border-color: #e7e7e7;

@include set(
	(
		body: (
			background: #fff
		),
		
		layout: (
			container: (
				max-width-desktop: 1200px
			)
		),

		header: (
			link-color: inherit,
			link-active-color: $primary-color-dark,

			top: (
				color: #fff,
				font-size: 1.2rem,
				font-weight: 600,
				letter-spacing: .025em
			),

			middle: (
				padding-top: 2.8rem,
				padding-bottom: 2.8rem,
				color: $primary-color-dark,
				background: $secondary-color
			),

			bottom: (
				color: $secondary-color,
			),

			top-menu-li: (
				width: 100%,
				text-align: left
			),

			dropdowns: (
				padding-left: 2.7rem,
				margin-left: 1.2rem,
				border-left: 1px solid #2c3035,
				letter-spacing: .01em
			),

			social-icon: (
				color: inherit,
				font-size: 1.4rem,
				size: 2.548rem,
			),

			separator: (
				space: 10px,
				color: rgba(0, 0, 0, 0.1),
			),

			search: (
				height: 40px,
				background: #f4f4f4,
				divider: 1px solid #fff,
				toggle: (
					size: 2.5rem,
				),
				btn: (
					color: #606669,
					background: #fff,
					min-width: 46.17px
				),

				select: (
					padding-left: .9rem,
					padding-right: 1rem,
					min-width: 12.9rem,
				),

				border: (
					width: 5px,
					color: #ccc,
					radius: 2.5rem,
				)
			),

			icon: (
				size: 2.7rem,
				space: 2.2rem
			),

			logo: (
				max-width: 111px,
				max-width-mobile: 100px,
				sticky: (
					transform: scale(.8),
					transform-origin: left center
				)
			)
		),
		menu: (
			top: (
				color: #fff,
			),
			main: (
				top: (
					font-family: $second-font-family,
					padding: 20px,
					space: 1px,
				)
			),
			vertical: (
				color: $secondary-color,
				active-color: #7b858a,
				active-background: #fff,
			),
		),

		breadcrumb: (
			color: #8e8e8e,
			border-bottom: false,
			letter-spacing: 0,

			divider: (
				space: 1.4rem
			)
		),

		footer: (
			padding-top: 1px,
			color: #777,
			background: $secondary-color,
			link-active-color: #fff,
			font-size: 1.3rem,
			line-height: 2.4rem,

			a: (
				hover: (
					color: $primary-color-dark
				)
			),

			top: (
				padding-top: 6.3rem,
			),

			middle: (
				padding-top: 4rem,
				padding-bottom: 3rem,
				border-top: 1px solid #cecdca,
			),

			bottom: (
				padding-top: 1.5rem,
				padding-bottom: 1.5rem,
				border-top: 1px solid #cecdca,
				color: #999,
				font-size: 1.2rem
			),

			widget: (
				margin-bottom: .9rem,

				title: (
					size: 1.5rem,
					color: #222529,
					line-height: 1.4,
					weight: 700,
					margin: 0 0 1.5rem
				)
			),

			social-icon: (
				space: .4rem,
				border: 1px solid #cecdca,
				color: #222529,
				background: transparent,
				font-size: 1.6rem,
				line-height: 3.6rem
			)
		),

		info-box: (
			icon: (
				space: .8rem,
				size: 2.8rem,
			),

			title: (
				margin-bottom: 2px,
				size: 1.2rem,
				weight: 600,
			),
		),

		feature-box: (
			title: (
				color: $secondary-color,
				font-size: 2rem,
			)
		),

		owl-carousel: (
			nav: (
				image-center: 38%
			)
		)
	)
);