@import '../../styles/theme.less';

.tree {
	height: 100%;
	overflow-y: auto;

	&-item {
		display: flex;
		align-items: center;
		padding: 8px 16px;
		position: relative;

		&::after {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			border-right: 3px solid @main-color;
			transform: scaleY(0.0001);
			opacity: 0;
			transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
			content: '';
		}

		&-leftIcon {
			margin-right: 8px;
			font-size: 16px;
			transition: transform 0.5s;
		}

		&-rotate {
			transform: rotate(-90deg);
		}

		&-title {
			flex: 1;
			padding-right: 8px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			&:hover {
				cursor: pointer;
				color: @main-color;
			}
		}

		.tree-item-rightIcon {
			font-size: 22px;
			font-weight: 600;
			display: none;
		}
	}

	&-itemActive {
		color: @main-color;
		background-color: @main-color-1;

		&::after {
			transform: scaleY(1);
			opacity: 1;
			transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
		}
	}
}