@use 'sass:color';
@use 'ej2-base/styles/definition/fluent' as *;
@forward 'ej2-base/styles/definition/fluent';

/*! TreeView's bootstrap5 theme wise override definitions and variables */
/* stylelint-disable */
$treeview-font-size: $text-sm !default;
$treeview-icon-font-size: $text-xl !default;
$treeview-image-font-size: $text-xl !default;
$treeview-item-height: 38px !default;
$treeview-text-line-height: 22px !default;
$treeview-text-min-height: 22px !default;
$treeview-input-height: 32px !default;
$treeview-root-ul-padding: 0 0 0 12px !default;
$treeview-rtl-root-ul-padding: 0 12px 0 0 !default;
$treeview-child-ul-padding: 0 0 0 20px !default;
$treeview-rtl-child-ul-padding: 0 20px 0 0 !default;
$treeview-text-wrap-padding: 0 12px 0 20px !default;
$treeview-rtl-text-wrap-padding: 0 20px 0 0 !default;
$treeview-icon-size: 20px !default;
$treeview-nrml-icon-height: 20px !default;
$treeview-icon-margin: 0 0 0 -20px !default;
$treeview-rtl-icon-margin: 0 -20px 0 0 !default;
$treeview-icon-padding: 0px !default;
$treeview-text-padding: 8px 12px !default;
$treeview-text-margin: 0 !default;
$treeview-image-size: 20px !default;
$treeview-image-height: 20px !default;
$treeview-image-margin: 0 0 0 12px !default;
$treeview-navigable-icon-image-anchor-margin-bigger: 0 16px 0 12px !default;
$treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 10px 0 14px !default;
$treeview-navigable-icon-image-anchor-margin: 0 12px 0 0 !default;
$treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 12px !default;
$treeview-navigable-rtl-margin-reverse: 0 16px 0 0 !default;
$treeview-rtl-image-margin: 0 12px 0 0 !default;
$treeview-image-text-padding: 8px 12px !default;
$treeview-icon-image-margin: 0 0 0 12px !default;
$treeview-rtl-icon-image-margin: 0 12px 0 0 !default;
$treeview-check-margin: 0 0 0 12px !default;
$treeview-rtl-check-margin: 0 12px 0 0 !default;
$treeview-check-text-padding: 8px 12px !default;
$treeview-check-image-margin: 0 0 0 12px !default;
$treeview-rtl-check-image-margin: 0 12px 0 0 !default;
$treeview-drop-count-border-size: 1px !default;
$treeview-drop-count-font-size: $text-xs !default;
$treeview-edit-wrap-width: calc(100% - 2px) !default;
$treeview-check-wrap-width: calc(100% - 27px) !default;
$treeview-check-icon-wrap-width: calc(100% - 60px) !default;
$treeview-check-icon-img-wrap-width: calc(100% - 88px) !default;
$treeview-icon-wrap-width: calc(100% - 32px) !default;
$treeview-icon-img-wrap-width: calc(100% - 60px) !default;

$treeview-big-font-size: $text-base !default;
$treeview-big-icon-font-size: $text-2xl !default;
$treeview-big-item-height: 44px !default;
$treeview-big-text-line-height: 24px !default;
$treeview-big-text-min-height: 24px !default;
$treeview-big-input-height: 40px !default;
$treeview-big-text-padding: 10px 16px !default;
$treeview-big-input-padding: 0 9px !default;
$treeview-big-icon-padding: 0px !default;
$treeview-big-image-margin: 0 0 0 16px !default;
$treeview-big-rtl-image-margin: 0 16px 0 0 !default;
$treeview-big-icon-image-margin: 0 0 0 16px !default;
$treeview-big-rtl-icon-image-margin: 0 16px 0 0 !default;
$treeview-big-check-margin: 0 0 0 16px !default;
$treeview-big-rtl-check-margin: 0 16px 0 0 !default;
$treeview-big-check-image-margin: 0 0 0 16px !default;
$treeview-big-rtl-check-image-margin: 0 16px 0 0 !default;
$treeview-big-root-ul-padding: 0 0 0 16px !default;
$treeview-big-rtl-root-ul-padding: 0 16px 0 0 !default;
$treeview-big-child-ul-padding: 0 0 0 24px !default;
$treeview-big-rtl-child-ul-padding: 0 24px 0 0 !default;
$treeview-big-image-text-padding: 10px 16px !default;
$treeview-big-icon-margin: 0 0 0 -24px !default;
$treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
$treeview-big-text-wrap-padding: 0 0 0 24px !default;
$treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
$treeview-big-drag-icon-font-size: $text-sm !default;
$treeview-big-drag-item-text-padding-left: 16px !default;
$treeview-big-drag-before-icon-padding: 14px !default;
$treeview-big-check-text-padding: 10px 16px !default;
$treeview-big-check-wrap-width: calc(100% - 33px) !default;
$treeview-big-check-icon-wrap-width: calc(100% - 70px) !default;
$treeview-big-check-icon-img-wrap-width: calc(100% - 102px) !default;
$treeview-big-icon-wrap-width: calc(100% - 36px) !default;
$treeview-big-icon-img-wrap-width: calc(100% - 69px) !default;

