.cl-image {
	flex-shrink: 0;
	position: relative;
	font-size: $cl-font-size;
	overflow: hidden;

	&__target {
		display: inline-block;
		height: 100%;
		width: 100%;
		max-height: 100%;
		max-width: 100%;
		border-radius: inherit;
	}

	&__loading,
	&__placeholder {
		position: absolute;
		left: 0;
		top: 0;
	}

	&__loading,
	&__placeholder,
	&__error {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.icon {
			font-size: 50rpx;
			color: $cl-color-info;
		}
	}

	&__loading {
		background-color: #f6f7fa;
	}

	&__error {
		text-align: center;
		color: $cl-color-info;
		border-radius: inherit;

		.text {
			font-size: 24rpx;
		}
	}

	&.is-round {
		.cl-image__placeholder,
		.cl-image__error,
		.cl-image__target {
			border-radius: 100%;
		}
	}

	&.is-error {
		background-color: #f6f7fa;
	}
}