@use "../../shared/styles/align";

// This level of CSS specificity is required to overwrite existing styles
.editor-styles-wrapper .block-editor-block-list__block.wp-block-jetpack-button {

	@include align.align-block;
	max-width: 100%;
	width: fit-content;
	margin: 0;

	&.is-style-outline > .wp-block-button__link {
		background-color: transparent;
		border: solid 1px currentColor;
		color: currentColor;
	}
}

.editor-styles-wrapper .block-editor-block-list__block.wp-block-jetpack-button[style*="width:"] .wp-block-button__link {
	width: 100%;
}

// Support align feature for older themes
.wp-block[data-align]:has(> .wp-block-jetpack-button) {
	margin-left: 0;
	margin-right: 0;
}

.wp-block[data-align] > .wp-block-jetpack-button {
	display: block;
}

.wp-block[data-align="center"] > .wp-block-jetpack-button {
	margin-left: auto;
	margin-right: auto;
}

.wp-block[data-align="left"] > .wp-block-jetpack-button {
	margin-right: auto;
}

.wp-block[data-align="right"] > .wp-block-jetpack-button {
	margin-left: auto;
}
