@use './mixins' as *;

%rr-theme-br-4 { @include border-radius(4px); }
%rr-theme-br-6 { @include border-radius(6px); }
%rr-theme-br-500 { @include border-radius(500px); }

%include-bg{
	@include background();
}
%rr-transition-3 {
	@include rr-transition();
}
%rr-transition-2{
    @include rr-transition(opacity, 0.2s, ease-in-out);
}
%rr-transition-common{
	@include rr-transition();
}
%rr-transition-color{
	@include rr-transition(color);
}
%rr-transition-transform{
	@include rr-transition(transform);
}
%rr-transition-border-color{
	@include rr-transition(border-color);
}
%rr-transition-bg-color{
	@include rr-transition(background-color);
}
%rr-transition-fz{
	@include rr-transition(font-size);
}
// font
%rr-ff-fontawesome{
	font-family: var(--rr-ff-fontawesome);
}
/* transform */
%translateY1_2{
	@include transform(translateY(-50%));
}
%translateX1_2{
	@include transform(translateX(-50%));
}
%translate1_2{
	@include transform(translate(-50%, -50%));
}
// bg thumbnails
%bg-thumb{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
// hover rotate animatino
%hover-rotate-animation{
	@include transform(rotate(360deg));
	@include rr-transition();
}// hover rotate animatino
%hover-shake-animation{
	animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
	@include rr-transition();
}

// hover overlay
%hover-after-overlay-animation {
	position: relative;
	z-index: 1;
	overflow: hidden;
	
	&:after {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		@include rr-transition();
		z-index: -1;
		background-color: rgba(1, 9, 21, 0.1);
		@include transform(translate(0, -100%));
	}
	
	&:hover {
		&:after {
			@include transform(translate(0, 0));
		}
	}
}