// This variable is repeated across Button, Buttons, and Buttons editor styles.
$blocks-block__margin: 0.5em;

.wp-block-buttons {
	// Override editor auto block margins for button as well as the block appender.
	> .wp-block {
		margin: 0;
	}

	// Specificity needed in some themes to override editor auto block margins for the button.
	> .wp-block-button.wp-block-button.wp-block-button.wp-block-button.wp-block-button {
		margin: 0;
	}

	> .block-list-appender {
		display: inline-flex;
		align-items: center;
	}
	&.is-vertical {
		> .block-list-appender .block-list-appender__toggle {
			justify-content: flex-start;
		}
	}
	> .wp-block-button {
		&:focus {
			box-shadow: none;
		}
	}

	// Back compat: Inner button blocks previously had their own alignment
	// options. Forcing them to 100% width in the flex container replicates
	// that these were block level elements that took up the full width.
	//
	// This back compat rule is ignored if the user decides to use the
	// newer justification options on the button block, hence the :not.
	/* stylelint-disable @stylistic/indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
	&:not(
		.is-content-justification-space-between,
		.is-content-justification-right,
		.is-content-justification-left,
		.is-content-justification-center
	) .wp-block[data-align="center"] {
	/* stylelint-enable @stylistic/indentation */
		margin-left: auto;
		margin-right: auto;
		margin-top: 0;
		width: 100%;

		.wp-block-button {
			// Some margin hacks are needed, since margin doesn't seem to
			// collapse in the same way when a parent layout it flex.
			margin-bottom: 0;
		}
	}
}

.wp-block[data-align="center"] > .wp-block-buttons {
	align-items: center;
	justify-content: center;
}

.wp-block[data-align="right"] > .wp-block-buttons {
	justify-content: flex-end;
}