@use '_normalize';
@use '_reset';
@use '_variables' as * ;


// Typography
//

// todo: CSS is used in the iframes in Detail and Editor (tinymce)

html, .mce-content-body {
	font-size: 16px; // = 1rem (for spacing)
}

body, .mce-content-body {
	font-family: $font-family-base, sans-serif;
	font-weight: $font-weight-base;
	font-size: $font-size-base;
	line-height: $line-height-base;
	color: $body-color;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: $headings-font-weight;
	line-height: $headings-line-height;
	color: $headings-color;
	margin-bottom: $spacer-sm;
}

h1 {
	font-size: $h1-font-size;
}

h2 {
	font-size: $h2-font-size;
}

h3 {
	font-size: $h3-font-size;
}

h4 {
	font-size: $h4-font-size;
}

h5 {
	font-size: $h5-font-size;
}

h6 {
	font-size: $h6-font-size;
}

p {
	margin-bottom: $paragraph-margin-bottom;
}

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

	&:hover,
	&:focus {
		color: var(--link-hover-color, #{$link-hover-color});
		text-decoration: $link-hover-decoration;
	}

	&:focus {
		outline: 1px solid $component-focus-border-color;
		box-shadow: inset 0 0 0 1px $component-focus-shadow-color, 0 0 0 1px $component-focus-shadow-color;
	}
}

b, strong {
	font-weight: $font-weight-bold;
}

.italic {
	font-style: italic;
}

ul, ol {
	padding-left: $spacer;
}

ol {
	list-style-type: auto;
}

ul {
	list-style-type: disc;
}

kbd {
	padding: 1px $spacer-xs;
	display: inline-block;
	border: 1px solid $gray-400;
	background: white;
	border-radius: $border-radius-sm;
	text-align: center;
}

blockquote {
    margin-left: $spacer-lg;
    padding-left: $spacer-sm;
    border-left: 3px solid $gray-200;
}
