@derockdev/discord-components-core/dist/collection/components/discord-attachment/discord-attachment.css

Web components to easily build and display fake Discord messages on your webpages.

.discord-attachment {
	color: #dcddde;
	display: flex;
	font-size: 13px;
	line-height: 150%;
	margin-bottom: 8px;
	margin-top: 8px;
}

.discord-attachment .discord-image-wrapper {
	display: block;
	position: relative;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
	overflow: hidden;
	border-radius: 3px;
}

.discord-attachment .discord-image-wrapper img,
.discord-attachment .discord-image-wrapper video {
	max-width: 400px;
	width: 100%;
	height: auto;
}

.discord-attachment-generic {
	display: flex;
	width: auto;
	max-width: 520px;
	height: 40px;
	padding: 10px;
	background-color: #2f3136;
	border: 1px solid #292b2f;
	border-radius: 3px;
	overflow: hidden;
}

.discord-attachment-generic-icon {
	float: left;
	height: 100%;
	width: auto;
}

.discord-attachment-generic-icon > svg {
	width: 30px;
	height: 100%;
	margin-right: 10px;
}

.discord-attachment-generic-inner {
	flex-grow: 1;
	width: fit-content;
	height: 100%;
}

.discord-attachment-generic-size {
	color: #72767d;
	font-size: 12px;
	align-items: flex-start;
	line-height: 100%;
}

.discord-attachment-generic-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: fit-content;
}

.discord-attachment-generic-download {
	float: right;
	height: 100%;
	margin-left: 5px;
	margin-right: 5px;
}

.discord-attachment-generic-download > a > svg {
	height: 100%;
	color: rgb(185, 187, 190);
}

.discord-attachment-generic-download > a > svg:hover {
	color: rgb(220, 221, 222);
}