.pretty {
    &.p-icon {
        .state {
			img,
			.icon,
			.svg {
				opacity: 0;
				@extend %posAbsolute;
				width: 15px;
				height: 15px;
				top: 0;
				left: 0;
				z-index: $pretty--z-index-between;
				text-align: center;
				line-height: normal;
				font-size: 1em;
			}
			svg,
			img:before,
			.icon:before {
				margin: 0;
				@extend %width100;
				@extend %height100;
				text-align: center;
				@extend %displayFlex;
				flex: 1;
				justify-content: center;
				align-items: center;
				line-height: 1;
			}
        }
        input {
            &:checked ~ .state {
                img,
                .icon,
                .svg {
                    opacity: 1;
                }
            }
        }
    }
}