@import "../styles/base/fn.wxss";

.@{wuxClassNamePrefix}-image {
	position: relative;
	overflow: hidden;
	display: flex;
	box-sizing: border-box;

	&--rounded {
		border-radius: 4px;
	}

	&--circle {
		border-radius: 50%;
	}

	&--thumbnail {
		background-color: #fff;
	    border-radius: 4px;

	    &:after {
            .hairline(#D9D9D9);
            border-width: 1px;
            border-radius: 8px;
        }
	}

	&--thumbnail &__inner, 
	&--thumbnail &__mask {
		top: 4px;
		right: 4px;
		bottom: 4px;
		left: 4px;
	}

	&--widthFix &__inner {
		position: relative;
	}

	image, 
	&__thumb {
		display: inline-block;
		overflow: hidden;
		width: 100%;
		height: 100%;
		vertical-align: middle;
	}

	&__inner {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	&--loaded &__inner {
		opacity: 1;
	}

	&__mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 20;

		&--text {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	&__text {
		color: #373a3c;
		text-align: center;
		padding: 10px;
	}
}