@import "~scss/_mixins";

.vault { 
	background-color: var(--color-shape-primary); z-index: 30; width: $vaultWidthCollapsed; height: 100%; display: flex; flex-direction: column; 
	flex-shrink: 0; position: fixed; left: 0px; top: 0px; overflow: hidden; transform: translate3d(0px, 0px, 0px); transition: none;
}
.vault.isClosed, .vault.isHidden { width: 0px; }
.vault.anim { transition-property: width; transition-timing-function: linear; }
.vault {
	.head { 
		height: 50px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0px 8px; padding: 0px 14px; flex-shrink: 0;
		position: relative; z-index: 1; background: inherit;
	}

	.body { 
		display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; gap: 12px 0px; height: calc(100% - 64px); 
		width: $vaultWidthCollapsed;
	}
	.body {
		.side { padding: 0px 10px; display: flex; flex-direction: column; align-items: center; }
		.side.top { gap: 16px 0px; overflow: auto; flex-grow: 1; overscroll-behavior: none; }
		.side.top::-webkit-scrollbar { display: none; }
		.side.bottom { flex-shrink: 0; justify-content: flex-end; padding-bottom: 12px; }
	}

	.item { width: 36px; height: 36px; flex-shrink: 0; position: relative; padding: 2px; transition: padding 0.2s $easeInQuint; }
	.item {
		.iconWrap { 
			width: 100%; height: 100%; border-radius: 4px; background-repeat: no-repeat; background-position: center; 
			transition: background-color 0.2s $easeInQuint; overflow: hidden;
		}
		.iconObject { width: 100% !important; height: 100% !important; border-radius: inherit !important; }
		.iconObject.withImageError { background-color: var(--color-shape-highlight-dark) !important; }
	}
	.item::after {
		content: ''; position: absolute; width: 4px; height: 4px; background-color: var(--color-control-accent); left: -10px; top: 50%; margin-top: -2px;
		border-radius: 50%; opacity: 0; transition: opacity 0.2s $easeInQuint; opacity: 0;
	}

	.item:hover, .item.hover { padding: 0px; }

	.item.isActive::after { opacity: 1; }

	.item.gallery {
		.iconWrap { background-image: url('~img/icon/vault/gallery.svg'); }
	}

	.item.add {
		.iconWrap { background-image: url('~img/icon/vault/plus.svg'); }
	}

	.item.settings {
		.iconWrap { background-color: unset; background-image: url('~img/icon/vault/settings.svg'); }
	}
	.item.settings.isActive,
	.item.settings:hover {
		.iconWrap { background-color: var(--color-shape-highlight-dark); }
	}
}

html.platformWindows, html.platformLinux {
	.vault {
		.head { height: 12px; }
	}
}
