@use "sass:color" as sassColor;
@use "@wordpress/base-styles/colors" as wpColors;
@use "@wordpress/base-styles/variables" as wpVariables;

// Scope the old styles of core components to SFW pages to avoid styling conflicts with other non-SFW pages.
.rfw-admin-page {
	.components-button {
		// Hack to show correct font color for disabled primary destructive button.
		// The color style is copied from https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/button/style.scss#L67-L72
		&.is-primary.is-destructive:disabled {
			color: sassColor.change(wpColors.$white, $alpha: 0.4);
		}

		// hack to fix tertiary destructive button.
		&.is-tertiary.is-destructive {
			box-shadow: none;

			&:hover:not(:disabled) {
				box-shadow: none;
			}
		}

		&.is-link {
			text-decoration: none;

			// Hack to show correct font color for disabled link button.
			&:disabled {
				color: initial;
			}

			&.is-destructive:focus {
				box-shadow: none;
				color: wpColors.$alert-red;

				&:not(:disabled) {
					color: wpColors.$alert-red;
				}
			}
		}
	}

	// Fix the obvious styles conflicts caused by WooCommerce Payments since approximately version 2.2.0.
	// Ref: https://github.com/Automattic/woocommerce-payments/blob/2.2.0/client/payment-details/summary/style.scss#L3-L9
	.components-card {
		margin-bottom: 0;

		&__header {
			font-size: inherit;
		}
	}

	// Adjust InputControl suffix's empty right margin.
	.components-input-control__suffix {
		margin-right: wpVariables.$grid-unit;
	}
}