// List of flat pages.
.footer-pages
	background-color: $color-background-dark
	font-size: $font-size-smaller

	ul
		display: flex
		list-style: none
		padding: 0

		li
			&:after
				display: none

			&:first-child a
				padding-left: 0

	a
		color: $color-text-dark-secondary
		display: inline-block
		padding: 5px 7px

		&:hover
			text-decoration: underline

	// Style footer-navigation when it's right after footer-pages.
	&+.footer-navigation
		padding-top: 5px


// Sitemap links.
.footer-navigation
	font-size: $font-size-small
	padding: 15px 0 30px

	.sitemap-title
		color: $color-text-dark-primary
		font-size: $font-size-normal
		display: block
		padding: 20px 0 10px

		&.developers
			opacity: .8
			padding-top: 15px

			&:hover
				color: $color-primary

	ul
		padding: 0

		li:after
			display: none

		a
			color: $color-text-dark-secondary
			display: block
			padding: 2px 0

			&:hover
				color: $color-primary

	span.new
		color: $color-danger
		font-size: 8px
		left: 3px
		position: relative
		top: -5px

	.social-icons
		align-items: center
		display: flex
		justify-content: space-around

		&:first-child
			padding-top: 15px

		a
			fill: $color-text-dark-primary
			flex: 1

			svg
				max-width: 30px
				transition: fill 150ms ease-in-out

		&.developers
			display: block

			a
				padding: 5px

			svg
				fill: $color-text-dark-secondary
				max-width: 20px

			.social-icons__facebook i svg
				max-width: 16px

		&__blog
			color: $color-text-dark-primary
			display: inline-block
			position: relative
			top: -5px

			&:hover
				color: $color-primary

		&__youtube:hover svg
			fill: #CD201F

		&__twitter:hover svg
			fill: #1dcaff

		&__facebook i svg
			max-width: 24px

			&:hover
				fill: #3b5998

// Artistic freedom starts with Blender.
.footer-note
	color: $color-text-dark-secondary
	display: block
	font-size: $font-size-small
	padding-bottom: 10px
	text-align: center

	i
		+media-xs
			svg
				fill: $color-danger !important

		padding: 0 5px

		&:hover svg
			fill: $color-danger

		svg
			fill: lighten($color-text-dark-primary, 20%)
			max-width: 10px

	a, a:visited
		color: $color-text-dark-secondary
		padding-left: 5px

	span
		+media-xs
			display: block
