/* 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.scss';

details,
summary {
	display: block;
}

summary {
	cursor: pointer;
	font-weight: bold;
	padding: $hgap-normal 0;

	&::before {
		@include make-box;
		@include background-image('../images/next.png', $height: 1em, $width: 1em);
		content: ' ';
		margin-right: $hgap-small;
		vertical-align: text-top;

		[open] > & {
			background-image: url('../images/down.png');
		}
	}

	> h1,
	> h2,
	> h3,
	> h4,
	> h5,
	> h6 {
		color: $wc-ui-color-global-fg;
		display: inline-block;
		font-size: 1em;
		font-weight: bold;
		margin: 0;
		padding: 0;
		vertical-align: text-top;
		width: calc(100% - 2em);
	}
}


// content of the collapsible NOTE: this is currently wrapped in a div but this could be > * with an override for
// summary::first-of-type
div {
	details > & {
		display: none;
	}

	[open] > & {
		display: block;

		&[aria-busy='true'] {
			min-height: 16px;
		}
	}
}

::-webkit-details-marker { // remove the default summary marker from webkit browsers
	display: none;
}
/* end wc.ui.collapsible.scss */
