@import '../libs/vars';
@import '../libs/functions';
@import '../libs/mixins';

///
/// Retrospect by TEMPLATED
/// templated.co @templatedco
/// Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
///

/* Footer */

	$footer_palette: 'accent2';

	#footer {
		@include color-typography($footer_palette);
		text-align: center;

		a {
			@include vendor('transition', 'color #{_duration(transition)} ease-in-out');
			color: _palette($footer_palette, fg-light);

			&:active, &:focus, &:hover {
				color: _palette($footer_palette, fg-bold);
			}
		}

		.inner {
			@include padding(6em, 0);
			border-top: solid 1px _palette($footer_palette, border2-bg);
			margin: 0 auto;
			width: 75%;
		}

		ul.icons {
			li {
				padding-right: 2.5em;

				&:last-child {
					padding-right: 0;
				}
			}
		}

		.copyright {
			color: _palette($footer_palette, fg-light);
			font-size: 0.9em;
			margin: 0 0 _size(element-margin) 0;
			padding: 0;
			text-transform: uppercase;

			li {
				display: inline-block;
				list-style: none;
				margin: 0 0.1em;
			}
		}

		@include breakpoint(medium) {
			.inner {
				@include padding(5em, 0);
				width: 100%;
			}
		}

		@include breakpoint(small) {
			.inner {
				@include padding(3em, 0);
			}

			.copyright {
				li {
					display: block;
					margin: 0;
				}
			}

			ul.icons {
				li {
					font-size: 0.9em;
				}
			}
		}

		@include breakpoint(xsmall) {
			.inner {
				@include padding(2em, 0);
			}
		}
	}