/**
 * #.# Editor Styles
 *
 * CSS for just Backend enqueued after style.scss
 * which makes it higher in priority.
 */

// Add missing icon in admin.
@font-face {
	font-family: "bu-default-icons";
	src: url("//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.eot?") format("embedded-opentype");
	src: url("//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.woff") format("woff"), url("//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.ttf") format("truetype"), url("//www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.svg#bu-default-icons") format("svg");
	font-weight: normal;
	font-style: normal;
}

// Sidebar custom Icon Style Panel. Load BU icons
// so buttons are styled with correct icons.
.bu-collapsible-icon-style-button button {
	font-family: "bu-default-icons";
}

// Open state, when block is selected or has a child block selected
// This has to be higher specificity than the frontend styles when loaded via `add_editor_style()`.
// This is because in WordPress 5.7 the Editor Styles are still Prefixed with a class of `.editor-styles-wrapper`
// That bumps up the specificity. Later versions of WP fix this by using :where() for Editor Styles.
[data-type="bu/collapsible"].wp-block-bu-collapsible.is-selected,
[data-type="bu/collapsible"].wp-block-bu-collapsible.has-child-selected {

	& > .bu-block-collapsible-content {
		display: block;
		padding: 5px 20px;
		height: auto; //Override is-style-preview value.
		overflow: auto; //Override is-style-preview value.
		position: static; //Override is-style-preview value.

		&:after {
			display: none; //Override is-style-preview value.
		}
	}

	& > .bu-collapsible-heading::after {
		content: '\002D';
	}

	&.icon-style-arrows > .bu-collapsible-heading::after {
		content: '\F500';
	}

	& > .bu-collapsible-heading {
		display: block;
		border-bottom: 1px solid #ccc;
	}

	&.is-style-preview .bu-collapsible-heading {
		border-bottom: 0;
	}

	& > .bu-collapsible-heading::after {
		content: '\002D';
	}

	&.icon-style-arrows > .bu-collapsible-heading::after {
		content: '\F500'
	}
}

.wp-block-bu-collapsible {

	.bu-collapsible-heading {
		margin: 0;
	}

	&.is-style-preview {
		border: none;
		position: relative;
		margin-bottom: $margin;

		// Don't show any icons to open/collapse.
		> .bu-collapsible-heading::after {
			display: none;
		}

		.bu-block-collapsible-content {
			padding: 0;
			display: block;
			height: 100px;
			overflow: hidden;
			position: relative;

			&:after {
				content:'';
				height: 50%;
				position: absolute;
				bottom:0;
				left: 0;
				right: 0;
				background-image: linear-gradient(to bottom, transparent, #fff);
			}
		}
	}
}