/* Fontawesome
   ------------------------------------------ */
.icon-circle {
	border-radius: 21px;
	height: 42px;
	width: 42px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid $primary;
	background-color: transparent;
}
a {
	cursor: pointer;
	i {
		background-color: transparent;
	}
}
/* Icons
   ------------------------------------------ */

.ico {
	color: transparent;
	display: block;
	height: 20px;
	text-indent: -9990px;
	width: 20px;

	&.ico-blue {
		@extend .bg-blue;
		@include transition(all 0.3s ease);

		&:hover,
		&:focus {
			background: lighten($primary, 20%);
		}
	}

	&.ico-small {
		height: 12px;
		margin-left: 5px;
		width: 12px;
	}

	&.ico-search {
		@include mask("../assets/svg/ico-search.svg");
	}
	&.ico-close {
		@include mask("../assets/svg/ico-close.svg");
	}
	&.ico-user {
		@include mask("../assets/svg/ico-user.svg");
	}
	&.ico-profile {
		@include mask("../assets/svg/ico-profile.svg");
	}
	&.ico-arrow-up {
		@include mask("../assets/svg/ico-arrow-up.svg");
	}
	&.ico-down {
		@include mask("../assets/svg/ico-down.svg");
	}
	&.ico-bottom {
		@include mask("../assets/svg/ico-bottom.svg");
	}
	&.ico-drop-down {
		@include mask("../assets/svg/ico-drop-down.svg");
	}
	&.ico-add {
		@include mask("../assets/svg/ico-add.svg");
	}
	&.ico-help {
		@include mask("../assets/svg/ico-help.svg");
	}
}