/*
 * Main component.
 */
#comcon-admin .components-base-control__label {
	font-weight: 700;
	font-size: 1.4em;

	/* todo maybe hide this if it's inside a card? */
}

#comcon-admin blockquote {
	min-height: 8em; /* Always be as big as will be needed for the largest quote, since otherwise the rapid resizing while sliding the control is visually jarring. */

		/* todo that's 4 lines of text, which works at desktop but not lower. maybe use media queries of JS to set to right height based on how many lines X chars would take up in the current size? calc() or something? */
		/* longest entry is 280 characters, and need to figure out how many lines that will take up given the current width of the blockquote
		maybe create a hidden div inside the card, then set the content to be 280 chars long, the get the height?

		probably not an elegant way to do this, maybe just stick w/ 8em since it's big enough for all breakpoints. not perfect but simple.
		*/
	padding: 7px 8px;
	margin: 5px 1px 0;
	background: rgba( 0, 0, 0, .05 );
	font-style: italic;
	word-break: break-word;
}

#comcon-admin__settings {
	margin-bottom: 2em;
}

	@media screen and ( min-width: 800px ) {
		#comcon-admin__settings {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 20px;
		}
	}

	@media screen and ( min-width: 1400px ) {
		#comcon-admin__settings {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 20px;
		}
	}


/*
 * Card component.
 *
 * Styles mostly borrowed from `Modal`
 *
 * See https://github.com/WordPress/gutenberg/issues/15921.
 */
.comcon-admin__card {
	margin-bottom: 2em;
	border: 1px solid #e2e4e7;
	background: #fff;
	box-shadow: 0 2px 8px rgba( 25, 30, 35, .2 );
}

	@media screen and ( min-width: 800px ) {
		.comcon-admin__card {
			margin-bottom: 0;
		}
	}

.comcon-admin__card-header {
	padding: 1em;
	margin: 0;
	border-bottom: 1px solid #e2e4e7;
}

.comcon-admin__card-content {
	padding: 1em;
}

.comcon-admin__card-content p:first-child {
	margin-top: 0;
}

.comcon-admin__card-content .components-base-control__label {
	display: none; /* This is a duplicate of the Card title. */
	/* todo is there a better way to solve ^ ? see comments in view */
}

.comcon-admin__card-content .notice {
	margin-top: 20px;
	border-top: 1px solid rgba( 0, 0, 0, .05 );
}