asteroid/bibi/resources/styles/_#globals.scss

// ================================================================================
// + MixIns
// --------------------------------------------------------------------------------


@mixin offset($T: auto, $R: $T, $B: $T, $L: $R) { top: $T; right: $R; bottom: $B; left: $L; }  @mixin trbl($T: auto, $R: $T, $B: $T, $L: $R) { @include offset($T, $R, $B, $L); }
@mixin offset-v($T: auto, $B: $T) { top: $T; bottom: $B; }  @mixin offset-tb($T: auto, $B: $T) { @include offset-v($T, $B); }  @mixin tb($T: auto, $B: $T) { @include offset-v($T, $B); }
@mixin offset-h($L: auto, $R: $L) { left: $L; right: $R; }  @mixin offset-lr($L: auto, $R: $L) { @include offset-h($L, $R); }  @mixin lr($L: auto, $R: $L) { @include offset-h($L, $R); }

@mixin margin-v($T: 0, $B: $T) { margin-top: $T; margin-bottom: $B; }  @mixin margin-tb($T: 0, $B: $T) { @include margin-v($T, $B); }
@mixin margin-h($L: 0, $R: $L) { margin-left: $L; margin-right: $R; }  @mixin margin-lr($L: 0, $R: $L) { @include margin-h($L, $R); }

@mixin padding-v($T, $B: $T) { padding-top: $T; padding-bottom: $B; }  @mixin padding-tb($T, $B: $T) { @include padding-v($T, $B); }
@mixin padding-h($L, $R: $L) { padding-left: $L; padding-right: $R; }  @mixin padding-lr($L, $R: $L) { @include padding-h($L, $R); }

@mixin     size($W, $H: $W) {     width: $W;     height: $H; }  @mixin     wh($W, $H: $W) { @include     size($W, $H); }  @mixin     hw($H, $W: $H) { @include     size($W, $H); }
@mixin max-size($W, $H: $W) { max-width: $W; max-height: $H; }  @mixin max-wh($W, $H: $W) { @include max-size($W, $H); }  @mixin max-hw($H, $W: $H) { @include max-size($W, $H); }
@mixin min-size($W, $H: $W) { min-width: $W; min-height: $H; }  @mixin min-wh($W, $H: $W) { @include min-size($W, $H); }  @mixin min-hw($H, $W: $H) { @include min-size($W, $H); }

@mixin min($Min) { @media screen and (min-width: #{$Min}) { @content; } }
@mixin max($Max) { @media screen and (max-width: #{$Max}) { @content; } }
@mixin min-max($Min, $Max) { @media screen and (min-width: #{$Min}) and (max-width: #{$Max}) { @content; } }
@mixin max-min($Max, $Min) { @include min-max($Min, $Max) { @content; } }

@mixin keyframes($N) { @-webkit-keyframes #{$N} { @content; } @-epub-keyframes #{$N} { @content; } @-moz-keyframes #{$N} { @content; } @-ms-keyframes #{$N} { @content; } @keyframes #{$N} { @content; } }

@mixin text-combine-upright_all() { -webkit-text-combine: horizontal; text-combine: horizontal; -ms-text-combine-horizontal: all; text-combine-horizontal: all; text-combine-upright: all; }

@mixin prefix($P, $V) { -webkit-#{$P}: $V; -epub-#{$P}: $V; -moz-#{$P}: $V; -ms-#{$P}: $V; @content; #{$P}: $V; }

@mixin writing-mode($V, $D: ltr) {
	@include prefix(writing-mode, $V) {
		$V2: null;
		     @if $V == vertical-lr { $V2: tb-lr; }
		@else if $V == vertical-rl { $V2: tb-rl; }
		@else if $D == rtl         { $V2: rl-tb; }
		@else                      { $V2: lr-tb; }
		@if $V2 != null { -ms-writing-mode: $V2; }
	}
	direction: $D;
}

@mixin NonVisual() {
	display: block !important;
	position: absolute !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	left: 0 !important;
	top: 0 !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
}




// ================================================================================
// + Temporary
// --------------------------------------------------------------------------------


// - Scrollbars
// --------------------------------------------------------------------------------

$TEMPORARY__Scrollbar-Track_Size: 15px;
$TEMPORARY__Scrollbar-Thumb_Size: 8px;




// ================================================================================
// + Invariables
// --------------------------------------------------------------------------------


// - Z-Indexes
// --------------------------------------------------------------------------------

$INVARIABLE__Main_ZIndex: 1;
	$INVARIABLE__Main-Book_ZIndex: 1;

$INVARIABLE__Scrollbar_ZIndex: $INVARIABLE__Main_ZIndex + 1;

$INVARIABLE__Sub_ZIndex: 10;

$INVARIABLE__Veil_ZIndex: 100;
	$INVARIABLE__Veil-Cover_ZIndex: 1;
	$INVARIABLE__Veil-Play_ZIndex: 10;
	$INVARIABLE__Veil-ByeBye_ZIndex: 100;

$INVARIABLE__Catcher_ZIndex: $INVARIABLE__Veil_ZIndex + 1;

$INVARIABLE__Panel_ZIndex: 1000;

$INVARIABLE__Slider_ZIndex: 10000;
$INVARIABLE__Nombre_ZIndex: $INVARIABLE__Slider_ZIndex + 1;

$INVARIABLE__Menu_ZIndex: 100000;
$INVARIABLE__Arrow_ZIndex: $INVARIABLE__Menu_ZIndex + 1;
$INVARIABLE__Subpanel_ZIndex: $INVARIABLE__Menu_ZIndex + 10;

$INVARIABLE__PoweredBy_ZIndex: 1000000;

$INVARIABLE__Help_ZIndex: 10000000;

$INVARIABLE__Notifier_ZIndex: 100000000;

$INVARIABLE__Spinner_ZIndex: 99999999999;


// - MixIns
// --------------------------------------------------------------------------------

@mixin GLOBAL__FontIcon_BaseStyles($SCOPED__FamilyName, $SCOPED__FontSize: 100%, $SCOPED__LineHeight: 1) {
	font: #{$SCOPED__FontSize} / #{$SCOPED__LineHeight} $SCOPED__FamilyName;
	font-feature-settings: "kern", "liga", "clig", "calt";  -ms-font-feature-settings: "kern", "liga", "clig", "calt";  text-transform: none;
	-webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-rendering: optimizelegibility;
	speak: none;  direction: ltr;  letter-spacing: 0;  white-space: nowrap;  word-wrap: normal;  overflow-wrap: normal;
}