.ct-icon,
.ct-icon-container svg {
	// position: relative;
	width: var(--icon-size, 15px);
	height: var(--icon-size, 15px);
	fill: var(--icon-color, var(--color));
	transition: var(--icon-transition, fill 0.12s cubic-bezier(.455,.03,.515,.955));
}

.ct-icon,
.ct-icon-container {
	position: relative;
}

.ct-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
}


// icon size
[data-icon-size="medium"] {
	--icon-size: 20px;
}

[data-icon-size="large"] {
	--icon-size: 25px;
}


// icon position
// pro - megamenu
.ct-icon-container {
	&.ct-left {
		margin-inline-end: 0.5em;
	}

	&.ct-right {
		margin-inline-start: 0.5em;
	}
}


// icon shape
[data-icons-type*=":"] {
	--icon-container-size: calc(var(--icon-size, 15px) * 2.5);

	.ct-icon-container {
		width: var(--icon-container-size);
		height: var(--icon-container-size);
		border-radius: var(--border-radius);
		transition: background 0.12s cubic-bezier(.455,.03,.515,.955),
					border-color 0.12s cubic-bezier(.455,.03,.515,.955);
	}
}

[data-icons-type*="square"] {
	--border-radius: 2px;
}

[data-icons-type*="rounded"] {
	--border-radius: 100%;
}

[data-icons-type] > * {
	transition: none;

	&:hover svg {
		fill: var(--icon-hover-color, var(--paletteColor2));
	}
}


// icon shape color
[data-icons-type*="solid"] {
	.ct-icon-container {
		background-color: var(--background-color);
	}

	> *:hover .ct-icon-container {
		background-color: var(--background-hover-color);
	}
}

[data-icons-type*="outline"] {
	.ct-icon-container {
		border: 1px solid var(--background-color);
	}

	> *:hover .ct-icon-container {
		border-color: var(--background-hover-color);
	}
}