//-------------------------------------
//-- Site - Base
//-------------------------------------

//-- Base
html {
	background-color: $common-bg-site-color;
}

a:not(.button) {
	color: $common-link-color;
	text-decoration: none;
	transition: color $common-hover-transition ease-out;

	&:hover, &:active, &:focus {
		color: $common-link-hover-color;
		text-decoration: underline;
	}
}




::selection {
	background-color: $common-text-color;
	color: $common-bg-color;
}


//-- Header
.header {
	/* ... */
}


//-- Fixed navigation
.fixed-nav {
	/* ... */
}


//-- Main navigation
.main-nav {
	/* ... */
}


//-- Body
.body {
	visibility: visible;

	//-- Foundation media exceptions
	@media #{bp(small only)} {
		/* ... */
	}

	@media #{bp(medium)} {
		/* ... */
	}

	@media #{bp(medium down)} {
		/* ... */
	}

	@media #{bp(medium only)} {
		/* ... */
	}

	@media #{bp(large)} {
		/* ... */
	}

	@media #{bp(large down)} {
		/* ... */
	}

	@media #{bp(large only)} {
		/* ... */
	}



	//-- Apply only when document is loaded (great for heavy imagery)
	#{$nwayo-docloaded-selector} & {
		/* ... */
	}

	//-- Only on touch devices
	html[data-whatintent='touch'] & {  // stylelint-disable-line selector-attribute-name-disallowed-list -- Exception for What Input?
		/* ... */
	}

	//-- Only on mouse devices
	html[data-whatintent='mouse'] & {  // stylelint-disable-line selector-attribute-name-disallowed-list -- Exception for What Input?
		/* ... */
	}

	//-- Hover only on mouse devices :)
	a {
		#{$nwayo-hover-selector} {
			/* ... */
		}
	}

}


//-- Content
.content {
	@include site-editable-styles();

	/* ... */
}


//-- Lateral column
.lateral-col {
	/* ... */
}


//-- Footer
.footer {
	/* ... */
}







//-- Styleguide sample for SAMPLE-HTML/index.html (TO REMOVE)
.styleguide-sample {
	padding: 2em;

	.content {
		padding: 2em;
		border: common-border();

		h2 ~ h2 {
			margin-top: 2em;
		}

	}

	.button {
		&.primary {
			@include common-button-styles();
		}

		&.secondary {
			@include common-button-styles($type:secondary);
		}

		&.cta {
			@include common-button-styles($type:cta);
		}
	}

	.message {
		position: relative;
		padding: .5em 1em .5em 2em;
		color: $common-text-var2-color;

		&::before {
			@include nwayo-pseudo-image-styles(1em);
			position: absolute;
			top: .8em;
			left: .65em;
			display: block;
		}

		&.success {
			background-color: $common-success-text-color;

			&::before {
				@include common-success-image();
			}
		}

		&.warning {
			background-color: $common-warning-text-color;

			&::before {
				@include common-warning-image();
			}
		}

		&.error {
			background-color: $common-error-text-color;

			&::before {
				@include common-error-image();
			}
		}
	}

}