// CLASSES

.clearfix{ @include clearfix(); }
.clearall{ @include clearall(); }

.block{ 	display: block !important; }
.iblock{ 	display: inline-block !important; }
.inline{ 	display: inline !important; }

.disabled{ pointer-events: none !important; }

.pos-sta{	position: static; }
.pos-rel{	position: relative; }
.pos-abs{	position: absolute; }

.va-top{ vertical-align: top !important; }
.va-mid{ vertical-align: middle !important; }
.va-bot{ vertical-align: bottom !important; }

.ht-bgcover{ 
	@include background-size(cover); 
	background-position: 50% 50%; 
}
.ht-rectangle{
	position: relative;
	display: block;
	&:after {
	  content: "";
	  display: block;
	  padding-bottom: 100%;
	}
	.ht-inner{
  	display: block;
		position: absolute;
  	top: 0; left: 0; right: 0; bottom: 0;
	}
	&.ratio-11{ &:after { 	padding-bottom: 100%; } }
	&.ratio-32{ &:after { 	padding-bottom: 66.6666%; } }
	&.ratio-23{ &:after {		padding-bottom: 150%; } }
	&.ratio-21{ &:after {		padding-bottom: 50%; } }
	&.ratio-12{ &:after { 	padding-bottom: 200%; } }
}
.ht-fit-image{
	display: block;
	text-align: center;
	white-space: nowrap;
	&:after{
		content:"";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	img{
		display: inline-block;
		vertical-align: middle;
		max-width: 100%;
		max-height: 100%;
	}
}
.ht-oneline{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ht-nowrap{
	white-space: nowrap;
}
.ht-noscroll{ 
  overflow: hidden;
}


// Margins & Paddings
@for $i from 0 through 12 {
	$margin: $i * 4;
	.ma-#{$margin}{ margin: $margin + px !important; }
	.mx-#{$margin}{ margin-left: $margin + px !important; margin-right: $margin + px !important; }
	.my-#{$margin}{ margin-top: $margin + px !important; margin-bottom: $margin + px !important; }
	.ml-#{$margin}{ margin-left: $margin + px !important; }
	.mr-#{$margin}{ margin-right: $margin + px !important; }
	.mt-#{$margin}{ margin-top: $margin + px !important; }
	.mb-#{$margin}{ margin-bottom: $margin + px !important; }

	$padding: $i * 4;
	.pa-#{$padding}{ padding: $padding + px !important; }
	.px-#{$padding}{ padding-left: $padding + px !important; padding-right: $padding + px !important; }
	.py-#{$padding}{ padding-top: $padding + px !important; padding-bottom: $padding + px !important; }
	.pt-#{$padding}{ padding-top: $padding + px !important; }
	.pb-#{$padding}{ padding-bottom: $padding + px !important; }
	.pl-#{$padding}{ padding-left: $padding + px !important; }
	.pr-#{$padding}{ padding-right: $padding + px !important; }
}

// Fonts
@for $i from 1 through 9 {
	$font-weight: $i * 100;
	.fw-#{$font-weight}{ font-weight: $font-weight; }
}
@for $i from 8 through 28 {
	$font-size: $i;
	.fz-#{$font-size}{ font-size: $font-size; }
}

// Colors

.color-primary-light{ 	color: $color-primary-light !important; }
.color-primary{ 				color: $color-primary !important; }
.color-primary-dark{ 		color: $color-primary-dark !important; }
.color-secondary{ 			color: $color-secondary !important; }
.color-primary-text{ 		color: $color-primary-text !important; }
.color-secondary-text{ 	color: $color-secondary-text !important; }
.color-hint-text{ 			color: $color-hint-text !important; }
.color-divider{ 				color: $color-divider !important; }

.color-active-icon{ 		color: $color-active-icon !important; }
.color-inactive-icon{		color: $color-inactive-icon !important; }

.color-white{ color: #fff; }
.bg-color-white{ background-color: #fff; }
.color-black{ color: #000; }
.bg-color-black{ background-color: #000; }

// Social Colors
@each $color-name, $hex-value in $social-colors {
  .color-#{$color-name}{
    color: #{$hex-value};
  }
  .bg-color-#{$color-name}{
    background-color: #{$hex-value};
  }
}

.ht-depth-1{
	background-color: #fff;
	@include box-shadow(0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.12));
}