@import "~scss/_mixins";

.listObjectPreview { white-space: nowrap; position: relative; }
.listObjectPreview {
	.wrap { overflow: hidden; border-radius: 8px; }
	.scroll { transition: transform 0.3s $easeInQuint; display: flex; flex-direction: row; gap: 0px 16px; }

	.item { position: relative; flex-shrink: 0; }
	.item {
		.hoverArea { height: 100%; }
		.hoverArea:before {
			content: ""; background: var(--color-shape-highlight-medium); position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;
			z-index: 2; border-radius: 8px; display: none; pointer-events: none;
		}
		.hoverArea.hover:before, .hoverArea:hover:before { display: block; }

		> .defaultLabel {
			position: absolute; right: 12px; top: 12px; @include text-small; font-weight: 500; z-index: 2;
			padding: 1px 4px; border-radius: 4px; background: var(--color-shape-tertiary); color: var(--color-text-secondary);
		}

		.previewObject { width: 224px; height: 160px; }
		.icon.plus { width: 28px; height: 28px; position: absolute; left: 50%; top: 50%; margin: -14px 0px 0px -14px; background-image: url('~img/icon/plus/templateBig.svg'); }
	}

	.item.withMenu:hover,
	.item.withMenu.active {
		.moreWrapper { opacity: 1; }
		> .defaultLabel { opacity: 0; }
	}

	.item > .name { padding: 0px 14px; @include text-overflow-nw; color: var(--color-text-secondary); }
	.item > .name {
		.input { border: 0px; padding: 0px; height: 22px; }
	}
	.item:last-child { margin-right: 0px; }

	.item.add { border: 1px solid var(--color-shape-secondary); border-radius: 8px; width: 224px; height: 160px; }

	.icon.arrow { 
		position: absolute; top: 0px; width: 32px; height: 160px; background-image: url('~img/arrow/template0.svg'); background-size: 8px 32px; z-index: 10;
	}
	.icon.arrow:hover { background-image: url('~img/arrow/template1.svg'); }
	.icon.arrow.disabled:hover { background-image: url('~img/arrow/template0.svg'); }
	.icon.arrow.left { left: 0px; transform: rotateY(-180deg); }
	.icon.arrow.right { right: 0px; }
}