div.wp-block-jetpack-whatsapp-button {
	margin-inline-end: 5px;
	display: flex;

	a.whatsapp-block__button {
		background: #25d366;
		box-sizing: border-box;
		color: #fff;
		display: block;
		padding: 8px 16px 8px 56px;
		border-radius: 8px;
		text-decoration: none;
		white-space: nowrap;
		min-height: 50px;
		line-height: 36px; // 20px font size + 16 px padding
		border: none;

		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 500;
		font-size: 20px;

		background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2026%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M24%2C11.6909333%20C24%2C18.1477333%2018.7256%2C23.3818667%2012.2181333%2C23.3818667%20C10.1522667%2C23.3818667%208.21146667%2C22.8538667%206.52293333%2C21.9272%20L0%2C24%20L2.12666667%2C17.7274667%20C1.05386667%2C15.9658667%200.436%2C13.8997333%200.436%2C11.6909333%20C0.436%2C5.23413333%205.71093333%2C0%2012.2181333%2C0%20C18.7261333%2C0%2024%2C5.23413333%2024%2C11.6909333%20Z%20M12.2181333%2C1.86186667%20C6.75573333%2C1.86186667%202.31253333%2C6.2712%202.31253333%2C11.6909333%20C2.31253333%2C13.8416%203.0136%2C15.8333333%204.19946667%2C17.4536%20L2.96186667%2C21.104%20L6.76853333%2C19.8941333%20C8.33253333%2C20.9210667%2010.2061333%2C21.52%2012.2184%2C21.52%20C17.68%2C21.52%2022.124%2C17.1112%2022.124%2C11.6914667%20C22.124%2C6.27173333%2017.6802667%2C1.86186667%2012.2181333%2C1.86186667%20Z%20M18.1677333%2C14.3834667%20C18.0949333%2C14.2642667%2017.9026667%2C14.1922667%2017.6141333%2C14.0490667%20C17.3250667%2C13.9058667%2015.9048%2C13.2122667%2015.6408%2C13.1170667%20C15.376%2C13.0216%2015.1829333%2C12.9736%2014.9906667%2C13.2602667%20C14.7984%2C13.5472%2014.2448%2C14.1922667%2014.076%2C14.3834667%20C13.9074667%2C14.5752%2013.7392%2C14.5992%2013.4501333%2C14.4557333%20C13.1616%2C14.3125333%2012.2312%2C14.0096%2011.128%2C13.0336%20C10.2696%2C12.2741333%209.68986667%2C11.3365333%209.52133333%2C11.0493333%20C9.35306667%2C10.7626667%209.50373333%2C10.6077333%209.648%2C10.4650667%20C9.77813333%2C10.3365333%209.93706667%2C10.1304%2010.0813333%2C9.9632%20C10.2261333%2C9.79573333%2010.2741333%2C9.67653333%2010.3698667%2C9.48506667%20C10.4666667%2C9.29386667%2010.4184%2C9.12666667%2010.3458667%2C8.98293333%20C10.2738667%2C8.83973333%209.69573333%2C7.4296%209.4552%2C6.85573333%20C9.21466667%2C6.2824%208.9744%2C6.37786667%208.8056%2C6.37786667%20C8.63733333%2C6.37786667%208.44453333%2C6.35386667%208.252%2C6.35386667%20C8.05946667%2C6.35386667%207.7464%2C6.4256%207.4816%2C6.71226667%20C7.21706667%2C6.9992%206.4712%2C7.69253333%206.4712%2C9.1024%20C6.4712%2C10.5125333%207.5056%2C11.8749333%207.6504%2C12.0658667%20C7.79466667%2C12.2568%209.64773333%2C15.2445333%2012.5837333%2C16.392%20C15.52%2C17.5389333%2015.52%2C17.1562667%2016.0496%2C17.1082667%20C16.5786667%2C17.0605333%2017.7578667%2C16.4152%2017.9994667%2C15.7464%20C18.2394667%2C15.0765333%2018.2394667%2C14.5029333%2018.1677333%2C14.3834667%20Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
		background-position: 16px center;
		background-repeat: no-repeat;
		background-size: 32px 32px;
	}

	&.is-color-light {

		a.whatsapp-block__button {
			color: #465b64;
			background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2026%27%3E%3Cpath%20fill%3D%27%2523465B64%27%20d%3D%27M24%2C11.6909333%20C24%2C18.1477333%2018.7256%2C23.3818667%2012.2181333%2C23.3818667%20C10.1522667%2C23.3818667%208.21146667%2C22.8538667%206.52293333%2C21.9272%20L0%2C24%20L2.12666667%2C17.7274667%20C1.05386667%2C15.9658667%200.436%2C13.8997333%200.436%2C11.6909333%20C0.436%2C5.23413333%205.71093333%2C0%2012.2181333%2C0%20C18.7261333%2C0%2024%2C5.23413333%2024%2C11.6909333%20Z%20M12.2181333%2C1.86186667%20C6.75573333%2C1.86186667%202.31253333%2C6.2712%202.31253333%2C11.6909333%20C2.31253333%2C13.8416%203.0136%2C15.8333333%204.19946667%2C17.4536%20L2.96186667%2C21.104%20L6.76853333%2C19.8941333%20C8.33253333%2C20.9210667%2010.2061333%2C21.52%2012.2184%2C21.52%20C17.68%2C21.52%2022.124%2C17.1112%2022.124%2C11.6914667%20C22.124%2C6.27173333%2017.6802667%2C1.86186667%2012.2181333%2C1.86186667%20Z%20M18.1677333%2C14.3834667%20C18.0949333%2C14.2642667%2017.9026667%2C14.1922667%2017.6141333%2C14.0490667%20C17.3250667%2C13.9058667%2015.9048%2C13.2122667%2015.6408%2C13.1170667%20C15.376%2C13.0216%2015.1829333%2C12.9736%2014.9906667%2C13.2602667%20C14.7984%2C13.5472%2014.2448%2C14.1922667%2014.076%2C14.3834667%20C13.9074667%2C14.5752%2013.7392%2C14.5992%2013.4501333%2C14.4557333%20C13.1616%2C14.3125333%2012.2312%2C14.0096%2011.128%2C13.0336%20C10.2696%2C12.2741333%209.68986667%2C11.3365333%209.52133333%2C11.0493333%20C9.35306667%2C10.7626667%209.50373333%2C10.6077333%209.648%2C10.4650667%20C9.77813333%2C10.3365333%209.93706667%2C10.1304%2010.0813333%2C9.9632%20C10.2261333%2C9.79573333%2010.2741333%2C9.67653333%2010.3698667%2C9.48506667%20C10.4666667%2C9.29386667%2010.4184%2C9.12666667%2010.3458667%2C8.98293333%20C10.2738667%2C8.83973333%209.69573333%2C7.4296%209.4552%2C6.85573333%20C9.21466667%2C6.2824%208.9744%2C6.37786667%208.8056%2C6.37786667%20C8.63733333%2C6.37786667%208.44453333%2C6.35386667%208.252%2C6.35386667%20C8.05946667%2C6.35386667%207.7464%2C6.4256%207.4816%2C6.71226667%20C7.21706667%2C6.9992%206.4712%2C7.69253333%206.4712%2C9.1024%20C6.4712%2C10.5125333%207.5056%2C11.8749333%207.6504%2C12.0658667%20C7.79466667%2C12.2568%209.64773333%2C15.2445333%2012.5837333%2C16.392%20C15.52%2C17.5389333%2015.52%2C17.1562667%2016.0496%2C17.1082667%20C16.5786667%2C17.0605333%2017.7578667%2C16.4152%2017.9994667%2C15.7464%20C18.2394667%2C15.0765333%2018.2394667%2C14.5029333%2018.1677333%2C14.3834667%20Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
		}
	}

	&.alignleft {
		float: none;
		justify-content: flex-start;
	}

	&.aligncenter {
		justify-content: center;
	}

	&.alignright {
		float: none;
		justify-content: flex-end;
	}

	&.has-no-text {

		a.whatsapp-block__button {
			padding-inline-start: 48px;
		}
	}

	&:hover {
		opacity: 0.9;
	}
}

