/* Patterns - Content - List Item Content */
////
/// @group Patterns-List_Item_Content
/// Patterns - Content - List Item Content

///
.list-item-content {
	align-items: center;
	display: flex;

	&-left {
		max-width: 120px;
		padding-right: var(--space-m);
	}

	&-center {
		flex: 1;
		overflow: hidden;
	}

	&-right {
		padding-left: var(--space-m);
	}

	&-title,
	&-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&-title {
		color: var(--color-neutral-10);
		font-size: var(--font-size-h5);
		font-weight: var(--font-semi-bold);
	}

	&-text {
		color: var(--color-neutral-7);
	}
}

///
.layout-native {
	.list-item-content {
		&-left {
			padding-right: var(--space-base);
		}

		&-right {
			padding-left: var(--space-base);
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.tablet {
	.list-item-content-title {
		font-size: calc(var(--font-size-h5) - 1px);
	}
}

///
.phone {
	.list-item-content-title {
		font-size: calc(var(--font-size-h5) - 2px);
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.list-item-content {
		&-left {
			padding-left: var(--space-m);
			padding-right: 0;
		}

		&-right {
			padding-left: 0;
			padding-right: var(--space-m);
		}
	}

	.layout-native {
		.list-item-content {
			&-left {
				padding-left: var(--space-base);
				padding-right: 0;
			}

			&-right {
				padding-left: 0;
				padding-right: var(--space-base);
			}
		}
	}

	[data-list-item] {
		.list-item-float {
			&-left {
				float: right;
			}

			&-right {
				float: left;
			}
		}
	}
}