.svg-icon {
	line-height: 1;
	display: inline-block;

	svg {
		vertical-align: -0.125em;
		width: 1em;
		height: 1em;
		display: inline-block;
	}
}

.minimog-icon-wrap {
	line-height: 0;
}

.minimog-icon-view {
	@extend %NormalTransition;
	display: inline-block;
	font-size: 60px;
}

.minimog-icon {
	display: inline-block;
	text-align: center;
	font-size: 60px;
	line-height: 1;
	transition: all 0.3s;
	color: #818a91;

	.icon {
		@extend %NormalTransition;
	}

	img {
		width: 1em;
		max-height: 1em;
	}

	i,
	svg {
		width: 1em;
		height: 1em;
		position: relative;
		display: block;
	}

	i {
		background: inherit;

		&:before {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	svg.svg-defs-gradient {
		position: absolute !important;
		width: 0 !important;
		height: 0 !important;
	}

	.e-font-icon-svg {
		width: 1em;
		height: 1em;

		* {
			fill: currentColor;
		}
	}
}

.svg-defs-gradient {
	.stop-a,
	.stop-b {
		@extend %NormalTransition;
	}
}

.minimog-solid-icon {
	svg {
		*[stroke^='#'],
		*[stroke^='url(#'] {
			stroke: currentColor;
		}

		*[fill^='#'],
		*[fill^='url(#'] {
			fill: currentColor;
		}
	}
}

.minimog-icon-view.second {
	display: none !important;
}

.minimog-view-stacked {
	.minimog-icon-view {
		padding: .5em;
		background-color: #111;
	}
}

.minimog-view-bubble {
	.minimog-icon-wrap {
		position: relative;
		display: inline-block;
		padding-bottom: 21px;
	}

	.minimog-icon-view {
		border-radius: 50%;
		background-image: linear-gradient(-225deg, rgba(241, 212, 211, .17) 15%, rgba(223, 169, 168, .17) 85%);

		&.first {
			padding: .84em;
		}

		&.second {
			display: inline-block !important;
			padding: .28em;
			position: relative;
			bottom: 21px;
			margin-left: 22px;
		}

		.icon {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0;
		}
	}
}

.minimog-shape-circle {
	.minimog-icon-view {
		border-radius: 50%;
	}
}
