@use "../abstracts/__index" as *;

a {
	color: var(--link-color, var(--color-link));
	text-decoration: var(--link-text-decoration, none);
	text-underline-offset: var(--link-text-decoration-offset, var(--spacing-xxs)); // Not all browsers support this yet.
	word-break: var(--link-word-break, break-word);
	transition: var(--link-transition, var(--transition));

	&:hover,
	&:focus-visible {
		color: var(--link-color-hover, var(--color-link-dark, var(--link-color, var(--color-link))));
		text-decoration: var(--link-text-decoration-hover, underline);
		text-underline-offset: var(--link-text-decoration-offset-hover, var(--link-text-decoration-offset, var(--spacing-xxs)));
		outline-color: var(--color-body);
		filter: var(--link-filter-hover, unset);
	}
}

p {
	width: var(--paragraph-width, auto);
	margin: var(--paragraph-margin, 0 0 var(--paragraph-margin-bottom, var(--spacing-md)));
	padding: var(--paragraph-padding, 0);

	&:empty {
		display: none;
	}

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

	&.has-background {
		--paragraph-padding: var(--spacing-lg) var(--spacing-xl);
	}
}

hr {
	clear: both;
	width: 100%;
	margin: var(--horizontal-rule-margin, (0 auto var(--spacing-md)));
}

b,
strong {
	font-weight: var(--strong-font-weight, var(--body-font-weight-bold));
	word-wrap: break-word;
}

em,
i {
	font-style: var(--emphasis-font-style, italic);
}

// This is added when highlighting a portion of text inside of a heading or paragraph block.
// TODO: What happens when a background is also added?
mark.has-inline-color {
	background: transparent;
}

blockquote {
	margin: var(--blockquote-margin, 1em auto);
	padding: var(--blockquote-padding, var(--spacing-sm) 0 var(--spacing-xs) var(--spacing-lg));
	color: var(--blockquote-color, unset);
	font-weight: var(--blockquote-font-weight, normal);
	font-size: var(--blockquote-font-size, 1em);
	font-family: var(--blockquote-font-family, var(--inherit));
	font-style: var(--blockquote-font-style, italic);
	line-height: var(--blockquote-line-height, normal);
	text-align: var(--blockquote-text-align, inherit);
	background: var(--blockquote-background, unset);
	border-top: var(--blockquote-border-top, 0);
	border-right: var(--blockquote-border-right, 0);
	border-bottom: var(--blockquote-border-bottom, 0);
	border-left: var(--blockquote-border-left, var(--border));
	box-shadow: var(--blockquote-box-shadow, none);
}

cite {

	@extend %cite;
}

pre,
code,
kbd,
samp {
	padding: var(--code-padding, (0.05em 0.5em));
	font-size: var(--code-font-size, (0.9em));
	font-family: var(--code-font-family);
	background: var(--code-background, var(--color-alt));
	border-radius: var(--code-border-radius, var(--border-radius));
}

pre {
	padding: var(--preformatted-padding, var(--spacing-md));
	overflow-x: scroll;

	--code-padding: 0;
	--code-background: transparent;
}

code.hljs {
	background: transparent;
}

.entry-excerpt,
.sidebar,
.author-box-content {
	line-height: var(--line-height-md);
}

.is-style-subheading {
	--heading-font-size: var(--font-size-lg);
	--heading-text-transform: uppercase;
	--heading-letter-spacing: 1px;
}

.has-line-height-1 {
	line-height: 1;
}

.has-line-height-xs {
	line-height: var(--line-height-xs);
}

.has-line-height-sm {
	line-height: var(--line-height-sm);
}

.has-line-height-md {
	line-height: var(--line-height-md);
}