@use "~@wordpress/base-styles/colors" as wp-colors;

.editor-styles-wrapper .wp-block-newspack-newsletters-subscribe {
	form {
		input[type="text"],
		input[type="email"] {
			background: #fff;
			border: solid 1px #ddd;
			box-sizing: border-box;
			outline: none;
			padding: 0.36rem 0.66rem;
			appearance: none;
			outline-offset: 0;
			border-radius: 0;
			font-size: 1rem;
		}
		input[type="checkbox"] {
			background: #fff;
			border: 1px solid #ddd;
			box-shadow: none;
			appearance: none;
			display: inline-grid;
			height: 20px !important;
			margin: 2px 0 0;
			place-content: center;
			width: 20px !important;

			&::before {
				background:
					transparent
					url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white' %3E%3C/path%3E%3C/svg%3E")
					0 0 no-repeat;
				content: "";
				height: 24px;
				margin: 0;
				width: 24px;
			}

			&:checked {
				background: #1e1e1e;
				border-color: #1e1e1e;
			}

			&:focus {
				box-shadow: none;
			}
		}
		[type="submit"],
		.submit-button {
			transition: background 150ms ease-in-out;
			background: #d33;
			border: none;
			border-radius: 5px;
			box-sizing: border-box;
			color: #fff;
			font-family: var(--newspack-theme-font-heading);
			font-size: 1rem;
			font-weight: 700;
			line-height: 1.2;
			outline: none;
			padding: 0.76rem 1rem;
			place-items: center;
			text-decoration: none;
			display: grid;
			width: 100%;
			text-align: center;
			@media ( min-width: 782px ) {
				width: auto;
			}
		}
	}
	.newspack-newsletters-subscribe__state-bar {
		align-items: center;
		background: white;
		border: 1px solid wp-colors.$gray-900;
		border-radius: 2px;
		color: wp-colors.$gray-900 !important;
		display: none;
		font-family: system-ui, sans-serif;
		flex-wrap: wrap;
		font-size: 13px;
		gap: 8px;
		justify-content: space-between;
		line-height: 1.4;
		margin-bottom: 12px;
		padding: 7px 8px;
		button {
			box-shadow: none !important;
			color: wp-colors.$gray-900 !important;
			height: 32px !important;
			&[data-is-active="true"] {
				background-color: wp-colors.$gray-900;
				color: white !important;
			}
			&:hover:not([data-is-active="true"]) {
				color: var(--wp-admin-theme-color) !important;
			}
		}
		span {
			font-weight: 500;
		}
		div {
			display: flex;
			gap: 4px;
		}
	}

	&.is-style-modern {
		.newspack-newsletters-subscribe__response {
			padding: 24px;

			@media ( min-width: 782px ) {
				padding: 48px;
			}
		}
	}

	&.is-selected {
		.newspack-newsletters-subscribe__state-bar {
			display: flex;
		}
	}
}

.editor-styles-wrapper {
	// stylelint-disable-next-line no-invalid-position-at-import-rule,import-notation
	@import "style";
}

// Remove padding around the nested Color Palette
.components-panel__body.styles-container .components-tools-panel {
	border: 0;
	padding: 0;
}
