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

.wp-block-jetpack-payments-intro {

	.components-placeholder__fieldset {
		// Options will render horizontally, but the immediate children of the
		// fieldset are the choose pattern button and the block options, oriented
		// vertically.
		flex-direction: column;

		>p {
			margin-bottom: 0;
		}
	}

	.components-placeholder__instructions {
		margin-bottom: 0;
	}
}

.wp-payments-intro-pattern-picker__opener {
	width: min-content;
	margin-top: gb.$grid-unit-20;
}

.wp-block-jetpack-payments-intro__pattern-picker-selection-content .block-editor-block-patterns-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: gb.$grid-unit-10;

	.block-editor-block-patterns-list__list-item {
		margin-bottom: 0;

		.block-editor-block-preview__container {
			max-height: 250px;
		}
	}
}

.wp-block-jetpack-payments-intro__pattern-picker__selection-modal .components-modal__content {
	overflow: hidden;
	padding: 0;

	&::before {
		margin-bottom: 0;
	}
}

.wp-block-jetpack-payments-intro__pattern-picker__selection-modal {
	// To keep modal dimensions consistent as subsections are navigated, width
	// and height are used instead of max-(width/height).
	@include gb.break-small() {
		width: calc(100% - #{ gb.$grid-unit-20 * 2 });
		height: calc(100% - #{ gb.$header-height * 2 });
	}

	@include gb.break-medium() {
		width: gb.$break-medium - gb.$grid-unit-20 * 2;
	}

	@include gb.break-large() {
		height: 80%;
		width: 80%;
		max-height: none;
	}
}

.wp-block-jetpack-payments-intro__variation-picker.wp-block-jetpack-payments-intro__variation-picker {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: gb.$grid-unit-20 0;
	padding: 0;
	list-style: none;

	> li {
		list-style: none;
		margin: gb.$grid-unit-10 ( gb.$grid-unit-10 + gb.$grid-unit-15 ) 0 0;
		flex-shrink: 1;
		width: 75px;
		text-align: center;

		button {
			display: inline-flex;
			margin-right: 0;
		}
	}

	.wp-block-jetpack-payments-intro__variation-picker__variation {
		padding: gb.$grid-unit-10;
	}

	.wp-block-jetpack-payments-intro__variation-picker__variation-label {
		font-family: gb.$default-font;
		font-size: 12px;
		display: block;
		line-height: 1.4;
	}
}

.wp-block-jetpack-payments-intro__variation-picker__variation {
	width: 100%;

	&.components-button.has-icon {
		// Override default styles inherited from <Button /> to center
		// icon horizontally.
		justify-content: center;
		width: auto;

		&.is-secondary {
			background-color: gb.$white;
		}
	}

	&.components-button {
		// Override default styles inherited from <Button /> to allow button
		// to grow vertically.
		height: auto;
		padding: 0;
	}

	&::before {
		// Use `padding-bottom` trick to style element as perfect square.
		content: "";
		padding-bottom: 100%;
	}

	&:first-child {
		margin-inline-start: 0;
	}

	&:last-child {
		margin-inline-end: 0;
	}
}
