@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

// TreeView styles
$item-height: 2.5rem;

.tc-treeview-li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	&:focus {
		outline: none;
	}

	:global(.btn-link) {
		padding: 0;
	}

	.tc-treeview-item {
		position: relative;
		height: $item-height;
		cursor: pointer;
		padding-right: $padding-large;

		display: flex;
		align-items: center;
		flex-grow: 1;

		transition: 200ms ease-out;

		&.disabled {
			opacity: 0.54;
			cursor: not-allowed;

			.tc-treeview-item-name {
				color: tokens.$coral-color-neutral-text;
			}

			svg {
				fill: tokens.$coral-color-neutral-icon;
			}
		}

		.tc-treeview-toggle {
			position: absolute;
			padding: 0.625rem;
			display: inline-flex;
			min-height: auto;
			height: 100%;
			margin-left: -1.875rem;
			top: 0;

			svg {
				width: $svg-sm-size;
				fill: tokens.$coral-color-neutral-icon;
				margin: 0;
			}

			&:hover svg {
				fill: tokens.$coral-color-neutral-icon-weak;
			}
		}

		.tc-treeview-folder {
			width: $svg-md-size;
			height: $svg-md-size;
			margin-right: $padding-large;
			flex-shrink: 0;
			flex-grow: 0;
			fill: tokens.$coral-color-neutral-icon-weak;
		}

		.tc-treeview-img {
			max-height: 1.25rem;
			margin-right: 0.625rem;
			vertical-align: middle;
		}

		.tc-treeview-item-name {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 25rem;
		}
	}

	&[aria-selected='true'] > .tc-treeview-item {
		background: tokens.$coral-color-accent-background;
		font-weight: 600;
		color: tokens.$coral-color-neutral-text;

		.tc-treeview-folder {
			fill: tokens.$coral-color-accent-icon;
		}
	}

	.tc-treeview-item:hover,
	&:focus > .tc-treeview-item {
		background: tokens.$coral-color-neutral-background-medium;
		color: tokens.$coral-color-accent-text;

		.tc-treeview-folder {
			fill: tokens.$coral-color-accent-icon;
		}

		.tc-treeview-toggle {
			svg {
				fill: tokens.$coral-color-accent-icon;
			}
		}

		:global(.btn-link) {
			visibility: visible;
		}

		&.disabled {
			background: none;
		}
	}

	.tc-treeview-item-ctrl {
		margin-left: auto;
		display: flex;
		align-items: center;

		:global(.btn-link) {
			visibility: hidden;
			padding: 0 $padding-smaller;

			:global(.tc-svg-icon) {
				fill: tokens.$coral-color-neutral-icon;
				margin: 0;

				&:hover {
					fill: tokens.$coral-color-neutral-icon-weak;
				}
			}
		}

		:global(.tc-badge-button) {
			height: 1.25rem;
			margin: 0 $padding-normal 0 0;
			padding: 0 $padding-smaller;
			border-radius: $border-radius-small;
		}
	}

	.tc-treeview-ul {
		width: 100%;
		padding: 0;
	}

	&[data-hidden='true'] {
		height: 0;
		display: none;
	}
}