/**
 * Handoff Banner
 */

@use "~@wordpress/base-styles/colors" as wp-colors;
@use "../../../packages/colors/colors.module" as colors;

#newspack-handoff-banner {
	// Color
	--wp-admin-theme-color: var(--newspack-ui-color-primary);
	--wp-admin-theme-color--rgb: var(--newspack-ui-color-primary-rgb);
	--wp-admin-theme-color-darker-10: var(--newspack-ui-color-primary);
	--wp-admin-theme-color-darker-10--rgb: var(--newspack-ui-color-primary-rgb);
	--wp-admin-theme-color-darker-20: #{colors.$primary-700};
	--wp-admin-theme-color-darker-20--rgb: #{colors.$primary-700--rgb};

	background: white;
	border-bottom: 1px solid wp-colors.$gray-300;
	border-left: 4px solid var(--wp-admin-theme-color);
	border-top: 1px solid wp-colors.$gray-300;
	clear: both;
	display: block;
	margin: 0 0 0 -10px;
	padding: 4px 16px;
	position: relative;

	@media screen and ( min-width: 783px ) {
		margin-left: -20px;
	}

	// Dismissed
	&:empty {
		display: none;
	}

	// Jetpack
	.jetpack-pagestyles & {
		margin-left: 0;
	}

	// Google Site Kit
	.site-kit_page_googlesitekit-splash & {
		margin-bottom: -25px;
	}
}

.newspack-handoff-banner {
	align-items: center;
	box-sizing: border-box;
	color: wp-colors.$gray-900;
	justify-content: space-between;
	margin: 0;
	width: 100%;

	@media screen and ( min-width: 600px ) {
		display: flex;
	}

	// Text
	.newspack-handoff-banner__text {
		align-items: center;
		display: flex;
		margin: 4px;

		@media screen and ( min-width: 600px ) {
			&::before {
				background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 16c0 8.836-7.164 16-16 16-8.837 0-16-7.164-16-16S7.164 0 16 0s16 7.164 16 16zm-10.732.623h1.72v-1.125h-2.823l1.103 1.125zm-3.249-3.31h4.97v-1.125h-6.072l1.102 1.124v.001zm-3.248-3.311h8.217V8.878h-9.32l1.103 1.124zM9.01 8.878l13.977 14.245h-4.66l-5.866-5.98v5.98h-3.45V8.878H9.01z' fill='%2336f' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
				background-size: 32px 32px;
				content: "";
				display: block;
				flex: 0 0 auto;
				height: 32px;
				margin: 0 8px 0 0;
				width: 32px;
			}
		}
	}

	// Buttons
	.newspack-handoff-banner__buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;

		@media screen and ( min-width: 600px ) {
			justify-content: flex-end;
		}
	}
}
