.attachments { display: flex; gap: 4px; flex-wrap: wrap; }
.attachments {
	--width-attachment: calc(524px / 2);

	.attachment {
		position: relative; background: var(--color-bg-primary); min-width: var(--width-attachment); height: 72px; border-radius: 12px; 
		display: flex; flex-direction: row; align-items: center;
	}

	.attachment {
		.clickable { display: flex; flex-direction: row; gap: 0px 12px; align-items: center; padding: 11px; width: 100%; }
		.iconObject { flex-shrink: 0; background-color: var(--color-shape-tertiary); border-radius: 6px; }
		.info { flex-grow: 1; width: 100%; }

		.icon.remove {
			opacity: 0; transition: $transitionAllCommon; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; background-size: 8px;
			background-image: url('~img/icon/chat/buttons/remove.svg'); background-color: var(--color-shape-primary); border-radius: 50%;
		}

		.name { line-height: 20px; font-weight: 500; @include clamp1; }
		.descr { @include text-small; @include clamp1; }
		.descr {
			.bullet { width: 2px; height: 2px; border-radius: 50%; background: var(--color-text-secondary); }
		}

		.icon.syncStatus { display: none; position: absolute; z-index: 2; left: 50%; top: 50%; }

		&.isSyncing, 
		&.isQueued {
			.icon.syncStatus { display: block; background-image: url('~img/icon/chat/syncStatus/syncing.svg'); animation: rotate 1.2s infinite linear; }
		}
		&.isError {
			.icon.syncStatus { display: block; background-image: url('~img/icon/chat/syncStatus/error.svg'); }
		}
	}

	.attachment.isFile {
		.iconWrapper { width: 48px; height: 48px; position: relative; }
		.iconObject { background-color: unset; }
		.descr { display: flex; flex-direction: row; gap: 0px 6px; align-items: center; color: var(--color-text-secondary); }

		.iconWrapper {
			.icon.syncStatus { width: 28px; height: 28px; background-size: 28px; margin: -14px 0px 0px -14px; }
		}
	}

	.attachment.isBookmark { min-width: unset; height: unset; max-width: 360px; }
	.attachment.isBookmark {
		.inner { display: flex; flex-direction: column; padding: 16px; gap: 8px 0px; width: 100%; }
		.inner {
			.side.left { display: flex; flex-direction: column; gap: 4px 0px; width: 100%; }
			.side.left {
				.link { @include text-small; color: var(--color-text-secondary); display: flex; justify-content: flex-start; align-items: center; gap: 0px 6px; }
				.link {
					.iconObject { flex-shrink: 0; }
					.source { flex-grow: 1; @include text-overflow-nw; }
				}
				.name { @include text-common; line-height: 20px; font-weight: 500; @include clamp2; }
				.descr { @include text-small; line-height: 16px; color: var(--color-text-primary); @include clamp3; }

				.link {
					.iconObject { background: none; border-radius: 2px; }
				}
			}
			.side.right { position: relative; display: flex; align-items: center; border-radius: 4px; overflow: hidden; }
			.side.right {
				.img { object-fit: cover; width: 100%; height: 100%; aspect-ratio: 40/21; }
			}
		}

		&.isWide { max-width: unset; }
		&.isWide {
			.inner { flex-direction: row; padding: 0px; align-items: stretch; }

			.side.left { flex-grow: 1; padding: 16px 0px 16px 16px; justify-content: center; }
			.side.right {
				padding: 16px; width: 28%; min-height: 90px; display: flex; justify-content: center; align-items: center; position: relative;
				overflow: hidden; aspect-ratio: 7 / 3; max-height: 122px;
			}
			.side.right {
				.img { border-radius: 4px; }
			}
		}
	}

	.attachment.isImage { width: 72px; height: 72px; min-width: unset; display: flex; align-items: center; justify-content: center; }
	.attachment.isImage {
		.imgWrapper { position: relative; }

		.image,
		.loaderWrapper { display: block; object-fit: cover; aspect-ratio: 1; border-radius: 12px; width: 100%; height: 100%; }

		.icon.syncStatus { width: 72px; height: 72px; margin: -36px 0px 0px -36px; }
	}

	.attachment.isImage.withBlur {
		.imgWrapper { 
			min-width: 100px; min-height: 100px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; 
			position: relative; overflow: hidden; border-radius: 12px; 
		}
		.imgWrapper {
			.blur { width: 100%; height: 100%; position: absolute; z-index: 0; left: 0px; top: 0px; background-size: cover; -webkit-filter: blur(64px); }
			.image { width: unset; height: unset; border-radius: 0px; position: relative; z-index: 1; }
		}
	}

	.attachment.isVideo { width: 72px; height: 72px; min-width: unset; display: flex; align-items: center; justify-content: center; }
	.attachment.isVideo {
		.mediaVideo { border-radius: inherit; overflow: hidden; width: 100%; height: 100%; }

		video { width: 100%; height: 100%; display: block; object-fit: cover; height: 224px; }

		.icon.syncStatus { width: 72px; height: 72px; margin: -36px 0px 0px -36px; }

		&.isError {
			.icon.syncStatus { z-index: 2; }
		}
	}

	.attachment.isAudio { min-width: 352px; }
	.attachment.isAudio {
		.mediaAudio { padding: 12px 16px; border: unset; }
		.mediaAudio {
			.controlsWrapper {
				.name { display: block; }
			}
			#volume { bottom: 40px; right: 16px; }
		}
	}

	.attachment:hover {
		.icon.remove { opacity: 1; }
	}

	.attachment.isDownload {
		&.isSyncing,
		&.isQueued,
		&.isError {
			&.isImage {
				.imgWrapper { background-color: var(--color-shape-highlight-medium); border-radius: 8px;  width: 100%; height: 100%; }
				.image { opacity: 0; }
			}

			&.isVideo { background-color: var(--color-shape-highlight-medium); border-radius: 8px; }
			&.isVideo {
				video { opacity: 0; }
			}

			&.isFile {
				.iconWrapper { background-color: var(--color-shape-highlight-medium); border-radius: 8px; }
				.iconImage { opacity: 0; }
			}
		}
	}
}

