@use "~@wordpress/base-styles/colors" as wp-colors;
@use "newspack-colors" as np-colors;
@use "../../../shared/sass/variables";
@use "../frequency-based/style" as frequency-based;
@use "../tiers-based/style" as tiers-based;

.wp-block-newspack-blocks-donate {
	&__tier--frequency {
		position: relative;
	}

	&__panel-inputs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 21px;
		input,
		span {
			min-width: 0;
		}
		span {
			margin-bottom: 7px;
			display: inline-block;
			width: 32%;
		}
		input {
			max-width: 100%;
		}
	}

	.submit-button {
		display: inline-block;
		text-align: center;
	}

	button,
	.submit-button {
		font-family: var(--newspack-theme-font-heading);
		font-size: variables.$font__size-sm;
		font-weight: bold;
		outline: none;

		&[type="submit"] {
			border: none;
		}
	}
	button[type="submit"],
	.submit-button {
		border-radius: 5px;
		box-sizing: border-box;
		color: np-colors.$neutral-000;
		line-height: 3;
		padding-left: 20px;
		padding-right: 20px;
	}
}

.wp-block-newspack-blocks-donate.wpbnbd--frequency-based.tiered {
	.tiers {
		input.frequency-input {
			~ input[type="number"] {
				position: absolute;
				max-width: 81px;
				top: -31px;
				z-index: 9;
				left: 5px;
				display: none;
			}

			&:checked ~ input[type="number"] {
				display: flex;
			}
		}
	}
}

.block-editor-block-list__layout
.block-editor-block-list__block
.wp-block-newspack-blocks-donate.tiered.is-style-minimal
.wp-block-newspack-blocks-donate__tiers
input[type="radio"]:checked + .tier-select-label {
	background: transparent;
	color: np-colors.$neutral-900;
}

.components-frequency-donations {
	p {
		margin-bottom: 8px;
	}

	.components-base-control {
		margin-bottom: 0;

		&:last-child {
			margin-bottom: 0;

			.components-base-control__field {
				margin-bottom: 0;
			}
		}
	}

	&__minimum-donation {
		margin-top: 16px;
	}

	&__error {
		color: np-colors.$error-500;
	}
}

.newspack-blocks-donate {
	&__layout-selector {
		display: grid;
		gap: 8px;
		grid-template-columns: repeat(2, 1fr);
		margin-bottom: 1.8em;

		.components-button {
			justify-content: center;

			&.is-secondary {
				box-shadow: inset 0 0 0 1px wp-colors.$gray-400;
				color: wp-colors.$gray-900;
			}
		}
	}

	&__notice {
		margin: 0 0 20px;
	}
}

.newspack-blocks-additional-fields-editor {
	&__field {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border: 1px solid wp-colors.$gray-300;
		& + & {
			border-top: none;
		}
		&:first-of-type {
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
		}
		&:last-of-type {
			margin-bottom: 20px;
			border-bottom-left-radius: 3px;
			border-bottom-right-radius: 3px;
		}
		&__left-section {
			display: flex;
			align-items: center;
			> div {
				display: flex;
				flex-direction: column;
				button {
					padding: 0 !important;
					height: 15px;
					min-width: 0 !important;
					width: 24px;
				}
			}
			> span {
				padding-left: 10px;
			}
			&__icon {
				margin-right: 8px;
			}
		}
	}
	&__field-edited {
		&__help,
		&__validation-message {
			font-size: 12px;
			line-height: 1.4;
		}
		&__help {
			margin-bottom: 20px;
		}
		&__validation-message {
			margin-bottom: 8px;
			color: wp-colors.$alert-red !important;
		}
		&__width {
			margin-bottom: 20px;
			div:first-child {
				margin-bottom: 8px;
			}
		}
		&--name input {
			font-family: monospace !important;
		}
		&--invalid input {
			border-color: wp-colors.$alert-red !important;
		}
	}
	&__modal {
		max-width: 400px !important;
	}
	&__options-popover {
		.components-popover__content {
			padding: 6px;
			max-width: 196px;
		}
		.components-button {
			padding: 11px 13px;
			text-decoration: none;
			&:not(.is-destructive) {
				color: wp-colors.$gray-900;
			}
			&:focus {
				box-shadow: none;
				outline: none;
			}
		}
	}
	&__edit-buttons {
		display: flex;
		justify-content: flex-end;
		button + button {
			margin-left: 10px;
		}
	}
	.components-base-control {
		margin-bottom: 0;
	}
}
