@import '../less/variables/colors.less';

.c-tree-item {
	display: block;
	padding: 3px 0;
	white-space: nowrap;

	&.is-active > div > a > .c-tree-item__tree-title,
	&.is-active > a > .c-tree-item__tree-title { // regular nodes
		background-color: @color-gray-xx-light;
	}

	& .c-tree-item {
		margin-left: 20px;
	}

	& .c-tree-item:first-of-type {
		margin-top: 4px;
	}

	& .c-tree-item__tree-title {
		border-radius: 3px;
		padding: 5px;
		position: relative;
		transition: 0.25s all;
	}

	& a {
		color: @color-ui-theme-text-primary;
		text-decoration: none;
	}

	/* Ideally, this wouldn't use disabled text color, but we're maintaining old behavior when switching palette. */
	&.is-muted a,
	&.is-muted {
		color: @color-ui-theme-text-disabled;
	}

	& a:hover .c-tree-item__tree-title {
		background-color: @color-button-default-hover-background;
	}

	&.is-active > a:hover > .c-tree-item__tree-title {
		background-color: darken(@color-gray-xx-light, 5%);
	}
}

.c-tree-item__spinner {
	font-size: 16px;
	height: 25px;
	margin: 15px 0 0 30px;
}

.c-tree-item__carat {
	margin-left: -10px; // Line up with non-expandable icons.
	padding-right: 2px;
	transform-origin: left;
	transition: transform 0.25s;

	&.is-expanded {
		transform: translateY(-2px) rotate(90deg);
	}
}

.c-tree-item__thumbnail-container {
	display: inline-block;

	&:hover {
		& .c-tree-item__tooltip__thumbnail {
			background: #fff;
			bottom: 30px;
			box-shadow: 1px 1px 5px #ccc;
			display: flex;
			height: 150px;
			opacity: 1;
			right: -150px;
			transition: opacity 0.5s;
			transition-delay: 1s;
			width: 150px;
		}
	}
}

.c-tree-item__tooltip__thumbnail {
	align-items: center;
	height: 0;
	justify-content: center;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.c-tree-item__large-thumbnail {
	max-height: 130px;
	max-width: 130px;
}

.c-tree-item-button {
	display: inline-block;
	font-size: 12px;
	line-height: 18px;
	padding: 0 8px;
	visibility: hidden;

	&.is-selected {
		visibility: visible;
	}

	&:hover {
		visibility: visible;
	}
}

.c-tree-item__link-node:hover + .c-tree-item-button {
	visibility: visible;
}