Chat Attachment

/* A fixed-size tile: file chips are one width however long the name, images
   are square. The remove button sits on the top corner and shows on hover,
   on keyboard focus, and always on devices that cannot hover. */
.pds-chat-attachment__item {
	align-items: center;
	background-color: var(--pds-color-surface-default-secondary);
	border: var(--pds-border-width-default) solid var(--pds-color-border-default);
	border-radius: var(--pds-border-radius-input);
	box-sizing: border-box;
	color: var(--pds-color-foreground-default-secondary);
	display: flex;
	gap: var(--pds-spacing-2xs);
	height: var(--pds-spacing-3xl);
	padding: 0 var(--pds-spacing-xs);
	position: relative;
	width: var(--pds-spacing-9xl);
}

.pds-chat-attachment__item--image {
	justify-content: center;
	padding: 0;
	width: var(--pds-spacing-3xl);
}

/* Error: critical colors on the tile. */
.pds-chat-attachment__item--error {
	background-color: var(--pds-color-status-critical-background);
	border-color: var(--pds-color-status-critical-border);
	color: var(--pds-color-status-critical-foreground);
}

.pds-chat-attachment__icon {
	flex-shrink: 0;
}

.pds-chat-attachment__name {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	min-width: 0;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.pds-chat-attachment__image {
	border-radius: var(--pds-border-radius-input);
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.pds-chat-attachment__remove {
	background-color: var(--pds-color-surface-default);
	border: var(--pds-border-width-default) solid var(--pds-color-border-default);
	border-radius: 100%;
	inset-block-start: calc(var(--pds-spacing-2xs) * -1);
	inset-inline-end: calc(var(--pds-spacing-2xs) * -1);
	opacity: 0;
	position: absolute;
}

.pds-chat-attachment__item:hover .pds-chat-attachment__remove,
.pds-chat-attachment__item:focus-within .pds-chat-attachment__remove {
	opacity: 1;
}

@media (hover: none) {
	.pds-chat-attachment__remove {
		opacity: 1;
	}
}

/* The IconButton hover and pressed fills are translucent, which lets the image
   show through the remove button. Keep an opaque surface underneath and lay
   the same tint over it. */
.pds-chat-attachment__remove.pds-icon-button:hover:enabled,
.pds-chat-attachment__remove.pds-icon-button:active:enabled {
	background-color: var(--pds-color-surface-default);
	background-image: linear-gradient(
		var(--icon-button-background-hover),
		var(--icon-button-background-hover)
	);
}