_details.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
 */

/* details polyfill */

/* <details> and <summary> are block level elements */
%pe-details-display-block {
    display: block;
}

%pe-details-opened {
	&:before { /* Add the opened pointer */
		content: "\25BC\a0";
	}
}

summary {
	@extend %pe-details-display-block;
	cursor: pointer; /* Apply a pointer cursor upon hover to indicate it’s a clickable element. These styles can be applied regardless of whether the fallback is needed */
	@include pseudo-focus { /* Add focus styles (for keyboard accessibility) */
		background: #ddd;
	}
}

/* Only get applied if JavaScript is enabled and <details> is not natively supported */
details {
	@extend %pe-details-display-block;
	summary { /* Make sure summary remains visible */
		display: block !important;
		background: transparent
	}
	&.polyfill {
		> {
			summary {
				&:before { /* Add the closed pointer */
					content: "\25BA\a0";
				}
			}
		}
		&.open {
			> {
				summary {
					@extend %pe-details-opened;
				}
			}
		}
	}
	&[open] {
		&.polyfill {
			> {
				summary {
					&:not([role=button]) {
						@extend %pe-details-opened;
					}
				}
			}
		}
	}
	&:not([open]) {
		> {
			* {
				display: none;
			}
		}
	}
}

.no-js {
	details {
		> {
			* {
				@extend %pe-details-display-block;
			}
		}
		&:not([open]) {
			> {
				* {
					@extend %pe-details-display-block;
				}
			}
		}
	}
	summary {
		cursor: auto;
		@include pseudo-focus {
			background: none;
		}
	}
}

/* Right to left (RTL) CSS */
[dir="rtl"] {
	details {
		&.polyfill {
			> {
				summary {
					&:before { /* Add the close pointer */
						content: "\25C0\a0";
					}
				}
			}
		}
	}
}