// Specificity required to override focused button background
div.wp-block-jetpack-send-a-message > div.wp-block-jetpack-whatsapp-button > a.whatsapp-block__button:focus {
	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2026%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M24%2C11.6909333%20C24%2C18.1477333%2018.7256%2C23.3818667%2012.2181333%2C23.3818667%20C10.1522667%2C23.3818667%208.21146667%2C22.8538667%206.52293333%2C21.9272%20L0%2C24%20L2.12666667%2C17.7274667%20C1.05386667%2C15.9658667%200.436%2C13.8997333%200.436%2C11.6909333%20C0.436%2C5.23413333%205.71093333%2C0%2012.2181333%2C0%20C18.7261333%2C0%2024%2C5.23413333%2024%2C11.6909333%20Z%20M12.2181333%2C1.86186667%20C6.75573333%2C1.86186667%202.31253333%2C6.2712%202.31253333%2C11.6909333%20C2.31253333%2C13.8416%203.0136%2C15.8333333%204.19946667%2C17.4536%20L2.96186667%2C21.104%20L6.76853333%2C19.8941333%20C8.33253333%2C20.9210667%2010.2061333%2C21.52%2012.2184%2C21.52%20C17.68%2C21.52%2022.124%2C17.1112%2022.124%2C11.6914667%20C22.124%2C6.27173333%2017.6802667%2C1.86186667%2012.2181333%2C1.86186667%20Z%20M18.1677333%2C14.3834667%20C18.0949333%2C14.2642667%2017.9026667%2C14.1922667%2017.6141333%2C14.0490667%20C17.3250667%2C13.9058667%2015.9048%2C13.2122667%2015.6408%2C13.1170667%20C15.376%2C13.0216%2015.1829333%2C12.9736%2014.9906667%2C13.2602667%20C14.7984%2C13.5472%2014.2448%2C14.1922667%2014.076%2C14.3834667%20C13.9074667%2C14.5752%2013.7392%2C14.5992%2013.4501333%2C14.4557333%20C13.1616%2C14.3125333%2012.2312%2C14.0096%2011.128%2C13.0336%20C10.2696%2C12.2741333%209.68986667%2C11.3365333%209.52133333%2C11.0493333%20C9.35306667%2C10.7626667%209.50373333%2C10.6077333%209.648%2C10.4650667%20C9.77813333%2C10.3365333%209.93706667%2C10.1304%2010.0813333%2C9.9632%20C10.2261333%2C9.79573333%2010.2741333%2C9.67653333%2010.3698667%2C9.48506667%20C10.4666667%2C9.29386667%2010.4184%2C9.12666667%2010.3458667%2C8.98293333%20C10.2738667%2C8.83973333%209.69573333%2C7.4296%209.4552%2C6.85573333%20C9.21466667%2C6.2824%208.9744%2C6.37786667%208.8056%2C6.37786667%20C8.63733333%2C6.37786667%208.44453333%2C6.35386667%208.252%2C6.35386667%20C8.05946667%2C6.35386667%207.7464%2C6.4256%207.4816%2C6.71226667%20C7.21706667%2C6.9992%206.4712%2C7.69253333%206.4712%2C9.1024%20C6.4712%2C10.5125333%207.5056%2C11.8749333%207.6504%2C12.0658667%20C7.79466667%2C12.2568%209.64773333%2C15.2445333%2012.5837333%2C16.392%20C15.52%2C17.5389333%2015.52%2C17.1562667%2016.0496%2C17.1082667%20C16.5786667%2C17.0605333%2017.7578667%2C16.4152%2017.9994667%2C15.7464%20C18.2394667%2C15.0765333%2018.2394667%2C14.5029333%2018.1677333%2C14.3834667%20Z%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E);
	background-position: 16px center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
}
