// Scoped refinements for the React screens. The look itself comes from the legacy
// stylesheets (admin.min.css, custom.css, setup-wizard.css), which stay enqueued.

@import 'legacy-inline/setup-base';
@import 'legacy-inline/settings';
@import 'components';
@import 'settings';
@import 'pages';
@import 'design';

.ssgsw-react {
	// Same values as the legacy SCSS variables in src/scss/main.scss.
	--ssgsw-blue: #005ae0;
	--ssgsw-text: #141b38;
	--ssgsw-muted: #717377;
	--ssgsw-border: #dcdde1;
	--ssgsw-surface: #f8f9fa;
	--ssgsw-purple: #961cf6;
	--ssgsw-green: #188038;
	--ssgsw-orange: #f66a1c;
	--ssgsw-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--ssgsw-blue);

	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	[tabindex]:focus-visible {
		outline: 0;
		box-shadow: var(--ssgsw-focus-ring);
		border-radius: 4px;
	}

	// Header buttons that replace the legacy javascript: links.
	.ssgsw-react-link-button {
		padding: 0;
		font-family: inherit;
	}

	.ssgs-dashboard__header .ssgs-support:hover button {
		color: var(--ssgsw-blue);
	}

	// support.php used a <span> for the close icon and an inline min-width on the last card.
	.support-cross-button {
		border: 0;
		background: transparent;
		padding: 0;
		cursor: pointer;
		font-family: inherit;
	}

	.support-card.last .content {
		min-width: 265px;
	}

	// Phones: the legacy wrapper keeps a 100px gap and clips overflow, which squeezes cards
	// to ~160px and cuts off tooltips (react-conver.md §22.2 W1).
	// The bounceInLeft/Right pane animations start far off-screen; clip them horizontally
	// (as the legacy overflow: hidden did) without clipping dropdowns vertically.
	.ssgsw-wrapper {
		overflow-x: clip;
		overflow-y: visible;
	}

	@media only screen and (max-width: 782px) {
		.ssgsw-wrapper {
			max-width: 100% !important;
			padding: 0 16px;
			box-sizing: border-box;
		}

		.ssgs-dashboard__header {
			flex-wrap: wrap;
			row-gap: 12px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}
}