/* ====================================================== 
   <!-- Typography -->            
/* ====================================================== */

/*
 * 1. General                    
 * 2. Hyperlink                        
 * 3. Heading (h1,h2,h3,h4,h5,h6) 
 * 4. Text Effect
 * 5. Drop Cap
 * 6. Vertical Text
*/


/* 
 ---------------------------
 1. General
 ---------------------------
 */ 
a {
    @include transition-default();
}

@each $key,$value in $font-sizes {
    h#{$key},
    .uix-typo--h#{$key} {
        @include transition-default();
    }
}


/* 
 ---------------------------
 2. Hyperlink
 ---------------------------
 */ 
a {
	color: var(--uix-primary-link-color);
	text-decoration: none;
	
	&:hover{
		color: var(--uix-primary-link-hover-color);
		text-decoration: none;
	}
}

/* 
 ---------------------------
 3. Heading (h1,h2,h3,h4,h5,h6)
 ---------------------------
 */ 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.uix-typo--h1, 
.uix-typo--h2, 
.uix-typo--h3, 
.uix-typo--h4, 
.uix-typo--h5, 
.uix-typo--h6 {
	color: var(--uix-heading-text-color);
	font-weight: 700;
	font-variant-ligatures: common-ligatures;
	/*Ligatures and contextual forms are ways of combining glyphs to produce more harmonized forms.*/
	margin-top: 0;
	margin-bottom: 0.625rem;
	padding: 0 0 0.546875rem;
	word-wrap: break-word;
	

}

@each $key,$value in $font-sizes {
    h#{$key} {
        font-size: #{if($key < 5, rfs-fluid-value($value), $value)};
    }

    .uix-typo--h#{$key}  {
        font-size: #{if($key < 5, rfs-fluid-value($value), $value)} !important;
    }

}


@each $value in map-keys($font-lh) {
    // #{map-get($font-lh, $value)}

    h#{$value} {
        line-height: #{map-get($font-lh, $value)};
    }

    .uix-typo--h#{$value} {
        font-size: #{map-get($font-lh, $value)} !important;
    }

}


@media (min-width: 1200px) {

    @each $key,$value in $font-sizes {
        @if $key < 5 {

            h#{$key} {
                font-size: $value;
            }

            .uix-typo--h#{$key} {
                font-size: $value !important;
            }  

        }

    }
}

@media all and (max-width: 768px) {
    @each $key,$value in $font-sizes {

        h#{$key},
        .uix-typo--h#{$key} {
            font-size: rfs-fluid-value($value*2);
        }

    }
}


/* 
 ---------------------------
 4. Text Effect
 ---------------------------
 */ 
.uix-typo--style-normal {
	font-family: $font-stack;
	font-weight: 400 !important;
}

.uix-typo--style-uppercase {
    text-transform: uppercase !important;
}

.uix-typo--style-bold {
    font-weight: 900 !important;
}

.uix-typo--style-italic {
    font-style: italic !important;
}

.uix-typo--style-noitalic {
    font-style: normal !important;
	
	em {
		font-style: normal !important;
	}
}

.uix-typo--style-underline {
    text-decoration: underline !important;
}

.uix-typo--style-tiny {
	font-size: 0.75rem !important;
}

.uix-typo--color-primary {
	color: var(--uix-primary-text-color) !important;
	
	p {
	    color: var(--uix-primary-text-color);
	}

    @each $key,$value in $font-sizes {
        h#{$key},
        .uix-typo--h#{$key} {
            color: var(--uix-primary-text-color);
        }
    }

}


.uix-typo--color-highlight {
	color: var(--uix-highlight-color1) !important;
	
	
	p {
	    color: var(--uix-highlight-color1);
	}	


    @each $key,$value in $font-sizes {
        h#{$key},
        .uix-typo--h#{$key} {
            color: var(--uix-highlight-color1);
        }
    }
	
}

.uix-typo--color-sub {
	color: var(--uix-sub-text-color) !important;
	
	p {
	    color: var(--uix-sub-text-color);
	}

    @each $key,$value in $font-sizes {
        h#{$key},
        .uix-typo--h#{$key} {
            color: var(--uix-sub-text-color);
        }
    }

}



.uix-typo--color-white {
	color: white !important;
	text-shadow: 0 0 1px rgba(0,0,0,.1);
	
	p {
	    color: white;
		text-shadow: 0 0 1px rgba(0,0,0,.1);
	}


    @each $key,$value in $font-sizes {
        h#{$key},
        .uix-typo--h#{$key} {
            color: white;
            text-shadow: 0 0 1px rgba(0,0,0,.1);
        }
    }

}


/* 
 ---------------------------
 5. Drop Cap
 ---------------------------
 */ 
.uix-typo--dropcap::first-letter,
.uix-typo--dropcap > p:first-of-type::first-letter {
    display: block;
    margin-right: 10px;
    float: left;
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: -2px;
}

/* 
 ---------------------------
 6. Vertical Text
 ---------------------------
 */ 
.uix-typo--vertical {

	&:not(.uix-typo--vertical-characters-line) {
		writing-mode: vertical-rl;
		transform: translateX(.5rem);
		line-height: 0;/* Fix the problem of left-leaning text after rotation */
	
	}
	
	/* Defines the orientation of the text characters in a line.  */
	&.uix-typo--vertical-characters-line {
		width: 1px;
		word-wrap: break-word;
		line-height: 1;
		white-space: pre-wrap;/* this is for displaying whitespaces including Firefox */
	}
}