/* =============================================================================
- Icon General
============================================================================= */
.gwel-icon {
	line-height: 1;
	position: relative;
	color: var(--gwel-icon--text-c, #b8b8b8);
	font-size: var(--gwel-icon--size, 24px);
	top: var(--gwel-icon--vertical-top, 0px);
	text-align: center;
	i {
		font-size: 1em;
		width: 1em;
		height: 1em;
	}
	svg {
		display: block;
		width: 1em;
		height: auto;
		max-height: 1em;
		fill: currentColor;
		g,
		path {
			fill: inherit;
		}
	}
	&.gwel-icon-view-stacked {
		padding: var(--gwel-icon--padding, 0.5em);
		color: var(--gwel-icon--text-c, #ffffff);
		background-color: var(--gwel-icon--background-c, #b8b8b8);
		border-radius: var(--gwel-icon--border-radius, 100%);
	}
	&.gwel-icon-view-framed {
		padding: var(--gwel-icon--padding, 0.5em);
		color: var(--gwel-icon--text-c, #b8b8b8);
		border: var(--gwel-icon--border-w, 3px) solid var(--gwel-icon--border-c, $color-grey);
		background-color: var(--gwel-icon--background-c, transparent);
		border-radius: var(--gwel-icon--border-radius, 100%);
	}
}