.attachments:not(.withLayout) { flex-direction: column; width: 100%; }

/* Layouts */

.attachments.withLayout { gap: 4px; }
.attachments.withLayout {
	.attachment { border-radius: 12px; height: auto; width: auto; aspect-ratio: 1; flex-shrink: 0; min-width: unset; }
	.attachment.isImage {
		.imgWrapper { min-width: 72px; min-height: 72px; }
		.image, .loaderWrapper { max-width: 100%; max-height: 360px; }
	}
}

.attachments.layout-1 { max-width: 360px; }
.attachments.layout-1 {
	.attachment { max-width: 100%; max-height: 100%; aspect-ratio: unset; }
	.attachment {
		&.isVideo { height: 224px; }
	}
}

.attachments.withLayout:not(.layout-1) {
	.image { aspect-ratio: 1 !important; }
}

.attachments.layout-2 { gap: 4px; }
.attachments.layout-2 {
	.attachment { @include cnt-2; }
}
.attachments.layout-3 {
	.attachment { @include cnt-3; }
}
.attachments.layout-4 {
	.attachment { @include cnt-4; }
}
.attachments.layout-5 {
	.attachment { @include cnt-3; }
	.attachment:nth-child(-n + 2) { @include cnt-2; }
}
.attachments.layout-6 {
	.attachment { @include cnt-3; }
}
.attachments.layout-7 {
	.attachment { @include cnt-4; }
	.attachment:nth-child(-n + 3) { @include cnt-3; }
}
.attachments.layout-8 {
	.attachment { @include cnt-4; }
}
.attachments.layout-9 {
	.attachment { @include cnt-3; }
}
.attachments.layout-10 {
	.attachment { @include cnt-4; }
	.attachment:nth-child(-n + 6) { @include cnt-3; }
}

.attachments.layout-5,
.attachments.layout-6,
.attachments.layout-7,
.attachments.layout-8,
.attachments.layout-9,
.attachments.layout-10 { width: 532px; }
