@import '../../sass/colors';
@mixin circle-btn($color, $size){
	border:none;
	background-color:$color;
	color:black;
	width: $size;
	height: $size;
	margin: 4px;
	font-size: $size/2;
	border-radius: $size/2;
	box-shadow:2px 2px 4px hsla(0,0%,0%,1);
	transition: 
		transform .1s ease-out, 
		box-shadow .1s ease-out;
	&:hover{
		transform:scale(1.1);
		box-shadow:3px 3px 5px hsla(0,0%,0%,.5);
		background-color:lighten($color, 3%);
		cursor:pointer;
	}
	&:active{
		transform:scale(1.05);
	}
	&:focus{
		outline:none;
	}
}//cricle-btn end
.circle{@include circle-btn($vue_green, 24px);}
.circle-lg{@include circle-btn(pink, 48px);}