/**
 * Button Block Variants
 * Primary, Error, Warning, Success, and Light variants
 * Supports both Fill and Outline styles
 *
 * @package Verity_Code_Labs
 * @since Verity Code Labs 1.0
 */

/*
 * Default WordPress Button
 * Uses contrast color (applies to buttons without custom style classes)
 */
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline) .wp-block-button__link:not(.has-background),
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline) > .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--neutral-900, #212121) !important;
	color: var(--wp--preset--color--base, #FAFAFA) !important;
	border-color: var(--wp--preset--color--neutral-900, #212121) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline) .wp-block-button__link:not(.has-background):hover,
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline) .wp-block-button__link:not(.has-background):focus,
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline) > .wp-block-button__link:not(.has-background):hover,
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline) > .wp-block-button__link:not(.has-background):focus {
	background-color: var(--wp--preset--color--neutral-700, #616161) !important;
	border-color: var(--wp--preset--color--neutral-700, #616161) !important;
	color: var(--wp--preset--color--base, #FAFAFA) !important;
}

/* Default Outline Style */
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline).is-style-outline .wp-block-button__link,
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline).is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--contrast, #212121) !important;
	border: 1px solid var(--wp--preset--color--contrast, #212121) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline).is-style-outline .wp-block-button__link:hover,
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline).is-style-outline .wp-block-button__link:focus,
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline).is-style-outline > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-primary):not(.is-style-error):not(.is-style-warning):not(.is-style-success):not(.is-style-light):not(.is-style-primary-outline):not(.is-style-error-outline):not(.is-style-warning-outline):not(.is-style-success-outline):not(.is-style-light-outline).is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast, #212121) !important;
	color: var(--wp--preset--color--base, #FAFAFA) !important;
	border-color: var(--wp--preset--color--contrast, #212121) !important;
}

/*
 * Primary Button Variant
 * Fill Style (default)
 */
.wp-block-button.is-style-primary:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--primary-900, #0E2A87);
	color: var(--wp--preset--color--base, #FAFAFA);
	border-color: var(--wp--preset--color--primary-900, #0E2A87);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-primary:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button.is-style-primary:not(.is-style-outline) .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-600, #274ECD);
	border-color: var(--wp--preset--color--primary-600, #274ECD);
	color: var(--wp--preset--color--base, #FAFAFA);
}

/* Primary Outline Style */
.wp-block-button.is-style-primary.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-primary.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-primary-outline .wp-block-button__link,
.wp-block-button.is-style-primary-outline > .wp-block-button__link {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--primary-900, #0E2A87) !important;
	border: 1px solid var(--wp--preset--color--primary-900, #0E2A87) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-primary.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-primary.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-primary.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-primary.is-style-outline > .wp-block-button__link:focus,
.wp-block-button.is-style-primary-outline .wp-block-button__link:hover,
.wp-block-button.is-style-primary-outline .wp-block-button__link:focus,
.wp-block-button.is-style-primary-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-primary-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-900, #0E2A87) !important;
	color: var(--wp--preset--color--base, #FAFAFA) !important;
	border-color: var(--wp--preset--color--primary-900, #0E2A87) !important;
}

/*
 * Error Button Variant
 * Fill Style (default)
 */
.wp-block-button.is-style-error:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--error-500, #DF2A4A);
	color: var(--wp--preset--color--base, #FAFAFA);
	border-color: var(--wp--preset--color--error-500, #DF2A4A);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-error:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button.is-style-error:not(.is-style-outline) .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--error-300, #EC7F92);
	border-color: var(--wp--preset--color--error-300, #EC7F92);
	color: var(--wp--preset--color--base, #FAFAFA);
}

/* Error Outline Style */
.wp-block-button.is-style-error.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-error.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-error-outline .wp-block-button__link,
.wp-block-button.is-style-error-outline > .wp-block-button__link {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--error-500, #DF2A4A) !important;
	border: 1px solid var(--wp--preset--color--error-500, #DF2A4A) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-error.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-error.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-error.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-error.is-style-outline > .wp-block-button__link:focus,
.wp-block-button.is-style-error-outline .wp-block-button__link:hover,
.wp-block-button.is-style-error-outline .wp-block-button__link:focus,
.wp-block-button.is-style-error-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-error-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--error-500, #DF2A4A) !important;
	color: var(--wp--preset--color--base, #FAFAFA) !important;
	border-color: var(--wp--preset--color--error-500, #DF2A4A) !important;
}

/*
 * Warning Button Variant
 * Fill Style (default)
 */
.wp-block-button.is-style-warning:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--warning-500, #F29100);
	color: var(--wp--preset--color--base, #FAFAFA);
	border-color: var(--wp--preset--color--warning-500, #F29100);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-warning:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button.is-style-warning:not(.is-style-outline) .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--warning-300, #F7BD66);
	border-color: var(--wp--preset--color--warning-300, #F7BD66);
	color: var(--wp--preset--color--base, #FAFAFA);
}

/* Warning Outline Style */
.wp-block-button.is-style-warning.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-warning.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-warning-outline .wp-block-button__link,
.wp-block-button.is-style-warning-outline > .wp-block-button__link {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--warning-500, #F29100) !important;
	border: 1px solid var(--wp--preset--color--warning-500, #F29100) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-warning.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-warning.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-warning.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-warning.is-style-outline > .wp-block-button__link:focus,
.wp-block-button.is-style-warning-outline .wp-block-button__link:hover,
.wp-block-button.is-style-warning-outline .wp-block-button__link:focus,
.wp-block-button.is-style-warning-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-warning-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--warning-500, #F29100) !important;
	color: var(--wp--preset--color--base, #FAFAFA) !important;
	border-color: var(--wp--preset--color--warning-500, #F29100) !important;
}

/*
 * Success Button Variant
 * Fill Style (default)
 */
.wp-block-button.is-style-success:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--success-500, #0E8754);
	color: var(--wp--preset--color--base, #FAFAFA);
	border-color: var(--wp--preset--color--success-500, #0E8754);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-success:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button.is-style-success:not(.is-style-outline) .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--success-300, #6FB99A);
	border-color: var(--wp--preset--color--success-300, #6FB99A);
	color: var(--wp--preset--color--base, #FAFAFA);
}

/* Success Outline Style */
.wp-block-button.is-style-success.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-success.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-success-outline .wp-block-button__link,
.wp-block-button.is-style-success-outline > .wp-block-button__link {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--success-500, #0E8754) !important;
	border: 1px solid var(--wp--preset--color--success-500, #0E8754) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-success.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-success.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-success.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-success.is-style-outline > .wp-block-button__link:focus,
.wp-block-button.is-style-success-outline .wp-block-button__link:hover,
.wp-block-button.is-style-success-outline .wp-block-button__link:focus,
.wp-block-button.is-style-success-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-success-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--success-500, #0E8754) !important;
	color: var(--wp--preset--color--base, #FAFAFA) !important;
	border-color: var(--wp--preset--color--success-500, #0E8754) !important;
}

/*
 * Light Button Variant
 * Fill Style (default)
 */
.wp-block-button.is-style-light:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--neutral-0, #FAFAFA) !important;
	color: var(--wp--preset--color--dark, #212121) !important;
	border-color: var(--wp--preset--color--neutral-300, #E0E0E0) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-light:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button.is-style-light:not(.is-style-outline) .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--neutral-200, #EEEEEE) !important;
	border-color: var(--wp--preset--color--neutral-400, #BDBDBD) !important;
	color: var(--wp--preset--color--neutral-800, #424242) !important;
}

/* Light Outline Style */
.wp-block-button.is-style-light.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-light.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-light-outline .wp-block-button__link,
.wp-block-button.is-style-light-outline > .wp-block-button__link {
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--base, #FAFAFA) !important;
	border: 1px solid var(--wp--preset--color--neutral-0, #FAFAFA) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wp-block-button.is-style-light.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-light.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-light.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-light.is-style-outline > .wp-block-button__link:focus,
.wp-block-button.is-style-light-outline .wp-block-button__link:hover,
.wp-block-button.is-style-light-outline .wp-block-button__link:focus,
.wp-block-button.is-style-light-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-light-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--neutral-0, #FAFAFA) !important;
	color: var(--wp--preset--color--dark, #212121) !important;
	border-color: var(--wp--preset--color--neutral-0, #FAFAFA) !important;
}

/*
 * Button Icon Layout (frontend + editor)
 */
.wp-block-button.has-icon .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-vcl-icon {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5em;
}

.wp-block-button.has-icon .wp-block-button__link svg,
.wp-block-button .vcl-button-icon svg {
	flex-shrink: 0;
	display: block;
}

.wp-block-button .vcl-button-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/*
 * Editor-only icon preview via CSS mask.
 * Survives RichText focus because nothing is injected into contenteditable.
 */
.wp-block-button.has-vcl-icon-preview .wp-block-button__link {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5em;
}

.wp-block-button.has-vcl-icon-preview.has-icon-right .wp-block-button__link::after,
.wp-block-button.has-vcl-icon-preview.has-icon-left .wp-block-button__link::before {
	content: '';
	display: inline-block;
	width: var(--vcl-icon-size, 20px);
	height: var(--vcl-icon-size, 20px);
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--vcl-button-icon) center / contain no-repeat;
	mask: var(--vcl-button-icon) center / contain no-repeat;
}