_footnotes.scss

/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */
@import "compass/css3/inline-block";
@import '../../../grids/sass/includes/mixins';

/*SCSS Variables*/
$spacing: .375em;
$ddRtnWidth: 2.75em;
$clrWhite: #FFF;
$clrLight: #EEE;
$clrMedium: #CCC;
$clrDark: #555;

/*Default SCSS*/
%footnote-link-highlight {
	color: $clrWhite !important;
	background-color: $clrDark;
	border-color: $clrDark;
	text-shadow: none !important;
}
%footnote-link-background-white {
	background-color: $clrWhite;
}
.footnote-link, .wet-boew-footnotes .footnote-return a {
	background-color: $clrLight;
	border: 1px solid $clrMedium;
	padding: 0 4px 1px;
	white-space: nowrap;
	@include pseudo-focus {
		@extend %footnote-link-highlight;
	}
}
.background-light {
	.footnote-link {
		@extend %footnote-link-background-white;
		@include pseudo-focus {
			@extend %footnote-link-highlight;
		}
	}
}
table {
	.footnote-link {
		@extend %footnote-link-background-white;
		text-shadow: none;
	}
}
.wet-boew-footnotes {
	margin: 2em 10px 0 10px;
	border: {
		width: 1px 0 1px 0;
		style: solid;
		color: $clrMedium;
	}
	h2 {
		margin: {
			left: 0;
			right: 0;
			top: 0;
		}
	}
	dl {
		margin: 0;
	}
	dt {
		position: absolute;
		@include clip-rect;
		height: 1px;
		width: 1px;
		overflow: hidden;
		margin: 0;
	}
	dd {
		position: relative;
		margin: $spacing 0;
		border: 1px solid transparent;
		@include pseudo-focus(false) {
			background-color: $clrLight;
			border-color: $clrDark;
			.footnote-return {
				a {
					@extend %footnote-link-highlight;
				}
			}
		}
	}
	p {
		margin: 0 0 0 ($spacing + $ddRtnWidth);
		padding: 0 $spacing $spacing $spacing;
		&:first-child {
			padding-top: $spacing;
		}
		&.footnote-return {
			top: 0;
			margin: 0;
			padding-top: $spacing;
			padding-right: 0;
			position: absolute;
			width: $ddRtnWidth;
			overflow: hidden;
			a {
				@include inline-block;
				padding-bottom: 0;
			}
		}
	}
}

/*Print SCSS*/
@media print {
	%footnote-link-background-transparent {
		background-color: transparent;
	}
	.footnote-link, .wet-boew-footnotes .footnote-return a {
		background-color: transparent;
		border: 0;
		padding: 0;
	}
	.background-light {
		.footnote-link {
			@extend %footnote-link-background-transparent;
		}
	}
	table {
		th {
			.footnote-link {
				@extend %footnote-link-background-transparent;
			}
		}
	}
	.wet-boew-footnotes {
		border: {
			left: 0;
			right: 0;
		}
		margin: {
			left: 0;
			right: 0;
			bottom: 1em;
		}
		dd {
			border: 0;
			width: 100%;
			@include inline-block;
		}
		.footnote-return {
			overflow: visible;
		}
	}
}