// Transaction
@mixin transaction( $propertty, $duration, $timing ){
	transition: $propertty $duration $timing;
    -moz-transition: $propertty $duration $timing;
    -webkit-transition: $propertty $duration $timing;
    -o-transition: $propertty $duration $timing;
}

//Tag - used for a tag
@mixin tag(){
	background-color: #f5f5f5;
	border: solid 1px #f5f5f5;
	color: var(--heading);
	border-radius: 100px;
	padding: 15px 30px;
	font-size: 12px!important;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	

	@include transaction( all, 0.3s, linear );

	&:hover{
		background-color: var(--primary);
		border-color: var(--primary);
		color: #fff;
	}
}