$accent: red;
/**
 * @# Icon
 **/

.wolf-core-icon {
	display: inline-block;
	//line-height: 1;
	transition: all 0.3s;
	font-size: 50px;
	text-align: center;

	a {
		color: inherit;
	}

	i,
	.elementor-icon svg {
		width: 1em;
		height: 1em;
		position: relative;
		display: block;
	}
}

.fab {
	font-size: inherit;
}

.fa-stack {
	width: 2em !important;
}

.wolf-core-icon-view-stacked {
	.wolf-core-icon {
		background-color: $accent;
		padding: 0.5em;
		color: #fff;
		fill: #fff;
	}
}

.wolf-core-icon-view-framed {
	.wolf-core-icon {
		padding: 0.5em;
		border: 3px solid transparent;
		background-color: transparent;
		fill: $accent;
		color: $accent;
		border-color: $accent;
	}
}

.wolf-core-icon-shape-circle {
	.wolf-core-icon {
		border-radius: 50%;
	}
}

/* Round */
.wolf-core-icon-background-style-rounded,
.wolf-core-icon-background-style-rounded-outline {
	.wolf-core-icon-container {
		border-radius: 999em;
	}
}

.wolf-core-icon-background-style-rounded-less,
.wolf-core-icon-background-style-rounded-less-outline {
	.wolf-core-icon-container {
		border-radius: 0.5em;
	}
}

/* Outline */
.wolf-core-icon-background-style-rounded-outline,
.wolf-core-icon-background-style-boxed-outline,
.wolf-core-icon-background-style-rounded-less-outline {
	.wolf-core-icon-container {
		background-color: transparent !important;
	}
}

/* Ban */
.wolf-core-icon-background-style-ban {
	.wolf-core-icon-container {
		background-color: transparent !important;
		border: none !important;
	}
}

/* Rounded */
.wolf-core-icon-background-style-rounded-less,
.wolf-core-icon-background-style-rounded-less-outline {
	.wolf-icon,
	.wolf-core-icon-background-fill {
		border-radius: 3px;
	}

	.fa-stack-4x {
		&.wolf-icon,
		.wolf-core-icon-background-fill {
			border-radius: 4px;
		}
	}

	.fa-stack-5x {
		&.wolf-icon,
		.wolf-core-icon-background-fill {
			border-radius: 5px;
		}
	}
}