/**
 * Button overrides per block theme style variation.
 * Grouped by theme wrapper; nested by button style.
 * Loaded after theme.json global styles (see functions.php).
 */

/* Branding */
.is-style-theme-branding {
	.wp-block-button {
		&.is-style-secondary .wp-block-button__link {
			background-color: var(--wp--preset--color--white-1000);

			&:hover {
				background-color: var(--wp--preset--color--gray-200);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-100);
			}
		}

		&.is-style-ghost .wp-block-button__link {
			&:hover {
				background-color: var(--wp--preset--color--gray-200);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-100);
			}

			&:focus {
				background-color: var(--wp--preset--color--white-1000);
			}
		}

		&.is-style-contrast .wp-block-button__link {
			color: var(--wp--preset--color--white-1000);

			&:hover,
			&:active {
				color: var(--wp--preset--color--white-1000);
			}
		}

		&.is-style-outline .wp-block-button__link {
			background-color: transparent;
			color: var(--wp--preset--color--black-1000);
			border-color: var(--wp--preset--color--black-1000);

			&:hover {
				background-color: var(--wp--preset--color--gray-200);
			}

			&:focus {
				background-color: var(--wp--preset--color--gray-100);
			}
		}
	}
}

/* Digital */
.is-style-theme-digital {
	.wp-block-button {
		&.is-style-secondary .wp-block-button__link {
			background-color: var(--wp--preset--color--gray-900);
			color: var(--wp--preset--color--gray-100);
			border-color: var(--wp--preset--color--gray-100);

			&:hover {
				background-color: var(--wp--preset--color--gray-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-800);
			}
		}

		&.is-style-ghost .wp-block-button__link {
			color: var(--wp--preset--color--white-1000);

			&:hover {
				background-color: var(--wp--preset--color--gray-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-800);
			}

			&:focus {
				background-color: var(--wp--preset--color--black-1000);
			}
		}

		&.is-style-contrast .wp-block-button__link {
			background-color: var(--wp--preset--color--white-1000);
			color: var(--wp--preset--color--black-1000);

			&:hover {
				background-color: var(--wp--preset--color--white-1000);
				color: var(--wp--preset--color--black-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--white-700);
				color: var(--wp--preset--color--black-1000);
			}
		}

		&.is-style-outline .wp-block-button__link {
			background-color: transparent;
			color: var(--wp--preset--color--white-1000);
			border-color: var(--wp--preset--color--white-1000);

			&:focus {
				background-color: var(--wp--preset--color--white-1000);
				color: var(--wp--preset--color--black-1000);
			}

			&:hover {
				background-color: var(--wp--preset--color--black-1000);
				color: var(--wp--preset--color--white-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--gray-800);
			}
		}
	}
}

/* Content */
.is-style-theme-content {
	.wp-block-button {
		&.is-style-secondary .wp-block-button__link {
			background-color: var(--wp--preset--color--brand-tertiary);

			&:hover {
				background-color: var(--wp--preset--color--brand-tertiary-300);
			}

			&:active {
				background-color: var(--wp--preset--color--brand-tertiary-100);
			}
		}

		&.is-style-ghost .wp-block-button__link {
			&:hover {
				background-color: var(--wp--preset--color--brand-tertiary);
			}

			&:active {
				background-color: var(--wp--preset--color--brand-tertiary-100);
			}

			&:focus {
				background-color: var(--wp--preset--color--brand-tertiary);
			}
		}

		&.is-style-contrast .wp-block-button__link {
			color: var(--wp--preset--color--brand-tertiary);

			&:hover,
			&:active {
				color: var(--wp--preset--color--brand-tertiary);
			}
		}

		&.is-style-outline .wp-block-button__link {
			background-color: transparent;
			color: var(--wp--preset--color--black-1000);

			&:hover {
				background-color: var(--wp--preset--color--brand-tertiary);
				color: var(--wp--preset--color--black-1000);
			}

			&:active {
				background-color: var(--wp--preset--color--brand-tertiary-100);
			}

			&:focus {
				background-color: var(--wp--preset--color--black-1000);
				color: var(--wp--preset--color--brand-tertiary);
			}
		}
	}
}