// =================================================================
// Typography Settings
// =================================================================

@import 'typography-variables';

// =================================================================
// Typography Styles
// =================================================================

// Base styles and typography for all HTML elements.
//
// Access: Public
//
// Since: 1.0.0

body {
	color: var(--bu-text-color, #{$color-base});
	font-family: var(--bu-text-font, #{$font-family-base});
	font-size: var(--bu-text-size, #{$font-size-base});
	line-height: var(--bu-line-height, #{$line-height-base});
}

// Links
// -----------------------------------------------------------------

// Controls base styling for all links.
//
// Access: Public
//
// Since: 1.0.0

a {
	color: var(--bu-link-color, #{$color-link});

	&:visited {
		color: var(--bu-link-color--visited, #{$color-link-visited});
	}

	// Improve readability when focused and also mouse hovered in all browsers.
	&:hover,
	&:active {
		text-decoration: none;
	}

	h1 &,
	h2 &,
	h3 &,
	h4 &,
	h5 &,
	h6 & {
		color: inherit;
	}
}

// =================================================================
// Heading Dependencies
// =================================================================

@import 'typography-tools';

// =================================================================
// Heading Styles
// =================================================================

// Styles for all h1 tags.
//
// Access: Public
//
// Since: 1.0.0

h1 {
	@extend %heading-base;
	@extend %font-size-1;
}

// Styles for all h2 tags.
//
// Access: Public
//
// Since: 1.0.0

h2 {
	@extend %heading-base;
	@extend %font-size-2;
}

// Styles for all h3 tags.
//
// Access: Public
//
// Since: 1.0.0

h3 {
	@extend %heading-base;
	@extend %font-size-3;
}

// Styles for all h4 tags.
//
// Access: Public
//
// Since: 1.0.0

h4 {
	@extend %heading-base;
	@extend %font-size-4;
}

// Styles for all h5 tags.
//
// Access: Public
//
// Since: 1.0.0

h5 {
	@extend %heading-base;
	@extend %font-size-5;
}

// Styles for all h6 tags.
//
// Access: Public
//
// Since: 1.0.0

h6 {
	@extend %heading-base;
	@extend %font-size-6;
}

// Adds the help cursor on hover to abbreviations
abbr[title] {
	cursor: help;
}

// Styles for all blockquotes.
//
// Access: Public
//
// Since: 1.0.0

:where(blockquote) {
	margin: var(--blockquote-margin, #{$font-margin-blockquote});
}

// Styles for all paragraphs and preformatted content.
//
// Access: Public
//
// Since: 1.0.0

:where(p),
:where(pre) {
	margin: var(--paragraph-margin, #{$font-margin-base});
}

// Styles for all preformatted and code content.
//
// Access: Public
//
// Since: 1.0.0

code,
kbd,
pre,
samp {
	font-family: var(--code-font-family, #{$font-family-monospace});
	font-size: var(--code-font-size, #{$font-size-base});
}

// Always hide an element when it has the `hidden` HTML attribute.
[hidden] {
	display: none !important;
}

// Lists
// -----------------------------------------------------------------

// Styles for all lists and list-like content.
//
// Access: Public
//
// Since: 1.0.0

dl,
menu,
ol,
ul {
	margin: var(--list-margin, #{$font-margin-list});
}

// Styles for definition stuff.
//
// Access: Public
//
// Since: 1.0.0

dd {
	margin: var(--dd-margin, #{$font-margin-dd});
}

// Styles menus and lists.
//
// Access: Public
//
// Since: 1.0.0

menu,
ol,
ul {
	padding: var(--list-padding, #{$font-padding-list});
}

// Styles for navigation.
//
// Access: Public
//
// Since: 1.0.0

nav {
	ul,
	ol {
		margin: 0;
		padding: 0;
	}
}

// remove margin from nested lists
ul ul,
ul ol,
ol ul,
ol ol {
	margin: 0;
}

// Code
// -----------------------------------------------------------------

// Styles for code element.
//
// Access: Public
//
// Since: 1.0.0

code {
	background: var(--code-background, #{$color-code-bg});
	color: var(--code-color, #{$color-code});
	padding: var(--code-padding, #{$font-padding-code});
	white-space: nowrap;
}


// Code Responsive Wrapper
//
// Styles for the code wrapper class.
// Adding this class around a code element enables scrolling on mobile devices.
//
// Styleguide Content.Code.Responsive Wrapper Class
//
// Access: Public
//
// Since: 1.0.0

.code {
	background: var(--code-background, #{$color-code-bg});
	border: var(--code-border, #{$border-code});
	margin: var(--code-margin, #{$font-margin-code});
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	padding: 20px;

	& + & {
		margin-top: -15px;
	}

	code {
		background: none;
		font-size: 95%;
		padding: 0;
		white-space: pre;
		word-wrap: normal;
	}
}


// Parent Block Color inheritese
// -----------------------------------------------------------------

:where( .has-text-color ) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: inherit;
	}
}

:where( .has-text-color ) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: inherit;
	}
}

:where( .has-link-color ) {
	a {
		color: inherit;
	}
}