// ====
// Elements Classes
// ====


// --
// grid

.ht-single-row{
	@include clearfix();
	.ht-single-col{
		float: left;
	}
}


// --
// clear float

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


// --
// background
.ht-bgcover{
	@include background-size(cover);
	background-position: 50% 50%;
}
.ht-bgcontain{
	@include background-size(contain);
	background-position: 50% 50%;
}


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


// --
// ratio 

.ht-rectangle{
	position: relative;
	display: block;
	&:after {
	  content: "";
	  display: block;
	  padding-bottom: 100%;
	}
	&.ratio-11{ &:after { padding-bottom: 100%; } }
	&.ratio-21{ &:after { padding-bottom: 50%; } }
	&.ratio-12{ &:after { padding-bottom: 200%; } }
	&.ratio-32{ &:after { padding-bottom: 66.6666%; } }
	&.ratio-23{ &:after { padding-bottom: 150%; } }
	&.ratio-31{ &:after { padding-bottom: 33.3333%; } }
	&.ratio-13{ &:after { padding-bottom: 300%; } }
	&.ratio-43{ &:after { padding-bottom: 75%; } }
	&.ratio-34{ &:after { padding-bottom: 133.3333%; } }
	& > .ht-inner{
  	display: block;
		position: absolute;
  	top: 0; left: 0; right: 0; bottom: 0;
	}
}


// --
// image

.ht-fit-img{
	display: block;
	text-align: center;
	white-space: nowrap;
	&:after{
		content:"";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	span, i, img{
		display: inline-block;
		vertical-align: middle;
		max-width: 100%;
		max-height: 100%;
	}
}
.ht-img-obj-cover{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ht-img-obj-contain{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}


// --
// text
.ht-oneline{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ht-lowercasebf{
	text-transform: lowercase;
	&:first-letter{
		text-transform: uppercase;
	}
}


// --
// item
.ht-justified-items{
	width: 100%;
	.ht-single-item{
		display: table-cell;
    width: 1%;
	}
}


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


// --
// styled scroll
.ht-styled-scroll{
	@include scrollbar(4px, $grey400, $grey100);
	&.ht-styled-scroll-lg{
		@include scrollbar(8px, rgba(#000, .16));
	}
}

.on-loading{
	position: relative;
}