@use "@wordpress/base-styles/variables" as *;
@use "@wordpress/base-styles/colors" as *;

.block-editor-block-card {
	color: $gray-900;
	padding: $grid-unit-20;

	&.is-parent {
		padding-bottom: $grid-unit-05;
	}

	&.is-child {
		padding-top: $grid-unit-05;
	}
}

.block-editor-block-card__parent-select-button {
	padding: 0;
	align-items: start;
	text-align: start;
	height: auto !important;
}

.block-editor-block-card__title {
	font-weight: $font-weight-medium;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc($grid-unit-10 / 2) $grid-unit-10;

	&.block-editor-block-card__title {
		font-size: $default-font-size;
		line-height: $default-line-height;
		margin: 0;
	}
}

.block-editor-block-card__name {
	padding: 3px 0; // This makes the title as high as the icon.
}

.block-editor-block-card .block-editor-block-icon,
.block-editor-block-card__child-indicator-icon {
	flex: 0 0 $button-size-small;
	margin-left: 0;
	margin-right: $grid-unit-15;
	width: $button-size-small;
	height: $button-size-small;
}

.block-editor-block-card.is-synced .block-editor-block-icon {
	color: var(--wp-block-synced-color);
}