style.scss

.components-panel {
	background: $white;
	border: $border-width solid $gray-200;

	> .components-panel__header:first-child,
	> .components-panel__body:first-child {
		margin-top: -1px;
	}

	> .components-panel__header:last-child,
	> .components-panel__body:last-child {
		border-bottom-width: 0;
	}
}

.components-panel + .components-panel {
	margin-top: -1px;
}

.components-panel__body {
	border-top: $border-width solid $gray-200;
	border-bottom: $border-width solid $gray-200;

	h3 {
		margin: 0 0 0.5em;
	}

	&.is-opened {
		padding: $grid-unit-20;
	}
}

.components-panel__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 $grid-unit-20;
	border-bottom: $border-width solid $gray-300;

	// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
	box-sizing: content-box;
	height: $grid-unit-60 - $border-width;

	h2 {
		margin: 0;
		font-size: inherit;
		color: inherit;
	}
}

.components-panel__body + .components-panel__body,
.components-panel__body + .components-panel__header,
.components-panel__header + .components-panel__body,
.components-panel__header + .components-panel__header {
	margin-top: -$border-width;
}

.components-panel__body > .components-panel__body-title {
	display: block;
	padding: 0;
	font-size: inherit;
	margin-top: 0;
	margin-bottom: 0;
	transition: 0.1s background ease-in-out;
	@include reduce-motion("transition");
}
.components-panel__body.is-opened > .components-panel__body-title {
	margin: -1 * $grid-unit-20;
	margin-bottom: 5px;
}

// Hover States
.components-panel__body > .components-panel__body-title:hover {
	// Override the default button hover style
	background: $gray-100;
	border: none;
}

.components-panel__body-toggle.components-button {
	position: relative;
	padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
	outline: none;
	width: 100%;
	font-weight: 500;
	text-align: left;
	color: $gray-900;
	border: none;
	box-shadow: none;
	transition: 0.1s background ease-in-out;
	@include reduce-motion("transition");
	height: auto;

	&:focus {
		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
		border-radius: 0;
	}

	.components-panel__arrow {
		position: absolute;
		right: $grid-unit-20;
		top: 50%;
		transform: translateY(-50%);
		color: $gray-900;
		fill: currentColor;
		transition: 0.1s color ease-in-out;
		@include reduce-motion("transition");
	}

	// mirror the arrow horizontally in RTL languages
	/* rtl:begin:ignore */
	body.rtl & .dashicons-arrow-right {
		transform: scaleX(-1);
		-ms-filter: fliph;
		filter: FlipH;
		margin-top: -10px;
	}
	/* rtl:end:ignore */
}

.components-panel__icon {
	color: $gray-700;
	margin: -2px 0 -2px 6px;
}

.components-panel__body-toggle-icon {
	margin-right: -5px;
}

.components-panel__color-title {
	float: left;
	height: 19px;
}

.components-panel__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: $grid-unit-10;
	min-height: $button-size;

	select {
		// Necessary for select to respond to flexbox
		min-width: 0;
	}

	label {
		margin-right: $grid-unit-15;
		flex-shrink: 0;
		max-width: 75%;
	}

	&:empty,
	&:first-of-type {
		margin-top: 0;
	}
}

.components-panel .circle-picker {
	padding-bottom: 20px;
}