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

.wp-block-legacy-widget__edit-form {
	&:not([hidden]) {
		display: flow-root;
	}
	background: $white;
	border-radius: $radius-small;
	border: $border-width solid $gray-900;
	padding: $grid-unit-15 - $border-width;
	max-height: calc(100vh - #{ $border-width } - #{ $border-width });
	overflow-y: scroll;

	.wp-block-legacy-widget__edit-form-title {
		color: $black;
		font-family: $default-font;
		font-size: 14px;
		font-weight: var(--wpds-typography-font-weight-emphasis);
		margin: 0 0 $grid-unit-15 0;
	}

	.widget-inside.widget-inside {
		border: none;
		box-shadow: none;
		display: block;
		font-family: $font-family-body;

		p {
			margin: $grid-unit-10 0;
		}

		label {
			font-size: $default-font-size;
			line-height: $default-line-height * 1.5;
		}

		// Override theme style bleed.
		label,
		input,
		a {
			font-family: system-ui;
			font-weight: normal;
			color: $black;
		}
		input[type="text"],
		input[type="password"],
		input[type="date"],
		input[type="datetime"],
		input[type="datetime-local"],
		input[type="email"],
		input[type="month"],
		input[type="number"],
		input[type="search"],
		input[type="tel"],
		input[type="time"],
		input[type="url"],
		input[type="week"],
		select {
			font-family: system-ui;
			background-color: transparent;
			box-sizing: border-box;
			border: $border-width solid $gray-700;
			border-radius: 3px;
			box-shadow: none;
			color: $black;
			display: block;
			margin: 0;
			width: 100%;
			font-size: $default-font-size;
			font-weight: normal;
			line-height: 1;
			min-height: 30px;
			padding-left: $grid-unit-10;
			padding-top: $grid-unit;
			padding-bottom: $grid-unit;
		}
		select {
			padding-left: $grid-unit-05;
		}
	}

	// Reset z-index set on https://github.com/WordPress/wordpress-develop/commit/f26d4d37351a55fd1fc5dad0f5fef8f0f964908c.
	.widget.open,
	.widget.open:focus-within {
		z-index: 0;
	}
}

// Make sure edit form text and no preview warning are always visible.
.wp-block-legacy-widget__edit-form.wp-block-legacy-widget__edit-form,
.wp-block-legacy-widget__edit-no-preview.wp-block-legacy-widget__edit-no-preview {
	color: $black;
}

.wp-block-legacy-widget__edit-preview,
.wp-block-legacy-widget__edit-no-preview {
	cursor: var(--wpds-cursor-control);

	&:hover::after {
		border-radius: $radius-small;
		border: $border-width solid $gray-600;
		bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	}
}

.wp-block-legacy-widget__edit-preview.is-offscreen {
	left: -9999px;
	position: absolute;
	top: 0;
	width: 100%;
}

.wp-block-legacy-widget__edit-preview-iframe {
	overflow: hidden;
	width: 100%;
}

.wp-block-legacy-widget__edit-no-preview.wp-block-legacy-widget__edit-no-preview.wp-block-legacy-widget__edit-no-preview {
	&,
	& h3,
	& p {
		font-family: $default-font;
		font-size: $default-font-size;
	}

	background: $gray-100;
	padding: $grid-unit-10 $grid-unit-15;

	h3 {
		font-size: 14px;
		font-weight: var(--wpds-typography-font-weight-emphasis);
		margin: $grid-unit-05 0;
	}

	p {
		margin: $grid-unit-05 0;
	}
}

.wp-block-legacy-widget-inspector-card {
	// Padding left = an icon, some margin and some padding
	padding: 0 $grid-unit-20 $grid-unit-20 ( $grid-unit-20 + $icon-size + $grid-unit-15 );
}

.interface-complementary-area .wp-block-legacy-widget-inspector-card__name {
	margin: 0 0 5px;
	font-weight: var(--wpds-typography-font-weight-emphasis);
}

// When wide widget is selected it opens in a popover but its container should still have a bit of height.
.is-selected {
	.wp-block-legacy-widget__container {
		padding: $grid-unit-10 $grid-unit-15;
		min-height: 50px;
	}
}

// Wide widgets opening in popovers in the Customizer should have a min-width
.components-popover__content .wp-block-legacy-widget__edit-form {
	min-width: 400px;
}