$cadmin-treeview: () !default;
$cadmin-treeview: map-merge(
	(
		display: flex,
		flex-direction: column,
		font-size: 14px,
		list-style: none,
		margin-bottom: 0,
		padding: 2px 0,
		btn: (
			color: inherit,
			font-size: 12px,
			line-height: 1,
			padding: 6px 8px,
			c-inner: (
				margin: -7px -8px,
			),
		),
		btn-monospaced: (
			font-size: inherit,
			height: 24px,
			padding: 0,
			width: 24px,
			focus: (
				box-shadow: $cadmin-component-focus-inset-box-shadow,
			),
		),
		custom-control: (
			margin-left: 4px,
			margin-right: 4px,
			margin-top: 1.5px,
		),
		treeview-dragging: (
			background-color: $cadmin-white,
			border-color: $cadmin-primary-l0,
			border-radius: $cadmin-border-radius-sm,
			border-style: solid,
			border-width: 1px,
			display: inline-block,
			font-size: 10px,
			font-weight: $cadmin-font-weight-semi-bold,
			padding: 4px 12px,
			text-transform: uppercase,
		),
		treeview-group: (
			display: flex,
			flex-direction: column,
			list-style: none,
			margin-bottom: 0,
			padding-left: 0,
		),
		treeview-item: (
			word-wrap: break-word,
		),
		treeview-item-dragging: (
			cursor: $cadmin-disabled-cursor,
			opacity: 0.4,
			treeview-link: (
				background-color: transparent,
				border-color: transparent,
				box-shadow: none,
			),
		),
		treeview-dropping-indicator-top: (
			background-color: transparent,
			display: block,
			height: 2px,
			margin-top: -2px,
			outline: none,
			width: 100%,
		),
		treeview-dropping-indicator-bottom: (
			background-color: transparent,
			display: block,
			height: 2px,
			margin-bottom: -2px,
			outline: none,
			width: 100%,
		),
		treeview-dropping-indicator-over: (
			background-color: $cadmin-primary-l0,
		),
		treeview-link: (
			background-color: transparent,
			cursor: pointer,
			display: block,
			border-color: transparent,
			border-style: solid,
			border-width: 1px,
			margin-bottom: 2px,
			margin-top: 2px,
			min-width: 100%,
			padding: 0,
			position: relative,
			text-align: left,
			user-select: none,
			treeview-dropping-middle: (
				background-color: $cadmin-primary-l3,
				border-color: $cadmin-primary-l0,
			),
			hover: (
				text-decoration: none,
			),
			focus: (
				box-shadow: $cadmin-component-focus-inset-box-shadow,
				outline: 0,
			),
			disabled: (
				cursor: $cadmin-disabled-cursor,
			),
		),
		component-expander: (
			font-size: 10px,
			padding: 6px 8px,
		),
		component-action: (
			font-size: 16px,
			margin-left: 2px,
			margin-right: 2px,
			hover: (
				background-color: transparent,
				color: $cadmin-secondary,
			),
			focus: (
				color: $cadmin-secondary,
			),
			active: (
				background-color: transparent,
			),
		),
		component-icon: (
			color: $cadmin-secondary,
			display: inline-block,
			font-size: 16px,
			height: auto,
			margin: 4px,
			width: auto,
			lexicon-icon: (
				display: block,
			),
		),
		component-text: (
			line-height: 24px,
			padding-left: 4px,
			user-select: auto,
		),
		quick-action-item: (
			margin: 0 2px,
			min-height: 0,
			min-width: 0,
		),
		autofit-row: (
			align-items: center,
		),
	),
	$cadmin-treeview
);

$cadmin-treeview-nested-margins: () !default;
$cadmin-treeview-nested-margins: map-deep-merge(
	(
		treeview-group: (
			treeview-item: (
				margin-left: 24px,
			),
		),
	),
	$cadmin-treeview-nested-margins
);

$cadmin-treeview-show-component-expander-on-hover: () !default;
$cadmin-treeview-show-component-expander-on-hover: map-deep-merge(
	(
		hover: (
			component-expander: (
				opacity: 1,
				transition: opacity ease-in-out 600ms,
			),
		),
		component-expander: (
			opacity: 0,
			transition: opacity ease-in-out 450ms,
		),
		treeview-link: (
			focus: (
				component-expander: (
					opacity: 1,
					transition: none,
				),
			),
		),
	),
	$cadmin-treeview-show-component-expander-on-hover
);

// Variants

$cadmin-treeview-light: () !default;
$cadmin-treeview-light: map-deep-merge(
	(
		component-expander: (
			color: $cadmin-secondary,
			disabled: (
				color: $cadmin-secondary,
				opacity: 0.5,
			),
			btn-secondary: (
				background-color: $cadmin-white,
			),
		),
		treeview-link: (
			color: $cadmin-gray-600,
			treeview-no-hover: (
				hover: (
					background-color: transparent,
					color: $cadmin-gray-600,
				),
			),
			hover: (
				box-shadow: inset 0 0 0 1px $cadmin-secondary-l0,
			),
			focus: (
				box-shadow: $cadmin-component-focus-inset-box-shadow,
			),
			active: (
				background-color: $cadmin-primary-l3,
				box-shadow: inset 0 0 0 1px $cadmin-primary,
				color: $cadmin-dark-l2,
				focus: (
					box-shadow: $cadmin-component-focus-inset-box-shadow,
				),
			),
			active-class: (
				background-color: $cadmin-primary-l3,
				box-shadow: inset 0 0 0 1px $cadmin-primary,
				color: $cadmin-dark-l2,
				focus: (
					box-shadow: $cadmin-component-focus-inset-box-shadow,
				),
			),
			disabled: (
				background-color: transparent,
				color: rgba($cadmin-gray-600, 0.5),
			),
			show: (
				background-color: c-unset,
				box-shadow: c-unset,
				color: c-unset,
			),
		),
	),
	$cadmin-treeview-light
);

$cadmin-treeview-dark: () !default;
$cadmin-treeview-dark: map-deep-merge(
	(
		component-expander: (
			color: $cadmin-secondary-l1,
		),
		treeview-link: (
			color: $cadmin-secondary-l1,
			treeview-no-hover: (
				hover: (
					background-color: transparent,
					color: $cadmin-secondary-l1,
				),
			),
			hover: (
				box-shadow: inset 0 0 0 1px $cadmin-secondary-l0,
			),
			focus: (
				box-shadow: $cadmin-component-focus-inset-box-shadow,
			),
			active: (
				background-color: $cadmin-dark-l2,
				box-shadow: inset 0 0 0 1px $cadmin-primary,
				color: $cadmin-primary-l3,
				focus: (
					box-shadow: $cadmin-component-focus-inset-box-shadow,
				),
			),
			active-class: (
				background-color: $cadmin-dark-l2,
				box-shadow: inset 0 0 0 1px $cadmin-primary,
				color: $cadmin-primary-l3,
				focus: (
					box-shadow: $cadmin-component-focus-inset-box-shadow,
				),
			),
			disabled: (
				background-color: transparent,
				color: rgba($cadmin-secondary-l1, 0.5),
			),
			show: (
				background-color: c-unset,
				box-shadow: c-unset,
				color: c-unset,
			),
		),
		component-action: (
			color: $cadmin-secondary-l1,
			disabled: (
				color: $cadmin-secondary-l1,
			),
		),
	),
	$cadmin-treeview-dark
);