@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;

	:is(.small) {
		width: 21px;
		height: 15px;
		border-bottom-right-radius: 70px;
		border-bottom-left-radius: 70px;

		&::before {
			left: var(--left, 7px);
			bottom: var(--bottom, 3px);
			width: 7px;
			height: 7px;
		}

		&::after {
			width: 21px;
			height: 21px;
		}
	}

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

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

	&::after {
		top: 2px;
		width: 24px;
		height: 24px;
		box-shadow:
			inset 0 -8px 0 2px,
			inset 0 0 0 2px;
	}
}