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

.entities-saved-states__panel-header {
	box-sizing: border-box;
	background: $white;
	padding-left: $grid-unit-20;
	padding-right: $grid-unit-20;
	height: $header-height;
	border-bottom: $border-width solid $gray-300;
}

.entities-saved-states__text-prompt {
	padding: $grid-unit-20;
	padding-bottom: $grid-unit-05;
	.entities-saved-states__text-prompt--header {
		display: block;
		margin-bottom: $grid-unit-15;
	}
}

.entities-saved-states__panel.is-inline {
	.entities-saved-states__text-prompt {
		padding: 0;
	}

	.entities-saved-states__panel-body {
		padding-left: 0;
		padding-right: 0;
		border: 0;

		> h2 {
			margin-left: -1 * $grid-unit-20;
			margin-right: -1 * $grid-unit-20;
			margin-bottom: 0;

			button {
				font-size: $font-size-x-small;
				text-transform: uppercase;
			}
		}
	}

	.entities-saved-states__text-prompt--header-wrapper {
		display: none;
	}

	.entities-saved-states__text-prompt--changes-count {
		margin-top: 0;
		margin-bottom: $grid-unit-10;
	}

	.entities-saved-states__panel-footer {
		margin-top: $grid-unit-20;
	}
}

.entities-saved-states__change-control {
	flex: 1;
}

.entities-saved-states__changes {
	font-size: $default-font-size;
	margin: $grid-unit-05 $grid-unit-20 0 $grid-unit-30;
	list-style: disc;

	li {
		margin-bottom: $grid-unit-05;
	}
}