@use "mixins";

%body {
	color: var(--body-color, var(--color-body));
	font-weight: var(--body-font-weight, unset);
	font-size: var(--body-font-size, var(--font-size-md));
	font-family: var(--body-font-family, unset);
	font-style: var(--body-font-style, normal);
	line-height: var(--body-line-height, var(--line-height-lg));
	background: var(--body-background-color, var(--color-background));
}

%heading {
	margin-top: var(--heading-margin-top, 0);
	margin-bottom: var(--heading-margin-bottom, var(--spacing-md));
	color: var(--heading-color, var(--color-heading));
	font-weight: var(--heading-font-weight, unset);
	font-family: var(--heading-font-family, unset);
	font-style: var(--heading-font-style, normal);
	line-height: var(--heading-line-height, var(--line-height-sm));
	letter-spacing: var(--heading-letter-spacing, normal);
	text-transform: var(--heading-text-transform, none);
	text-wrap: var(--heading-text-wrap, wrap);

	@include mixins.mq(false, md) {
		word-break: var(--heading-word-break, break-word);
	}

	&:last-child {
		--heading-margin-bottom: 0;
	}

	.entry-content > &:not(:first-child) {
		--heading-margin-top: var(--spacing-xxl);
	}
}

%button {
	position: relative;
	display: var(--button-display, inline-flex);
	gap: var(--spacing-xs);
	align-items: center;
	justify-content: center;
	width: var(--button-width, auto);
	max-height: var(--button-max-height, 100%);
	margin: var(--button-margin, 0);
	padding: var(--button-padding, 0.9rem 2rem);
	color: var(--button-color); // Color contrast automatically generated.
	font-weight: var(--button-font-weight, var(--body-font-weight));
	font-size: var(--button-font-size, var(--font-size-base));
	font-family: var(--button-font-family, var(--body-font-family));
	line-height: var(--button-line-height, 1.1);
	letter-spacing: var(--button-letter-spacing, normal);
	white-space: var(--button-white-space, normal);
	text-align: var(--button-text-align, center);
	text-transform: var(--button-text-transform, none);
	text-decoration: var(--button-text-decoration, none);
	word-break: var(--button-word-break, normal);
	overflow-wrap: var(--button-overflow-wrap, break-word);
	background: var(--button-background, var(--color-primary));
	border: var(--button-border, 0);
	border-radius: var(--button-border-radius, var(--border-radius));
	outline: var(--button-outline, none);
	box-shadow: var(--button-box-shadow, none);
	transform: var(--button-transform, none);
	filter: var(--button-filter, none);
	cursor: var(--button-cursor, pointer);
	opacity: var(--button-opacity, 1);
	transition: var(--button-transition, var(--transition));

	// Ordered via https://css-tricks.com/snippets/css/link-pseudo-classes-in-order/
	&:hover,
	&:active,
	&:focus-visible {
		color: var(--button-color-hover, var(--button-color));
		text-decoration: var(--button-text-decoration-hover, var(--button-text-decoration, none));
		background: var(--button-background-hover, var(--color-primary-dark, var(--button-background, var(--color-primary))));
		border: var(--button-border-hover, var(--button-border, 0));
		outline: var(--button-outline-hover, var(--button-outline, none));
		box-shadow: var(--button-box-shadow-hover, var(--button-box-shadow, none));
		transform: var(--button-transform-hover, var(--button-transform, none));
		filter: var(--button-filter-hover, var(--button-filter, none));
	}
}

%button-secondary {
	--button-color: var(--button-secondary-color); // Color contrast automatically generated.
	--button-color-hover: var(--button-secondary-color-hover, var(--button-secondary-color));
	--button-background: var(--button-secondary-background, var(--color-secondary));
	--button-background-hover: var(--button-secondary-background-hover, var(--color-secondary-dark, var(--color-secondary)));
}

%button-outline {
	--button-max-height: calc(100% - (var(--button-outline-width, 2px) * 2)); // Makes height same as button with no border.
	--button-color: var(--button-outline-color, var(--color-primary));
	--button-color-hover: var(--button-outline-color-hover, var(--color-white));
	--button-background: var(--button-outline-background, transparent);
	--button-background-hover: var(--button-outline-background-hover, var(--button-outline-color, var(--button-color)));
	--button-border: var(--button-outline-width, 2px) solid var(--button-outline-color, var(--button-color));
	--button-border-hover: var(--button-border);
}

%button-link {
	--button-color: var(--button-link-color, var(--color-link));
	--button-color-hover: var(--button-link-color-hover, var(--color-link-dark, var(--link-color-hover, var(--color-link-dark))));
	--button-background: var(--button-link-background, transparent);
	--button-background-hover: var(--button-link-background-hover, transparent);
	--button-padding: var(--button-link-padding, 0.9rem 0.5rem);
	--button-border: 0;
	--button-box-shadow: none;
	--button-box-shadow-hover: none;

	&::after {
		display: inline-flex;
		flex: 0 1 auto;
		width: 0.75em;
		height: 0.75em;
		background: currentColor;
		mask-image: var(--button-link-url, "");
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		content: "";
	}
}

%button-small {
	--button-padding: var(--button-small-padding, 0.75rem 1.25rem);
	--button-font-size: var(--button-small-font-size, 0.8rem); // Default buttons use font-base so can't use scale.
}

%button-large {
	--button-padding: var(--button-large-padding, 1.25rem 2.5rem);
	--button-font-size: var(--button-large-font-size, 1.25rem); // Default buttons use font-base so can't use scale.
}

%button-disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

%button-editor {
	// Admin logic for all editor buttons.
	padding: var(--button-padding, 0.9rem 2rem);
	border: var(--button-border, 0);
	border-color: currentColor;

	&:not(.has-text-color) {
		color: var(--button-color);
	}

	&:not(.has-background) {
		background: var(--button-background, var(--color-primary));
	}

	// Disable background color on hover for editor.
	@include mixins.hover-focus {
		--button-background-hover: var(--button-background, var(--color-primary));
	}
}

%caption {
	color: var(--caption-color, var(--color-body));
	font-size: var(--caption-font-size, var(--font-size-xs));
	text-align: var(--caption-text-align, (center));
}

%cite {
	color: var(--cite-color, var(--color-body));
	font-weight: var(--cite-font-weight, bolder);
	font-size: var(--cite-font-size, 0.8rem);
	font-family: var(--cite-font-family, var(--heading-font-family));
	font-style: var(--cite-font-style, normal);
}

%dark-bg {
	color: var(--color-white);
	--heading-color: var(--color-white);
	--link-color: currentColor;
	--link-color-hover: currentColor;
	--link-text-decoration: underline;
	--link-filter-hover: brightness(0.8);
	--entry-title-link-color: var(--color-white); // For Mai Post Grid in side has-dark-background.
	--entry-title-link-color-hover: var(--color-white); // For Mai Post Grid in side has-dark-background.
	--menu-item-link-color: var(--color-white);
	--menu-item-link-color-hover: var(--color-white);
	--menu-item-name-filter-hover: brightness(0.8);
	--border: 1px solid rgba(255, 255, 255, 0.2);
}