/*
 * SGGW Button contract shared by Core Button and button-shaped links.
 *
 * Core Button, Event Registration and Read More reuse the same canonical
 * wrapper/link classes. The block without an explicit style and is-style-fill are Filled.
 * Outline and Ghost retain their resting treatment but converge with Filled on hover.
 */

.wp-block-button,
.wp-block-read-more.wp-element-button {
	/* Surface-dependent component aliases must resolve on the instance. */
	--wp--custom--component--button--background: var(--sggw-button-background);
	--wp--custom--component--button--background-hover: var(--sggw-button-background-hover);
	--wp--custom--component--button--background-pressed: color-mix(
		in srgb,
		var(--sggw-button-foreground) var(--wp--custom--state-layer--pressed),
		var(--sggw-button-background)
	);
	--wp--custom--component--button--foreground: var(--sggw-button-foreground);
	--wp--custom--component--button--foreground-hover: var(--sggw-button-foreground-hover);
	--wp--custom--component--button--outline--border: var(--sggw-button-outline);
	--wp--custom--component--button--outline--foreground: var(--sggw-button-outline);
}

.wp-block-button > .wp-block-button__link,
.wp-block-read-more.wp-element-button {
	align-items: center;
	background-color: var(--wp--custom--component--button--background) !important;
	background-image: none !important;
	border-color: transparent !important;
	border-radius: var(--wp--custom--radius--small) !important;
	border-style: solid !important;
	border-width: var(--wp--custom--line--width) !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: var(--wp--custom--component--button--foreground) !important;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-style: normal !important;
	font-weight: var(--wp--custom--typography--font-weight--semibold) !important;
	justify-content: center;
	letter-spacing: normal !important;
	line-height: var(--wp--custom--typography--line-height--medium) !important;
	min-height: var(--wp--preset--spacing--70);
	overflow-wrap: normal;
	padding-block: calc(var(--wp--preset--spacing--20) - var(--wp--custom--line--width)) !important;
	padding-inline: calc(var(--wp--preset--spacing--40) - var(--wp--custom--line--width)) !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: normal;
	word-break: normal;
}

.wp-block-button.has-sggw-button-icon:not(.has-sggw-button-icon-only)
	> .wp-block-button__link {
	column-gap: var(--wp--preset--spacing--10);
}

.wp-block-button.has-sggw-small-size > .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: var(--wp--custom--typography--line-height--small) !important;
	min-height: var(--wp--preset--spacing--50);
	padding-block: calc(4px - var(--wp--custom--line--width)) !important;
	padding-inline: calc(var(--wp--preset--spacing--20) - var(--wp--custom--line--width)) !important;
}

.wp-block-button.has-sggw-large-size > .wp-block-button__link {
	min-height: calc(var(--wp--preset--spacing--70) + (2 * 4px));
	padding-block: calc(calc(var(--wp--preset--spacing--20) + 4px) - var(--wp--custom--line--width)) !important;
}

.wp-block-button.has-sggw-small-size.has-sggw-button-icon:not(.has-sggw-button-icon-only)
	> .wp-block-button__link {
	column-gap: 4px;
}

.wp-block-button.has-sggw-button-icon-start
	> .wp-block-button__link::before,
.wp-block-button.has-sggw-button-icon-end
	> .wp-block-button__link::after,
.wp-block-button.has-sggw-button-icon-only
	> .wp-block-button__link::before {
	color: currentColor;
	content: var(--sggw-button-icon-glyph);
	flex: 0 0 auto;
	font-family: var(--sggw-icon-font-family);
	font-size: var(--sggw-icon-size-medium);
	font-style: normal;
	font-weight: var(--sggw-icon-font-weight-regular);
	line-height: 1;
	text-decoration: none;
}

.wp-block-button.has-sggw-small-size.has-sggw-button-icon-start
	> .wp-block-button__link::before,
.wp-block-button.has-sggw-small-size.has-sggw-button-icon-end
	> .wp-block-button__link::after,
.wp-block-button.has-sggw-small-size.has-sggw-button-icon-only
	> .wp-block-button__link::before {
	font-size: var(--sggw-icon-size-small);
}

.wp-block-button.has-sggw-button-icon-only > .wp-block-button__link {
	block-size: var(--wp--preset--spacing--70) !important;
	column-gap: 0;
	font-size: 0 !important;
	inline-size: var(--wp--preset--spacing--70) !important;
	line-height: 0 !important;
	min-inline-size: var(--wp--preset--spacing--70);
	padding: 0 !important;
	white-space: nowrap;
}

.wp-block-button.has-sggw-small-size.has-sggw-button-icon-only
	> .wp-block-button__link {
	block-size: var(--wp--preset--spacing--50) !important;
	inline-size: var(--wp--preset--spacing--50) !important;
	min-inline-size: var(--wp--preset--spacing--50);
}

