@charset "UTF-8";

i.icon.eye {
	position: relative;
	width: 24px;
	height: 18px;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
	border-bottom-right-radius: 100px;
	border-bottom-left-radius: 100px;
}

i.icon.eye.expanded:not(.offended) {
	height: 20px;
}

i.icon.eye.small {
	width: 21px;
	height: 15px;
	border-bottom-right-radius: 70px;
	border-bottom-left-radius: 70px;
}

i.icon.eye.small.expanded:not(.offended) {
	height: 17px;
}

i.icon.eye::after,
i.icon.eye::before {
	content: "";
	position: absolute;
	display: block;
	box-sizing: border-box;
	border-radius: 100px;
}

i.icon.eye::after {
	top: 2px;
	width: 24px;
	height: 24px;
	box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px;
}

i.icon.eye.small::after {
	width: 21px;
	height: 21px;
}

i.icon.eye.expanded:not(.offended)::after {
	box-shadow: inset 0 -6px 0 2px, inset 0 0 0 2px;
}

i.icon.eye.offended::after {
	box-shadow: inset 0px -8px 0 2px, inset 0 -7px 0 2px;
}

i.icon.eye::before {
	left: var(--left, 8px);
	bottom: var(--bottom, 4px);
	width: 8px;
	height: 8px;
	border: 2px solid var(--text-color-active);
	transition: var(--transition, 0) ease-out;
	transform: rotateX(var(--offset-x, 0)) rotateY(var(--offset-y, 0));
}

i.icon.eye.small::before {
	left: var(--left, 7px);
	bottom: var(--bottom, 3px);
	width: 7px;
	height: 7px;
}

i.icon.eye.excited::before {
	width: 6px;
	/*   border: 2px solid var(--text-color-warning, red); */
}

i.icon.eye.excited.small::before {
	width: 5px;
}

i.icon.eye.offended::before {
	display: none;
}
