/*
  WET-BOEW
  @title: Details/summary polyfill pre-Modernizr CSS
 */

summary {
	// Make sure summary remains visible
	display: list-item !important;
	list-style-type: none; // Prevent list bullets from appearing in browsers that lack native details/summary support (e.g. IE/Edge)
	list-style-type: disclosure-closed; // Show summary arrows in Firefox 49.0+ and future versions of Blink/Webkit
	visibility: visible !important;
}

%details-nested-in-hidden-details {
	details {
		summary {
			display: none !important;
		}
	}
}

details {
	margin-bottom: .25em;

	summary {
		border: 1px solid #ddd;
		border-radius: 4px;
		color: #295376;
		padding: 5px 15px;

		&:focus,
		&:hover {
			background-color: transparent;
			color: #0535d2;
			text-decoration: underline;
		}

		&:focus {
			outline-style: dotted;
			outline-width: 1px;
		}
	}

	&[open] {
		border: 1px solid #ddd;
		border-radius: 4px;

		> {
			summary {
				border: 0;
				border-bottom: 1px solid #ddd;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				list-style-type: disclosure-open;
				margin-bottom: .25em;
			}
		}
	}

	// Prevent FOUC
	&:not([open]) {
		@extend %details-nested-in-hidden-details;
		visibility: hidden;

		> {
			// Need details and * to deal with specificity issues
			details,
			* {
				display: none;
			}
		}
	}

	&.alert {
		&:not([open]) {
			visibility: visible;
		}
	}

	.out {
		@extend %details-nested-in-hidden-details;
	}
}

.tabpanels {
	> {
		details {
			&:not([open]) {
				visibility: visible;
			}
		}
	}
}

// Prevent FOUC when polyfill is disabled
.wb-disable {
	details {
		visibility: visible !important;

		> {
			*:not(summary) {
				display: block !important;
			}
		}
	}
}