// Variables

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


// 1. Theme Skin
$primary-color: #222529;
$secondary-color: #ee8379;

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

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

@include set(
	(
		body: (
			background: #fff
		),
		
		layout: (
			container: (
				max-width-desktop: calc( 100% )
			)
		),

		header: (
			position: fixed,
			width: 30rem,
			min-height: 100vh,
			padding: 1.6rem 2.6rem 14.7rem 2rem,
			background-color: $primary-color,
			font-family: "'Open Sans', sans-serif",
			color: #fff,
			_link-active-color: #fff,

			top: (
				padding-bottom: 1px,
				font-size: 1rem
			),

			dropdown: (
				space: 0
			),

			icon: (
				space: 2.1rem,
				size: 2rem
			),

			logo: (
				margin: 3rem auto 2.2rem,
				max-width: 11.1rem,
				width: 11.1rem,
				transform: translate(3px, 2px)
			),

			search: (
				right: 0,
				height: 4rem,
				background: #181b1f,

				border: (
					_radius: 2rem 0 0 2rem,
					_width: 0,
				),

				select: (
					padding-right: 0
				)
			),

			social-icon: (
				font-size: 1.8rem,
				space: 2rem
			)
		),

		menu: (
			vertical: (
				color: #fff,
				_active-color: #fff
			),

			main: (
				top: (
					padding: 1.4rem 0 1.4rem .5rem,
					font-weight: 600,
					letter-spacing: -.025em
				)
			),

			mega: (
				width-3col: 58rem,
				width-4col: 80rem
			)
		),
		
		breadcrumb: (
			color: #8e8e8e,
			border-bottom: false,
			letter-spacing: 0,
			padding: 1.2rem,

			divider: (
				_space: 1.4rem
			)
		),

		product: (
		// 1.1) Base
			self: (
				color: #999
			),

		// 1.2) Image
			figure: (
				img: (
					transition: opacity .3s
				)
			),

		// 1.3) Label
			product-label: (
				padding: 5px 9px,
				font-size: 11px
			),

		// 1.5) Category List
			product-category: (
				color: #999,
				font-family: "'Open Sans', sans-serif"
			),

		// 1.6) Product Title
			product-title: (
				margin-bottom: 5px,
				font-family: "'Open Sans', sans-serif",
				letter-spacing: -.01em
			),

		// 1.7) Product Tooltip
			tooltiptext: (
				background-color: rgba(0, 0, 0, .8),

				after: (
					border-top-color: rgba(0, 0, 0, .8),					
				)
			),

		// 1.8) Actions
			btn-add-cart: (
				i: (
					font-size: 1.2rem
				)
			),

			btn-wishlist: (
				color: #777,

				hover: (
					color: #000,
				)
			),

		// 2.2) Price
			price: (
				font-family: "Open Sans, sans-serif",
				font-size: 1.125em
			),

			old-price: (
				font-family: "Open Sans, sans-serif",
				line-height: 1.5
			),

			price-box: (
				width: 100%,
				margin-bottom: 1.5rem,
			),

		// 2.3) Ratings
			ratings-container: (
				margin-left: 0,
				margin-bottom: 1.3rem,

				product-ratings: (
					before: (
						color: rgba(0,0,0,.16)
					)
				),

				ratings: (
					before: (
						color: rgba(0, 0, 0, .16)
					)
				)
			)
		),

		footer: (
			color: #a8a8a8,
			_link-active-color: #777,
			line-height: 24px,

			middle: (
				padding-top: 3.8rem,
				padding-bottom: 1.7rem
			),

			bottom: (
				font-size: 12px,
				color: #777,
				_border-top-inner: 1px solid #e7e7e7,
				padding-top: 1.5rem,
				padding-bottom: 4.8rem,
			),

			widget: (
				margin-bottom: 0,

				title: (
					margin-bottom: 1.4rem,
					_size: 1.5rem,
					color: $primary-color-dark,
					weight: 700,
					margin: 0 0 1.3rem
				)
			),

			social-icon: (
				width: 3.6rem,
				height: 3.6rem,
				color: #333,
				background: #f4f4f4,
				font-size: 16px,
				line-height: 3.7rem
			)
		),

		info-box: (
			icon: (
				_space: .8rem,
				_size: 2.8rem,
			),

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

		feature-box: (
			title: (
				color: $primary-color,
				font-size: 1.6rem,
				margin-bottom: 1px
			),

			subtitle: (
				margin-bottom: 5px,
				font-family: "'Open Sans', sans-serif",
				font-weight: 600,
				color: #777
			),

			icon: (
				display: inline-block,
				margin-top: -4px,
				flex: 0 0 8rem,
				margin-right: 2rem,
				text-align: center,
				color: $primary-color
			),

			content: (
				font-family: "'Open Sans', sans-serif",
				font-size: 1.3rem,
				font-weight: 400,
				line-height: 1.85
			)
		),

		owl-carousel: (
			nav: (
				image-center: 38%,
				color: #777
			)
		)
	)
);

// 4. Plugin Variables