@use 'ej2-base/styles/definition/fluent2' as *;
@forward 'ej2-base/styles/definition/fluent2';

// Size variables
$breadcrumb-skin: $skin-name !default;
$breadcrumb-last-item-font-weight: $font-weight-medium !default;
$breadcrumb-font-size: $text-sm !default;
$breadcrumb-bigger-font-size: $text-base !default;
$breadcrumb-icon-font-size: $text-sm !default;
$breadcrumb-icon-bigger-font-size: $text-base !default;
$breadcrumb-padding: 6px !default;
$breadcrumb-padding-left: 0 !default;
$breadcrumb-padding-right: 0 !default;
$breadcrumb-bigger-padding: 8px 8px 10px 8px !default;
$breadcrumb-separator-padding: 9px 4px !default;
$breadcrumb-separator-bigger-padding: 12px 6px !default;
$breadcrumb-icon-color: $icon-color !default;
$breadcrumb-icon-right-padding: 6px !default;
$breadcrumb-icon-bigger-right-padding: 8px !default;
$breadcrumb-collapsed-icon-padding: 9px !default;
$breadcrumb-collapsed-icon-bigger-padding: 12px !default;
$breadcrumb-collapsed-icon-font-size: 14px !default;
$breadcrumb-collapsed-icon-bigger-font-size: 12px !default;
$breadcrumb-sibling-separator-padding: 0 !default;
$breadcrumb-sibling-separator-margin-left: -4px !default;
$breadcrumb-icon-item-padding: 0 !default;
$breadcrumb-item-focus-padding: 2px 11px !default;
$breadcrumb-item-focus-bigger-padding: 1px 15px !default;
$breadcrumb-icon-only-item-padding: 3px 5px !default;
$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
$breadcrumb-icon-only-item-bigger-padding: 3px 5px !default;
$breadcrumb-icon-only-item-focus-bigger-padding: 2px 4px !default;
$breadcrumb-scroll-mode-lineheight: 26px !default;
$breadcrumb-popup-item-padding: 6px !default;
$breadcrumb-popup-border-radius: $radius-4 !default;
$breadcrumb-popup-item-height: 32px !default;
$breadcrumb-popup-item-line-height: 32px !default;
$cmenu-li-hover-outline-offset: 0 !default;
$breadcrumb-popup-item-bigger-height: 40px !default;
$breadcrumb-popup-item-bigger-line-height: 40px !default;
$breadcrumb-normal-line-height: normal !default;
$breadcrumb-menuitem-height: 1px !default;
$breadcrumb-border-none: 0 !default;
$breadcrumb-padding-none: 0 !default;
$breadcrumb-margin-none: 0 !default;
$breadcrumb-home-icon-height: 14px !default;
$breadcrumb-bigger-home-icon-height: 16px !default;
$breadcrumb-menu-item-margin: -1px !default;
$breadcrumb-bigger-collapsed-menu-line-height: 16px !default;
$breadcrumb-bigger-popup-text-padding: 8px 8px 10px !default;
$breadcrumb-bigger-anchor-wrap-line-height: 22px !default;
$breadcrumb-bigger-separator-line-height: 16px !default;
$breadcrumb-bigger-icon-text-padding: 12px !default;
$breadcrumb-bigger-popup-item-margin: 6px !default;
$breadcrumb-item-text-padding: 9px !default;
$breadcrumb-nrml-anchor-wrap-line-height: 20px !default;
$breadcrumb-nrml-separator-line-height: 14px !default;
$breadcrumb-popup-item-margin: 4px !default;
$breadcrumb-item-text-border-radius: $radius-4 !default;
$breadcrumb-item-text-hover-border-radius: $radius-4 !default;

// Color variables
$breadcrumb-item-color: $content-text-color-alt1 !default;
$breadcrumb-separator-color: $icon-color !default;
$breadcrumb-item-hover-color: $content-text-color-hover !default;
$breadcrumb-item-focus-color: $content-text-color-hover !default;
$breadcrumb-item-active-color: $content-text-color-hover !default;
$breadcrumb-item-hover-bgcolor: $content-bg-color-hover !default;
$breadcrumb-item-active-bgcolor: $transparent !default;
$breadcrumb-item-focus-bgcolor: $primary-lighter !default;
$breadcrumb-last-item-font-color: $content-text-color-alt1 !default;
$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-alt2 !default;
$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt3 !default;
$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-alt2 !default;
$breadcrumb-collapsed-icon-color: $icon-color !default;
$breadcrumb-collapsed-icon-hover-color: $icon-color-hover !default;
$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
$breadcrumb-item-focus-border: 1px solid $content-text-color-alt1 !default;
$breadcrumb-popup-item-color: $content-text-color !default;
$breadcrumb-popup-border: 1px solid $border-light !default;
$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
$breadcrumb-popup-box-shadow: $shadow-lg !default;
$breadcrumb-popup-item-hover-bgcolor: $flyout-bg-color-hover !default;
$breadcrumb-popup-item-hover-color: $content-text-color-hover !default;
$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;
$breadcrumb-item-active-bg-color: $content-bg-color-selected !default;