@import "var";

.@{prefixName}-item {
	position: relative;
	display: flex;
	width: 100%;
	height: @item-sm-height;
	line-height: @item-line-height;
	padding: @item-padding-vertical @item-padding-horizontal;
	background-color: @item-background-color;
	align-items: center;
	box-sizing: border-box;

	&.size-md {
		height: @item-md-height;
	}

	&.size-lg {
		height: @item-lg-height;
	}

	&.size-auto {
		height: auto;
		align-items: stretch;
	}

	&.is-required:before {
		position: absolute;
		content: '*';
		font-size: inherit;
		left: 7px;
		color: @item-required-color;
	}

	&.is-clickable:active {
		background-color: @item-background-hover-color;
	}

	&.@{prefixName}-hairline--bottom {
		&::after {
			left: @item-padding-horizontal;
		}

		&.with-icon {
			&::after {
				left: 52px;
			}
		}

		&.with-thumb {
			&::after {
				left: @item-thumb-size + @item-left-thumb-margin-right + @item-padding-horizontal;
				// left: 104px;
			}
		}
	}

	&__left-icon {
		display: flex;
		margin-right: @item-left-icon-margin-right;
		align-items: center;
	}

	&__body {
		flex: 1 1 auto;
	}

	&__title {
		font-size: @item-title-text-size;
		color: @item-title-text-color;
	}

	&__description {
		font-size: @item-description-text-size;
		color: @item-description-text-color;
	}

	&__title + &__description {
		margin-top: @item-description-margin-top;
	}

	&.size-sm, 
	&.size-md, 
	&.size-lg {
		.@{prefixName}-item__body, 
		.@{prefixName}-item__title, 
		.@{prefixName}-item__description, 
		.@{prefixName}-item__value {
			.text-ellipsis();
		}
	}

	&.size-auto {
		.@{prefixName}-item__body, 
		.@{prefixName}-item__title, 
		.@{prefixName}-item__description {
			.word-break();
		}
	}

	&__thumb--left,
	&__thumb--right {
		display: flex;
		width: @item-thumb-size;
		height: inherit;
		flex: 0 0 auto;
		flex-direction: column;

		.@{prefixName}-item__thumb {
			position: relative;
			width: 100%;
			height: 0;
			padding-top: 100%;

			&-image {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				width: auto;
				height: auto;
				max-height: 100%;
			}
		}
	}

	&__thumb--left {
		margin-right: @item-left-thumb-margin-right;
	}

	&__thumb--right {
		margin-left: @item-right-thumb-margin-left;
	}

	&__value {
		flex: 1 0 25%;
		font-size: @item-value-text-size;
		color: @item-value-text-color;
		margin-left: 8px;
		text-align: right;
	}

	&__body:empty,
	&__value:empty {
		display: none;
	}

	&__body:empty + &__value {
		flex: 1;
		margin-left: 0;
	}

	&__right-icon {
		display: flex;
		margin-right: -8px;
		align-items: center;
	}

	&__detail-icon {
		margin-left: auto;
	}

	&__detail-icon--vertical {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
}