@component OpalTreeListItem {
	display: block;

	@el head {
		display: table;
	}
		@el btnToggleChildren {
			position: relative;
			display: table-cell;
			visibility: hidden;
			padding-right: 6px;
			padding-left: 2px;
			vertical-align: middle;
			text-align: center;

			&:focus {
				outline: none;

				body:not(._noFocusHighlight) &::after {
					position: absolute;
					top: 1px;
					right: 4px;
					bottom: 1px;
					left: 0;
					border-radius: 2px;
					box-shadow: inset 0 0 0 1px hsl(208,94%,54%);
					content: '';
					pointer-events: none;
				}
			}

			@mod checked {
				@el btnToggleChildrenIcon {
					transform: rotate(90deg);
				}
			}
		}
			@el btnToggleChildrenIcon {
				display: block;
				width: 14px;
				height: 14px;
				transition: transform .1s linear;
				transform: rotate(0);
			}

		@el contentSlotWrapper {
			display: table-cell;
			width: 100%;
		}
			@el contentSlot {
			}
				@el selectionControl {
				}

	@el children {
		display: none;
		padding-left: 24px;
	}

	@mod opened {
		& > .OpalTreeListItem__children {
			display: block;
		}
	}

	@mod nestingLevel=0 {
		font-weight: bold;
	}
	@mod nestingLevel=1 {
		font-weight: normal;
	}

	@mod hasChildren {
		& > .OpalTreeListItem__head .OpalTreeListItem__btnToggleChildren {
			visibility: visible;
		}
	}
}