$panel-navigation-background-color: $nav-background-color;
$nav-text-color: $nav-color;

$treelist-font-size: 16px;

$nav-base-color: lighten($panel-navigation-background-color, 20%);
$nav-bg-color-over: lighten($nav-base-color, 10%);
$nav-bg-color-selected: lighten($nav-base-color, 5%);
$nav-text-color-over: lighten($nav-text-color, 20%);
$nav-indicator-color: $base-color;
$nav-indicator-color-over: lighten($base-color, 10%);

@include treelist-ui(
	$ui: 'perspective-admin-navigation',

  $background-color: $panel-navigation-background-color,

  $item-expanded-background-color: transparent,
  $item-expander-color: $nav-text-color,
  $item-expanded-child-background-color: $nav-base-color,
  $item-expander-font-size: $treelist-font-size,
  $item-expander-over-color: $nav-text-color-over,
  $item-expander-width: 24px,
  $item-icon-width: 24px,
  $item-icon-color: $nav-text-color,
	$item-icon-font-size: $treelist-font-size,
  $item-icon-over-color: $nav-text-color-over,
  $item-line-height : 50px,
  $item-text-color: $nav-text-color,
	$item-text-font-size: $treelist-font-size,
  $item-text-icon-gap: 1px,
  $item-text-over-color: $nav-text-color-over,
  $item-text-overflow: initial,

  $padding: 5px 10px 0 10px,

	$row-indicator-width: 4px,
	$row-indicator-selected-color: $nav-indicator-color,
	$row-indicator-selected-over-color: lighten($nav-indicator-color-over, 5%),
	$row-indicator-over-color: $nav-indicator-color-over,
  $row-selected-background-color: $nav-bg-color-selected,
  $row-over-background-color: $nav-bg-color-over,

  $toolstrip-background-color:  $nav-base-color,

  $tool-float-indicator-color: $nav-indicator-color,
  $tool-float-indicator-width: 4px,
  $tool-indicator-selected-color: $nav-indicator-color,
  $tool-indicator-selected-width: 4px,
	$tool-selected-background-color: $nav-bg-color-over,
  $tool-selected-color: $nav-text-color-over
);

.x-treelist-perspective-admin-navigation .x-treelist-item-tool {
  width: 60px;
}