$treeview-font-family: $font-family !default;
$treeview-drag-icon-font-size: $text-xs !default;
$treeview-drag-icon-padding: 12px !default;
$treeview-navigable-check-text-padding-bigger: 0 !default;
$treeview-sibling-border-size: 4px !default;
$treeview-virtual-mask-margin-bottom: 20px !default;
$treeview-root-ul-margin: 0 !default;
$treeview-interaction-icon-radius: 15px !default;
$treeview-text-wrap-margin: 0 !default;
$treeview-input-group-margin-bottom: 0px !default;
$treeview-input-padding: 6px !default;
$treeview-nav-padding: 0 !default;
$treeview-popup-border-radius: 4px !default;
$treeview-popup-border-width: 1px !default;
$treeview-popup-font-size: 14px !default;
$treeview-popup-padding: 4px !default;
$treeview-popup-icon-line-height: 18px !default;
$treeview-popup-tail-border-size: 10px !default;
$treeview-drop-count-radius: 15px !default;
$treeview-drop-count-margin: -12px !default;
$treeview-border-size: 1px !default;
$treeview-big-list-text-input-height: 36px !default;
$treeview-sibling-before-height: 2px !default;
$treeview-popup-font-weight: normal !default;
$treeview-popup-icon-height: 26px !default;
$treeview-height-none: 0 !default;
$treeview-drop-count-line-height: normal !default;
$treeview-big-checkbox-size: 20px !default;
$treeview-big-checkbox-line-height: 17px !default;
$treeview-big-checkbox-mark-font-size: 12px !default;
$treeview-big-drop-count-padding: 3px 5px 4px !default;
$treeview-padding-none: 0 !default;
$treeview-edit-inline-padding: 3px !default;
$treeview-input-group-input-height: 28px !default;
$treeview-drop-count-padding: 1px 3px 2px !default;

//treeview ripple effect variables
$ripple-size: -7px !default;
$ripple-height: 32px !default;
$ripple-width: 32px !default;

//color variables
$treeview-icon-color: $icon-color !default;
$treeview-text-color: $content-text-color !default;
$treeview-item-border-color: $transparent !default;
$treeview-item-active-bg: $content-bg-color-selected !default;
$treeview-icon-active-color: $content-text-color-selected !default;
$treeview-text-active-color: $content-text-color-selected !default;
$treeview-item-active-border-color: $content-bg-color-selected !default;
$treeview-item-hover-bg: $content-bg-color-hover !default;
$treeview-icon-hover-color: $icon-color-hover !default;
$treeview-text-hover-color: $content-text-color-hover !default;
$treeview-item-hover-border-color: $content-bg-color-hover !default;
$treeview-item-active-hover-bg: color.adjust($treeview-item-active-bg, $lightness: -5%) !default;
$treeview-icon-active-hover-color: $content-text-color-selected !default;
$treeview-text-active-hover-color: $content-text-color-selected !default;
$treeview-item-active-hover-border-color: $content-bg-color-selected !default;
$treeview-text-disable-color: $content-text-color-disabled !default;
$treeview-icon-disable-color: $icon-color-disabled !default;
$treeview-drag-line-bg: $primary !default;
$treeview-drag-line-color: $primary !default;
$treeview-popup-bg-color: $content-bg-color-hover !default;
$treeview-popup-border-color: $content-bg-color-hover !default;
$treeview-drop-count-bg: $primary !default;
$treeview-drop-count-border: $primary-text-color !default;
$treeview-drop-count-color: $primary-text-color !default;
$treeview-drag-item-bg: $content-bg-color-alt2 !default;
$treeview-drag-item-color: $content-text-color-alt1 !default;
$treeview-drag-icon-color: $content-text-color-alt1 !default;
$treeview-item-active-check-bg: $primary-text-color !default;
$treeview-item-active-check-border-color: $primary-text-color !default;
$treeview-item-active-check-color: $primary !default;