/**
 * Button styles and theme overrides.
 * Loaded after theme.json global styles (see functions.php).
 */

/* Link button — shared by `is-style-link-button` / `is-style-link-button-arrow` and utility classes */
.wp-block-button.is-style-link-button,
.wp-block-button.is-style-link-button-arrow,
.wp-block-button.is-style-link-button-underline,
.wp-block-button.is-style-link-button-underline-arrow {
	min-height: 0;
}

.kolossal-link-button,
.kolossal-link-button-arrow,
.wp-block-button.is-style-link-button .wp-block-button__link,
.wp-block-button.is-style-link-button-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: baseline;
	justify-content: flex-start;
	padding: 0.25rem 0.5rem;
	border: 2px solid transparent;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--paragraph);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1.5;
	color: var(--wp--preset--color--black-1000);
	background-color: transparent;
	text-align: left;
	text-decoration: none;
	height: auto;
	min-height: 0;
	margin-left: -0.5rem;
	width: auto;
}

.kolossal-link-button:hover,
.kolossal-link-button-arrow:hover,
.wp-block-button.is-style-link-button .wp-block-button__link:hover,
.wp-block-button.is-style-link-button-arrow .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand-secondary-200);
	text-decoration: none;
}

.kolossal-link-button:focus,
.kolossal-link-button-arrow:focus,
.wp-block-button.is-style-link-button .wp-block-button__link:focus,
.wp-block-button.is-style-link-button-arrow .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--focus-outline);
	outline: none;
}

.kolossal-link-button-arrow,
.wp-block-button.is-style-link-button-arrow .wp-block-button__link {
	gap: 0.75rem;
}

.kolossal-link-button-arrow::before,
.wp-block-button.is-style-link-button-arrow .wp-block-button__link::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 0V1H8.295L0 9.295L0.705 10L9 1.705V8H10V0H2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 0V1H8.295L0 9.295L0.705 10L9 1.705V8H10V0H2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kolossal-link-button-underline,
.wp-block-button.is-style-link-button-underline .wp-block-button__link {
	display: inline-flex;
	align-items: baseline;
	justify-content: flex-start;
	padding: 0.25rem 0.5rem;
	border: 2px solid transparent;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--paragraph);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1.5;
	color: var(--wp--preset--color--black-1000);
	background-color: transparent;
	text-align: left;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	height: auto;
	min-height: 0;
	margin-left: -0.5rem;
	width: auto;
}

.kolossal-link-button-underline:hover,
.wp-block-button.is-style-link-button-underline .wp-block-button__link:hover {
	background-color: transparent;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.kolossal-link-button-underline:focus,
.wp-block-button.is-style-link-button-underline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--focus-outline);
	outline: none;
}

.kolossal-link-button-underline-arrow,
.wp-block-button.is-style-link-button-underline-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 0.75rem;
	padding: 0.25rem 0.5rem;
	border: 2px solid transparent;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--paragraph);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1.5;
	color: var(--wp--preset--color--black-1000);
	background-color: transparent;
	text-align: left;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	height: auto;
	min-height: 0;
	margin-left: -0.5rem;
	width: auto;
}

.kolossal-link-button-underline-arrow:hover,
.wp-block-button.is-style-link-button-underline-arrow .wp-block-button__link:hover {
	background-color: transparent;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.kolossal-link-button-underline-arrow:focus,
.wp-block-button.is-style-link-button-underline-arrow .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--focus-outline);
	outline: none;
}

.kolossal-link-button-underline-arrow::before,
.wp-block-button.is-style-link-button-underline-arrow .wp-block-button__link::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 0V1H8.295L0 9.295L0.705 10L9 1.705V8H10V0H2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 0V1H8.295L0 9.295L0.705 10L9 1.705V8H10V0H2Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 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);
			}
		}
	}
}

/* Landing — primary ↔ secondary vs default theme */
.is-style-theme-landing,
body.theme-landing {
	.wp-block-button {
		&.is-style-primary .wp-block-button__link {
			background-color: var(--wp--preset--color--brand-secondary);
			color: var(--wp--preset--color--black-1000);
			border-color: var(--wp--preset--color--black-1000);

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

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

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

			&:hover {
				background-color: var(--wp--preset--color--brand-primary-700);
			}

			&:active {
				background-color: var(--wp--preset--color--brand-primary-500);
			}
		}
	}
}

/* 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);
			}
		}
	}
}