// Typography

// Base
@include wrap-class() {
	font-weight: $font--weight;
	font-size: $font--size;
	color: color(primary, font);
	margin: 0px 20px 0 0px;
	-webkit-font-smoothing: subpixel-antialiased;
	// Headings

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		display: block;
		margin: 0.5em 0;
		padding: 0;
		color: color(primary, font);
		font-weight: $font--weight-bold;
	}

	h1 {
		font-size: $h1-font-size;
		line-height: $h1-line-height;
		color: color(primary, font);
		margin: 0;
	}
	h2 {
		font-size: $h2-font-size;
		line-height: $h2-line-height;
	}

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

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

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

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

	// Paragraph

	p {
		font-weight: $font--weight;
		font-size: $font--size;
		color: color(secondary, font);
		margin: 0;
	}

	// Links

	a {
		text-decoration: none;
		color: $font--color-link;
		font-weight: $font--medium;
		outline-color: transparent;
		outline-style: none;
		box-shadow: none;
		cursor: pointer;

		&:hover,
		&:focus,
		&:active {
			&:not(.wcc-button) {
				text-decoration: underline;
			}
		}

		&.disabled {
			pointer-events: none;
			opacity: 0.7;
			&:hover,
			&:focus,
			&:active {
				color: $font-disabled-color;
				cursor: default;
			}
		}
	}

	b,
	strong {
		font-weight: $font--weight-bold;
	}
	hr {
		border: none;
		display: block;
		height: 1px;
		background: $border-color;
		margin: 30px 0;
	}
	.wcc-text-small {
		font-size: 12px;
	}
	.wcc-section-heading {
		margin-top: 0;
		margin-bottom: 15px;
		font-weight: 500;
	}
	/* === typography === */
	$text-sizes: (
		"xl": 18px,
		"lg": 16px,
		"md": 14px,
		"sm": 13px,
		"xs": 12px,
	);

	@each $name, $size in $text-sizes {
		.wcc-text-#{$name} {
			font-size: $size;
			font-weight: $font--weight;
		}
		.wcc-text-semi-#{$name} {
			font-size: $size;
			font-weight: $font--medium;
		}	
	}
	.wcc-text-secondary-dark {
		color: #4e4b66 !important;
	}
	.wcc-text-secondary-light {
		color: #a0a3bd !important;
	}
}