@use "../../core/mixin" as mixin;

// Assign heading styles
.bigger-title {
	@include mixin.bigger-title;
}

h1,
.t1 {
	@include mixin.t1;
}

h2,
.t2 {
	@include mixin.t2;
}

h3,
.t3 {
	@include mixin.t3;
}

h4,
.t4 {
	@include mixin.t4;
}

h5,
.t5 {
	@include mixin.t5;
}

h6,
.t6 {
	@include mixin.t6;
}

// Assign text content styles
.biggest {
	@include mixin.biggest;
}

.bigger {
	@include mixin.bigger;
}

.big-text {
	@include mixin.big;
}

.normal {
	@include mixin.normal;
}

.small-text {
	@include mixin.small;
}

.smaller {
	@include mixin.smaller;
}

.supersmall {
	@include mixin.supersmall;
}

// Default text styles
body {
	@include mixin.normal;
	color: var(--text-color-default);
	font-family: var(--body-font);
}

// classes for font-family
.body-font {
	font-family: var(--body-font);
	color: var(--text-color-default);
}

.heading-font {
	font-family: var(--heading-font);
}

// Blockquote
blockquote {
	@include mixin.big;
	font-style: italic;
	letter-spacing: 0.01em;
	margin-left: 2rem;
	position: relative;
	opacity: 0.9;

	@include mixin.from(lg) {
		margin-left: 4rem;
	}

	&::before {
		content: "\201C";
		font-family: Georgia, serif;
		font-size: 3em;
		position: absolute;
		top: 0.5em;
		left: -0.6em;
		line-height: 0;
		letter-spacing: -0.5em;
	}
}

// Links
// Menu links doesn't have underline
a {
	color: var(--text-color-default);

	main & {
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

::selection {
	background: var(--selection-color);
	color: #fff;
}

.blue-font-color {
	--text-color-default: #1192ee;
	color: var(--text-color-default);
}
.green-font-color {
	--text-color-default: #28a745;
	color: var(--text-color-default);
}
.red-font-color {
	--text-color-default: #dc3545;
	color: var(--text-color-default);
}
.celeste-font-color {
	--text-color-default: #4fc2f3;
	color: var(--text-color-default);
}
.orange-font-color {
	--text-color-default: #ffc107;
	color: var(--text-color-default);
}
.dark-font-color {
	--text-color-default: #343a40;
	color: var(--text-color-default);
}
.sea-font-color {
	--text-color-default: #30c6ab;
	color: var(--text-color-default);
}
.gray-font-color {
	--text-color-default: #6c757d;
	color: var(--text-color-default);
}
.light-font-color {
	--text-color-default: #eff3f5;
	color: var(--text-color-default);
}