@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

/** Notices close button **/
.wp-block-premium-content-container .components-notice-list .components-notice__content {
	margin: 0;
}

/** Subscribe button **/
.wp-block-premium-content-logged-out-view .wp-block-jetpack-recurring-payments {
	--jetpack-payment-buttons-gap: 0.5em;

	display: inline-block;
	margin-inline-end: 0.5em;
}

/* Login button */
.wp-block-premium-content-login-button.aligncenter {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-premium-content-login-button.alignright {
	float: right;
}

%button-outline-style {
	background-color: unset;
	color: gb.$gray-800;
}

.wp-block-premium-content-login-button,
.wp-block-jetpack-button {

	&.is-style-outline {

		.wp-block-button__link {

			@extend %button-outline-style;
		}
	}
}

/* Legacy Subscribe/Login buttons */

.wp-block-premium-content-logged-out-view__buttons {
	display: flex;
	margin-top: 20px;
}

.wp-block-premium-content-logged-out-view__buttons .wp-block-button__link {
	margin-inline-end: 20px;
}

@media ( min-width: 660px ) {

	.wp-block-premium-content-logged-out-view__buttons .wp-block-button__link {
		min-width: 200px;
	}
}