.wp-block-button.has-sggw-large-size.has-sggw-button-icon-only
	> .wp-block-button__link {
	block-size: calc(var(--wp--preset--spacing--70) + (2 * 4px)) !important;
	inline-size: calc(var(--wp--preset--spacing--70) + (2 * 4px)) !important;
	min-inline-size: calc(var(--wp--preset--spacing--70) + (2 * 4px));
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-read-more.wp-element-button.is-style-outline {
	background-color: transparent !important;
	border-color: var(--wp--custom--component--button--outline--border) !important;
	color: var(--wp--custom--component--button--outline--foreground) !important;
}

.wp-block-button.is-style-sggw-ghost > .wp-block-button__link,
.wp-block-read-more.wp-element-button.is-style-sggw-ghost {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--sggw-text) !important;
}

.wp-block-button > .wp-block-button__link:focus:not(:focus-visible),
.wp-block-read-more.wp-element-button:focus:not(:focus-visible) {
	outline: none !important;
}

.wp-block-button > .wp-block-button__link:focus-visible,
.wp-block-read-more.wp-element-button:focus-visible {
	outline: var(--wp--custom--line--focus-ring-width) solid var(--sggw-line-focus) !important;
	outline-offset: var(--wp--custom--line--focus-ring-offset) !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible:not(:active),
.wp-block-read-more.wp-element-button.is-style-outline:focus-visible:not(:active) {
	background-color: color-mix(
		in srgb,
		var(--wp--custom--component--button--outline--foreground) var(--wp--custom--state-layer--hover),
		transparent
	) !important;
	border-color: var(--wp--custom--component--button--outline--border) !important;
	color: var(--wp--custom--component--button--outline--foreground) !important;
}

.wp-block-button.is-style-sggw-ghost > .wp-block-button__link:focus-visible:not(:active),
.wp-block-read-more.wp-element-button.is-style-sggw-ghost:focus-visible:not(:active) {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--hover),
		transparent
	) !important;
	border-color: transparent !important;
	color: var(--sggw-text) !important;
}

@media (hover: hover) {
	.wp-block-button > .wp-block-button__link:hover,
	.wp-block-button.is-style-outline > .wp-block-button__link:hover,
	.wp-block-button.is-style-sggw-ghost > .wp-block-button__link:hover,
	.wp-block-read-more.wp-element-button:hover,
	.wp-block-read-more.wp-element-button.is-style-outline:hover,
	.wp-block-read-more.wp-element-button.is-style-sggw-ghost:hover {
		background-color: var(--wp--custom--component--button--background-hover) !important;
		border-color: transparent !important;
		color: var(--wp--custom--component--button--foreground-hover) !important;
	}
}

.wp-block-button > .wp-block-button__link:active,
.wp-block-read-more.wp-element-button:active {
	background-color: var(--wp--custom--component--button--background-pressed) !important;
	border-color: transparent !important;
	color: var(--wp--custom--component--button--foreground) !important;
}

.wp-block-button.is-style-outline > .wp-block-button__link:active,
.wp-block-read-more.wp-element-button.is-style-outline:active {
	background-color: color-mix(
		in srgb,
		var(--wp--custom--component--button--outline--foreground) var(--wp--custom--state-layer--pressed),
		transparent
	) !important;
	border-color: var(--wp--custom--component--button--outline--border) !important;
	color: var(--wp--custom--component--button--outline--foreground) !important;
}

.wp-block-button.is-style-sggw-ghost > .wp-block-button__link:active,
.wp-block-read-more.wp-element-button.is-style-sggw-ghost:active {
	background-color: color-mix(
		in srgb,
		var(--sggw-text) var(--wp--custom--state-layer--pressed),
		transparent
	) !important;
	border-color: transparent !important;
	color: var(--sggw-text) !important;
}

@media (forced-colors: active) {
	.wp-block-button > .wp-block-button__link,
	.wp-block-button.is-style-outline > .wp-block-button__link,
	.wp-block-button.is-style-sggw-ghost > .wp-block-button__link,
	.wp-block-read-more.wp-element-button,
	.wp-block-read-more.wp-element-button.is-style-outline,
	.wp-block-read-more.wp-element-button.is-style-sggw-ghost {
		background-color: ButtonFace !important;
		border-color: ButtonBorder !important;
		color: ButtonText !important;
		forced-color-adjust: none;
	}

	.wp-block-button > .wp-block-button__link:is(:hover, :focus-visible, :active),
	.wp-block-button.is-style-outline > .wp-block-button__link:is(:hover, :focus-visible, :active),
	.wp-block-button.is-style-sggw-ghost > .wp-block-button__link:is(:hover, :focus-visible, :active),
	.wp-block-read-more.wp-element-button:is(:hover, :focus-visible, :active),
	.wp-block-read-more.wp-element-button.is-style-outline:is(:hover, :focus-visible, :active),
	.wp-block-read-more.wp-element-button.is-style-sggw-ghost:is(:hover, :focus-visible, :active) {
		background-color: Highlight !important;
		border-color: Highlight !important;
		color: HighlightText !important;
	}

	.wp-block-button > .wp-block-button__link:focus-visible,
	.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
	.wp-block-button.is-style-sggw-ghost > .wp-block-button__link:focus-visible,
	.wp-block-read-more.wp-element-button:focus-visible {
		outline-color: Highlight !important;
	}
}