@use "sass:string";

@function x($var-name, $fallback) {

	@return string.unquote("var(#{$var-name}, #{$fallback})");
}

.is-style-compact {

	.is-not-subscriber {

		.wp-block-jetpack-subscriptions__button,
		.wp-block-button__link {
			margin-inline-start: 0 !important;
			border-start-start-radius: 0 !important;
			border-end-start-radius: 0 !important;
		}

		.components-text-control__input,
		p#subscribe-email input[type="email"] {
			border-start-end-radius: 0 !important;
			border-end-end-radius: 0 !important;
		}
	}

	&:not(.wp-block-jetpack-subscriptions__use-newline) .components-text-control__input {
		border-inline-end-width: 0 !important;
	}
}

.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline {

	.wp-block-jetpack-subscriptions__form-container {
		display: flex;
		flex-direction: column;
	}

	&:not(.wp-block-jetpack-subscriptions__use-newline) {

		.is-not-subscriber {

			.wp-block-jetpack-subscriptions__form-elements {
				display: flex;
				align-items: flex-start;
			}
		}

		p#subscribe-submit {
			justify-content: center;
			display: flex;
		}
	}

	.wp-block-jetpack-subscriptions__form,
	form {

		.wp-block-jetpack-subscriptions__textfield .components-text-control__input,
		.wp-block-jetpack-subscriptions__button,
		input[type="email"],
		button {
			line-height: 1.3;
			box-sizing: border-box;

			/*
			 * These next two rules override the default styles for RichText component
			 * which is used for the button label coming from
			 * https://github.com/WordPress/gutenberg/blob/b9232527214cd3d523badc4a66b529b7efe615ca/packages/rich-text/src/component/use-default-style.js.
			 */
			white-space: nowrap !important;
			min-width: auto !important;
			cursor: pointer;
		}

		input[type="email"]::placeholder,
		input[type="email"]:disabled {
			color: currentColor;
			opacity: 0.5;
		}

		.wp-block-jetpack-subscriptions__button,
		button {
			border-style: solid;
			border-color: transparent;
		}

		.wp-block-jetpack-subscriptions__textfield,
		p#subscribe-email {
			flex-grow: 1;
			background: transparent;

			.components-base-control__field,
			.components-text-control__input,
			input[type="email"] {
				width: 100%;
				margin: 0;
				height: auto;
			}
		}

		p#subscribe-submit,
		p#subscribe-email {
			margin: 0;
			padding: 0;
			line-height: 0;
		}
	}

	&.wp-block-jetpack-subscriptions__show-subs {

		.wp-block-jetpack-subscriptions__subscount {
			margin: 8px 0;
			font-size: 16px;
			text-align: end;
		}
	}

	&.wp-block-jetpack-subscriptions__use-newline {

		.wp-block-jetpack-subscriptions__form-elements {
			display: block;
		}

		.wp-block-jetpack-subscriptions__button,
		button {
			display: inline-block;
			max-width: 100%;
		}

		.wp-block-jetpack-subscriptions__subscount {
			text-align: start;
		}
	}
}

#subscribe-submit.is-link {
	text-align: center;
	width: auto !important;

	a {
		width: auto !important;
		margin-left: 0 !important;
		margin-top: 0 !important;
	}
}
