:host {
	height: auto;
	container-type: inline-size;
}

:host(:not([hidden])) {
	display: block;
}

:host::part(content) {
	overflow: visible; /* prevents buttons hover shadow clipping */
}

.ui5-li-root.ui5-uci-root {
	padding: 1rem;
}

.ui5-uci-buttons {
	display: flex;
	margin-inline-start: 1rem;
	gap: 0.5rem;
}

/* Thumbnail */
.ui5-uci-thumbnail {
	width: var(--ui5_upload_collection_thumbnail_size);
	height: var(--ui5_upload_collection_thumbnail_size);
	margin-inline-end: var(--ui5_upload_collection_thumbnail_margin_inline_end);
}

::slotted([ui5-icon][slot="thumbnail"]) {
	width: var(--ui5_upload_collection_thumbnail_size);
	height: var(--ui5_upload_collection_thumbnail_size);
	font-size: 2.5rem;
}

::slotted(img[slot="thumbnail"]) {
	width: var(--ui5_upload_collection_thumbnail_size);
	height: var(--ui5_upload_collection_thumbnail_size);
}

:host([actionable]) ::slotted([ui5-icon][slot="thumbnail"]) {
	color: var(--sapContent_IconColor);
}

/* Content */
.ui5-uci-thumbnail-and-content-container {
	flex: 1 1 auto;
	min-width: 0; /* fixes chrome overflow issue */
	display: flex;
	align-items: flex-start;
}

.ui5-uci-content-and-progress {
	max-width: 100%;
	min-width: 0;
	display: flex;
	flex: 1 1 auto;
}

.ui5-uci-content {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0; /* fixes chrome overflow issue */
}

.ui5-uci-progress-box {
	margin-inline-start: 0.5rem;
}

.ui5-uci-file-name {
	display: block;
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontLargeSize);
	margin-bottom: 0.25rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: fit-content;
}

.ui5-uci-file-name-text {
	color: var(--sapList_TextColor);
	width: 100%;
}

[ui5-link].ui5-uci-file-name {
	pointer-events: all;
}

.ui5-uci-description {
	margin-top: 0.375rem;
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontMediumSize);
	color: var(--sapContent_LabelColor);
	white-space: initial;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Edit mode */

.ui5-uci-edit-container {
	display: flex;
	align-items: center;
}

.ui5-uci-edit-container [ui5-input] {
	width: 60%;
	pointer-events: all;
	min-width: auto;
}

.ui5-uci-file-extension {
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontMediumSize);
	color: var(--sapTextColor);
	white-space: no-wrap;
	overflow: hidden;
	margin-left: 0.5rem;
	width: 40%;
	display: inline-block;
	vertical-align: middle;
}

/* Buttons */
.ui5-uci-root-editing .ui5-li-detailbtn,
.ui5-uci-root-uploading .ui5-li-detailbtn {
	display: none;
}

.ui5-uci-edit-rename-btn {
	margin-right: 0.125rem;
}

@container (max-width: 30rem) {
	:host::part(content) {
		flex-wrap: wrap;
	}

	.ui5-uci-thumbnail-and-content-container {
		width: 100%;
	}

	.ui5-uci-content-and-progress {
		flex-wrap: wrap;
	}

	.ui5-uci-progress-box {
		width: 100%;
		margin-top: .5rem;
		margin-inline-start: 0;
	}

	.ui5-uci-content {
		width: 100%;
	}

	.ui5-uci-buttons {
		margin-inline-start: var(--ui5_upload_collection_small_size_buttons_margin_inline_start);
		margin-block-start: var(--ui5_upload_collection_small_size_buttons_margin_block_start);
	}
}

.ui5-uci-progress-indicator {
	height: 1.125rem;
	margin-bottom: 0.5rem;
	padding: 5px 0;
	box-sizing: border-box;
}

.ui5-uci-progress-labels {
	display: flex;
	justify-content: space-between;
}

:host([active][actionable]) ::slotted([ui5-icon][slot="thumbnail"]),
:host([active][actionable]) .ui5-uci-file-name,
:host([active][actionable]) .ui5-uci-description {
	color: var(--sapList_Active_TextColor);
}