/*
 * 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 "../../variables";

%fnote-link-highlight {
	background-color: $clrDark;
	border-color: $clrDark;
	color: $clrWhite !important;
}

%fnote-link-background-light-border-medium-padding-whitespace {
	background-color: $clrLight;
	border: 1px solid $clrMedium;
	display: inline-block;
	padding: 1px 10px 2px;
	white-space: nowrap;
}

%fnote-margin-top-spacing {
	margin-top: $spacing;
}

.fn-lnk {
	@extend %fnote-link-background-light-border-medium-padding-whitespace;
	line-height: 1.15;
	margin-left: 5px;

	&:hover,
	&:focus {
		@extend %fnote-link-highlight;
	}
}

.wb-fnote {
	border-color: $clrMedium;
	border-style: solid;
	border-width: 1px 0;
	margin: 2em 0 0;

	h2 {
		@extend %fnote-margin-top-spacing;
		margin-left: 0;
		margin-right: 0;
	}

	dl {
		margin: 0;
	}

	dt {
		@extend %accessible-invisible;
	}

	dd {
		border: 1px solid transparent;
		margin: $spacing 0;
		position: relative;

		&:focus {
			background-color: $clrLight;
			border-color: $clrDark;

			.fn-rtn {
				a {
					@extend %fnote-link-highlight;
				}
			}
		}

		> {
			ul,
			ol {
				margin: 0 $spacing $spacing (($spacing * 2) + $ddRtnWidth);

				&:first-child {
					@extend %fnote-margin-top-spacing;
				}
			}
		}
	}

	p {
		margin: 0 0 0 ($spacing + $ddRtnWidth);
		padding: 0 $spacing $spacing;

		&:first-child {
			margin-top: .11em;
			padding-top: $spacing;
		}
	}

	ul,
	ol {
		margin-bottom: $spacing;
	}

	table {
		margin: 0 $spacing $spacing (($spacing * 2) + $ddRtnWidth);

		&:first-child {
			@extend %fnote-margin-top-spacing;
		}
	}

	.fn-rtn {
		margin: 0;
		overflow: hidden;
		padding-right: 0;
		padding-top: $spacing;
		position: absolute;
		top: 0;
		width: $ddRtnWidth;

		a {
			@extend %fnote-link-background-light-border-medium-padding-whitespace;
			display: inline-block;
			margin-top: 0;
			padding-bottom: 0;

			&:hover,
			&:focus {
				@extend %fnote-link-highlight;
			}
		}
	}
}

/* Right to left (RTL) SCSS */
[dir="rtl"] {
	sup {
		.fn-lnk {
			margin-left: 0;
			margin-right: 5px;
		}
	}

	.wb-fnote {
		p {
			margin: 0 ($spacing + $ddRtnWidth) 0 0;
		}

		.fn-rtn {
			margin-right: 0;
			padding-right: 0;
		}
	}
}