.sidebarPage.pageVault { overflow: hidden; }
.sidebarPage.pageVault {
	> .head { 
		display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px;
		gap: 0px 8px; overflow: hidden; flex-shrink: 0;
	}
	> .head {
		.name { @include text-overflow-nw; }
	}

	> .body { padding: 0px; overflow: hidden; }

	> .bottom { position: relative; }
	> .bottom {
		.grad { height: 36px; bottom: 52px; background-image: linear-gradient(180deg, rgba(242, 242, 242, 0) 3.62%, var(--color-shape-tertiary) 100%); }
	}

	.ReactVirtualized__List { padding: 0px 2px 0px 8px; scrollbar-gutter: stable; }

	.filterWrapper { padding: 4px 16px 8px 16px; overflow: hidden; }
	.filter { padding: 0px; }
	.filter { 
		.inner { background-color: var(--color-shape-highlight-medium); border-radius: 15px; }
	}

	.item { display: flex; align-items: center; gap: 0px 10px; padding: 8px; background-color: var(--color-shape-tertiary); }
	.item {
		.iconWrap { flex-shrink: 0; position: relative; border-radius: 6px; }
		.info { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }

		&.noMessages {
			.info { flex-direction: row; }
			.nameWrapper { flex-grow: 1; }
			.messageWrapper { flex-grow: 0; }
		}

		.nameWrapper,
		.messageWrapper { display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; gap: 0px 6px; }
		.nameInner { display: flex; flex-grow: 1; align-items: center; gap: 0px 4px; }
		.name { @include text-overflow-nw; font-weight: 500; }
		.label { @include text-overflow-nw; @include text-small; color: var(--color-text-secondary); flex-grow: 1; }
		.label b { font-weight: 500; }

		&::before {
			content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1;
			pointer-events: none; border-radius: 8px;
		}
		&.active::before, &.hover::before { background: var(--color-shape-highlight-medium); }
		&.selected::before { background: var(--color-system-selection); }

		.time { @include text-small; color: var(--color-text-secondary); }

		.icons { display: flex; gap: 0px 6px; }
		.icon { width: 18px; height: 18px; }
		.icon.pin { background-image: url('~img/icon/vault/pin.svg'); }
		.icon.muted { background-image: url('~img/icon/vault/muted.svg'); }
		.icon.error { display: block; margin: 0px; border-radius: 50%; background: var(--color-red) url('~img/icon/vault/error.svg') 50% 50% no-repeat; }

		.cnt { 
			min-width: 18px; height: 18px; border-radius: 9px; background: var(--color-system-accent-125); @include text-very-small; 
			color: var(--color-text-inversion); text-align: center; display: flex; align-items: center; justify-content: center;
			padding: 0px 4px; cursor: default; flex-shrink: 0;
		}
		.cnt {
			.icon.mention { width: 12px; height: 12px; background-image: url('~img/icon/vault/mention.svg'); }
		}

		&.isDragging { z-index: 1; }

		&.isLoading {
			.iconWrap { background-color: var(--color-shape-highlight-medium); width: 48px; height: 48px; }
			.iconWrap {
				.iconObject { display: none; }
				&:before {
					content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -10px 0px 0px -10px; border-radius: inherit;
					width: 20px; height: 20px; background: url('~img/icon/vault/spinner.svg'); animation: rotate 0.8s infinite linear;
				}
			}
			.cnt { display: none; }
		}

		&.isProgress { flex-direction: column; gap: 8px 0px; }
		&.isProgress {
			.infoWrapper { width: 100%; display: flex; flex-direction: row; gap: 0px 10px; flex-grow: 1; align-items: center; }

			.icon { width: 48px; height: 48px; background-image: url('~img/logo/progress.png'); }
			.nameWrap { display: flex; flex-direction: row; gap: 0px 8px; }
			.percent { font-weight: 500; color: var(--color-text-secondary); flex-shrink: 0; }
			.buttons { display: flex; flex-direction: row; gap: 0px 8px; justify-content: space-evenly; width: 100%; }
			.button { flex-grow: 1; flex-basis: 50%; border-radius: 14px; border: 0px; background-color: var(--color-shape-highlight-medium); }
			.button:hover { background-color: var(--color-shape-highlight-dark); }

			.progressBar {
				.bar { gap: 0px; height: 8px; border-radius: 6px; }
				.fill.isActive { background-color: #ffb76c; }
				.fill.empty { background-color: var(--color-shape-highlight-medium); }
				.labels { display: none; }
			}
		}
	}
}
