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


/**
* Define CSS variables to allow child themes
* to alter these values easily if needed.
**/
:root {
	--bu_blocks-block-click-tweet-color-highlight: #def0f6;
	--bu_blocks-block-click-tweet-color-icon: #0587B8;
	--bu_blocks-block-click-tweet-color-button: #0587B8;
}

[data-type="core/paragraph"].wp-block-bu-clicktotweet.has-format-highlight .wp-block-bu-clicktotweet-highlight {
	background: var(--bu_blocks-block-click-tweet-color-highlight);

	&::after {
		color: var(--bu_blocks-block-click-tweet-color-icon);
		content: "\f301";
		font-family: "dashicons";
	}
}

[data-type="core/paragraph"]:not(.is-selected).wp-block-bu-clicktotweet:not(.has-format-highlight) {

	.wp-block-bu-clicktotweet-content {
		&::before {
			content: '';
			border: 1px dashed gray;
			border-color: var(--bu_blocks-block-click-tweet-color-button);
			display: block;
			position: absolute;
			left: -15px;
			top: -15px;
			bottom: -15px;
			right: -15px;
		}

		&::after {
			background: var(--bu_blocks-block-click-tweet-color-button);
			bottom: -15px;
			color: #fff;
			content: "tweet this";
			display: block;
			font-family: sans-serif;
			font-size: 13px;
			padding: 5px;
			position: absolute;
			right: -15px;
		}
	}

}