// =================================================================
// Collapsible Settings
// =================================================================

// Collapsible Icon Color
//
// Controls the color of icons on collapsibles.
//
// Styleguide WordPress.Collapsible.Icon Color
//
// Access: Public
//
// Since: 2.0.0

$color-collapsible-icon:           $color-icons !default;

// Collapsible Icon Hover Color
//
// Controls the color of icons on collapsibles when you hover.
//
// Styleguide WordPress.Collapsible.Icon Hover Color
//
// Access: Public
//
// Since: 2.0.0

$color-collapsible-icon-hover:     $color-link !default;

// Collapsible Border
//
// Controls the border between collapsibles.
//
// Styleguide WordPress.Collapsible.Border
//
// Access: Public
//
// Since: 2.0.0

$border-collapsible:               $border !default;

// =================================================================
// Collapsible Styles
// =================================================================

// Styles a collapsible item.
//
// Access: Public
//
// Since: 1.0.0

.bu_collapsible_container {
	border: var(--collapsible-border, var(--bu-border, #{$border-collapsible}));
	padding: var(--collapsible-padding, 0.5em 0);
	position: relative;
}

// Styles the header on a collapsible item.
//
// Access: Public
//
// Since: 1.0.0

.bu_collapsible {
	@extend %icon-plus;
	margin-bottom: 0;
	padding-right: var(--collapsible-padding, var(--bu-spacing, #{$padding}));
	position: relative;

	&::before {
		color: var(--collapsible-icon-color, var(--bu-icon-color, #{$color-collapsible-icon}));
		font-size: 16px;
		margin-top: -10px;
		position: absolute;
		right: 7px;
		top: 50%;
	}

	&:hover,
	&:focus {
		&::before {
			color: var(--collapsible-icon-color--hover, #{$color-collapsible-icon-hover});
		}
	}

	.bu_collapsible_open > & {
		@extend %icon-hyphen;
	}
}

// Print styles for collapsibles.
//
// Access: Public
//
// Since: 1.0.0

@media print {
	.bu_collapsible_section {
		display: block !important; // important required to override inline styles added by JS
	}
}