/*
 * Buttons, from the Figma "button" component (634:3337).
 * Default (no style)      purple medium filled   – theme.json styles.elements.button
 * is-style-outline        purple medium outlined
 * is-style-primary-lg     purple large filled
 * is-style-outline-lg     purple large outlined
 * is-style-black-lg       black large filled (home hero)
 * is-style-ghost-lg       white-outline large on dark backgrounds (home hero)
 * is-style-small          purple small filled
 * is-style-small-outline  purple small outlined
 * is-style-dark           black small filled
 * is-style-dark-outline   black small outlined
 * Add the class "has-arrow" for a trailing arrow (24px on large buttons), "has-user-icon" for the account icon,
 * "has-download-icon" for a download arrow (media kit).
 */

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Medium outlined (core "outline" style). */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	padding: 7px 15px;
	border: 1px solid var(--wp--preset--color--purple-50);
	border-radius: 20px;
	background: transparent;
	color: var(--wp--preset--color--purple-100);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--purple-20);
	color: var(--wp--preset--color--purple-100);
}

/* Large (Geist 18/24, -1%, pill, 16px 16px 16px 20px). */
.wp-block-button.is-style-primary-lg > .wp-block-button__link,
.wp-block-button.is-style-outline-lg > .wp-block-button__link,
.wp-block-button.is-style-black-lg > .wp-block-button__link,
.wp-block-button.is-style-ghost-lg > .wp-block-button__link {
	padding: 16px 16px 16px 20px;
	border-radius: 99px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 18px;
	font-weight: 500;
	line-height: calc(24 / 18);
	letter-spacing: -0.01em;
}

.wp-block-button.is-style-primary-lg > .wp-block-button__link {
	border: 0;
	background: var(--wp--preset--color--purple-100);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-primary-lg > .wp-block-button__link:hover,
.wp-block-button.is-style-primary-lg > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--purple-90);
}

.wp-block-button.is-style-outline-lg > .wp-block-button__link {
	padding: 15px 15px 15px 19px;
	border: 1px solid var(--wp--preset--color--purple-60);
	background: transparent;
	color: var(--wp--preset--color--purple-100);
}

.wp-block-button.is-style-outline-lg > .wp-block-button__link:hover,
.wp-block-button.is-style-outline-lg > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--purple-20);
}

.wp-block-button.is-style-black-lg > .wp-block-button__link {
	border: 0;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-black-lg > .wp-block-button__link:hover,
.wp-block-button.is-style-black-lg > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--text-secondary);
}

.wp-block-button.is-style-ghost-lg > .wp-block-button__link {
	padding: 15px 15px 15px 19px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-ghost-lg > .wp-block-button__link:hover,
.wp-block-button.is-style-ghost-lg > .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}

/* Small (4px 12px, radius 20). */
.wp-block-button.is-style-small > .wp-block-button__link,
.wp-block-button.is-style-small-outline > .wp-block-button__link,
.wp-block-button.is-style-dark > .wp-block-button__link,
.wp-block-button.is-style-dark-outline > .wp-block-button__link {
	padding: 4px 12px;
	border-radius: 20px;
}

.wp-block-button.is-style-small > .wp-block-button__link {
	background: var(--wp--preset--color--purple-100);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-small > .wp-block-button__link:hover {
	background: var(--wp--preset--color--purple-80);
}

.wp-block-button.is-style-small-outline > .wp-block-button__link {
	padding: 3px 11px;
	border: 1px solid var(--wp--preset--color--purple-50);
	background: transparent;
	color: var(--wp--preset--color--purple-100);
}

.wp-block-button.is-style-small-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--purple-20);
}

.wp-block-button.is-style-dark > .wp-block-button__link {
	background: var(--wp--preset--color--gray-70);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--black);
}

.wp-block-button.is-style-dark-outline > .wp-block-button__link {
	padding: 3px 11px;
	border: 1px solid var(--wp--preset--color--text-muted);
	background: transparent;
	color: var(--wp--preset--color--black);
}

.wp-block-button.is-style-dark-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--gray-10);
}

/* Disabled look (Figma "disabled" state), for buttons given the class "is-disabled". */
.wp-block-button.is-disabled > .wp-block-button__link {
	pointer-events: none;
	background: var(--wp--preset--color--purple-70);
}

.wp-block-button.is-disabled.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--purple-60);
}

/* Icons (masks take the text color): add class "has-arrow", "has-user-icon" or "has-download-icon" to a button. */
.wp-block-button.has-arrow > .wp-block-button__link::after,
.wp-block-button.has-user-icon > .wp-block-button__link::after,
.wp-block-button.has-download-icon > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--rs-icon) center / contain no-repeat;
	mask: var(--rs-icon) center / contain no-repeat;
	--rs-icon: url("../../images/icons/arrow-right.svg");
}

/* Large buttons use the 24px icons. */
.wp-block-button.has-arrow[class*="-lg"] > .wp-block-button__link::after,
.wp-block-button.has-download-icon[class*="-lg"] > .wp-block-button__link::after {
	width: 24px;
	height: 24px;
}

.wp-block-button.has-user-icon > .wp-block-button__link::after {
	--rs-icon: url("../../images/icons/user.svg");
}

.wp-block-button.has-download-icon > .wp-block-button__link::after {
	--rs-icon: url("../../images/icons/download.svg");
}