// mixin
@mixin smallReadFont { font-family: $smallReadFont; }
@mixin readFont { font-family: $readFont; }
@mixin bigFont { font-family: $bigFont; }
@mixin alternateBigFont { font-family: $alternateBigFont; }
@mixin dekoFont { font-family: $dekoFont; }
@mixin magicDefaultFont {
  @include readFont;
  font-size: $magicDefaultFontSize;
  line-height: $magicDefaultLineHight;
}
@mixin sansThin {
	// font-family: 'Open Sans', sans-serif;
	font-family: $magicSans;
	font-weight: $magicSans-font-weight-thin;
}
@mixin sansRegular {
	font-family: $magicSans;
	font-weight: $magicSans-font-weight-regular;
}
@mixin sansSemi {
	font-family: $magicSans;
	font-weight: $magicSans-font-weight-semi;
}
@mixin sansBold {
	font-family: $magicSans;
	font-weight: $magicSans-font-weight-bold;
}
@mixin sansExtra {
	font-family: $magicSans;
	font-weight: $magicSans-font-weight-extra;
}
@mixin sansCondensedThin {
	font-family: $magicCondensedSans;
	font-weight: $magicCondensedSans-font-weight-thin;
}
@mixin sansCondensedBold {
	font-family: $magicCondensedSans;
	font-weight: $magicCondensedSans-font-weight-bold;
}

@mixin handWrittenFont {
	font-family: $magicHandwritten;
	font-weight: $magicHandwritten-font-weight;
}

@mixin sans-thin { @include sansThin; }
@mixin sans-regular { @include sansRegular; }
@mixin sans-semi { @include sansSemi; }
@mixin sans-bold { @include sansBold; }
@mixin sans-extra { @include sansExtra; }
@mixin sans-condensed-thin { @include sansCondensedThin; }
@mixin sans-condensed-bold { @include sansCondensedBold; }
@mixin handwritten-font { @include handWrittenFont; }


// Shadows:
@mixin inset_font($white: 90, $black: 50) {
	text-shadow: 	unquote(	"1px 1px 0px rgba(255,255,255,.#{$white}),
								0px 1px 0px rgba(255,255,255,.#{$white}),
								1px 0px 0px rgba(255,255,255,.#{$white}),
								-1px -1px 0px rgba(0,0,0,.#{$black}),
								0px -1px 0px rgba(0,0,0,.#{$black}),
								-1px 0px 0px rgba(0,0,0,.#{$black})" );
}

@mixin colored_inset_font($white: rgba(255,255,255,90), $black: rgba(0,0,0,.50) ) {
	text-shadow: 	unquote(	"1px 1px 0 #{$white},
								 0px 1px 0 #{$white},
								 1px 0px 0 #{$white},
								-1px -1px 0 #{$black},
								 0px -1px 0 #{$black},
								-1px 0px 0 #{$black}" 	 );
}

@mixin text_outline( $color: #000, $blur: 1px ) {
	text-shadow:        -1px  1px #{$blur} #{$color}, 
						 0px  1px #{$blur} #{$color}, 
						 1px  0px #{$blur} #{$color}, 
						 1px  1px #{$blur} #{$color}, 
						 1px -1px #{$blur} #{$color}, 
						 0px -1px #{$blur} #{$color}, 
						-1px  0px #{$blur} #{$color}, 
						 1px -1px #{$blur} #{$color};
}


// General-Helpers:


// no line break in texts, when to long for box show "..."
@mixin noWrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@mixin no_wrap {        @include noWrap; }
@mixin no_word_break {  @include noWrap; }
@mixin no-word-break {  @include noWrap; }
@mixin no-wrap {        @include noWrap; }


// user formated text .. like pre tag
@mixin preText {
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}

@mixin pre_text {  @include preText; }
@mixin pre-text {  @include preText; }
@mixin user_input {  @include preText; }
@mixin user-input {  @include preText; }


// make icons and fonts thinner in webkit (white icons on dark background)
@mixin antialiasedText {
	text-shadow: 0 0 0 rgba(0,0,0,.01);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

@mixin antialiased_text {  @include noWrap; }
@mixin antialiased-text {  @include noWrap; }


// make it smooth and app-like on mobile (best in body!)
@mixin mobileAppImprovements {
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    ::-webkit-scrollbar { display: none; }
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@mixin mobile_app_improvements {  @include mobileAppImprovements; }
@mixin mobile-app-improvements {  @include mobileAppImprovements; }


// add rules for all text elements
@mixin textTags {
	h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, span, a {
		@content;
	}
}

@mixin text_tags { @include textTags { @content; } }
@mixin text-tags { @include textTags { @content; } }