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

.editor-styles-wrapper .wp-block-jetpack-donations {

	.donations__amount {
		cursor: text;

		&.has-focus {
			box-shadow: 0 0 0 1px gb.$white, 0 0 0 3px var(--wp-admin-theme-color);
			outline: 2px solid transparent;
			outline-offset: -2px;
		}
	}

	.donations__custom-amount {
		cursor: default;
	}

	.donations__amount .block-editor-rich-text__editable {
		display: inline-block;
		text-align: left;

		&:focus {
			box-shadow: none;
			outline: none;
			outline-offset: 0;
		}
	}

	.donations__amount [data-rich-text-placeholder]::after {
		color: gb.$gray-400;
		opacity: 1;
	}

	.donations__custom-amount .donations__amount-value {
		color: gb.$gray-400;
	}

	.donations__donate-button-wrapper:not(.alignleft):not(.alignright) {
		margin: 0;
	}

	.jetpack-block-nudge {
		max-width: none;
	}
}

.jetpack-donations__currency-toggle {
	font-weight: 700;
	// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
	line-height: 100%;
	width: max-content;
}

.jetpack-donations__currency-popover .components-popover__content {
	min-width: 130px;
}
