/* wc.ui.collapsible.scss */
// WCollapsible is a component which consists of a header element and content. The content is shown or hidden according
// to the state of the collapsible. This is a close map of the HTML5 details element in which the header is a summary
// element.

// We only have to style immediate child elements of the collapsible container. In an ideal world we would not even have
// to do this but so far only webkit has native support for <details> and that is still flawed.

// The styles here are purposely minimal and will give you a DETAILS element pretty much like a Chrome default.

@import 'mixins-common';

details,
summary {
	display: block;
}

summary {
	@if ($wc-ui-color-collapsible-header-bg != -1) {
		background-color: $wc-ui-color-collapsible-header-bg;
	}
	@if ($wc-ui-color-collapsible-header-fg != -1) {
		color: $wc-ui-color-collapsible-header-fg;
	}
	cursor: pointer;
	font-weight: bold;
	padding: $wc-gap-normal 0;

	> h1,
	> h2,
	> h3,
	> h4,
	> h5,
	> h6 {
		@include tight-box;
		@if ($wc-ui-color-collapsible-header-fg != $wc-ui-color-heading and $wc-ui-color-collapsible-header-fg != -1) {
			// override default heading colour;
			color: $wc-ui-color-collapsible-header-fg;
		}
		display: inline-block;
		font-size: inherit;
		font-weight: bold;
		vertical-align: text-top;
		width: calc(100% - $wc-icon-normal); // allow for the iconography
	}
}

// content of the collapsible
div[aria-describedby] {
	details > & {
		display: none;
	}

	[open] > & {
		display: block;
	}
}

@import 'wc.ui.collapsibleIcons';
