@reference 'tailwindcss';

:host {
  --emr-sidebar-nav-bg: inherit;
  --emr-sidebar-nav-items-gap: --spacing(0.5);
  --emr-sidebar-nav-item-width: 100%;
  --emr-sidebar-nav-item-bg: transparent;
  --emr-sidebar-nav-item-height: --spacing(12);
  --emr-sidebar-nav-item-padding: 0 --spacing(4);
  --emr-sidebar-nav-item-font-size: theme(--text-sm);
  --emr-sidebar-nav-item-border-radius: calc(infinity * 1px);
  --emr-sidebar-nav-item-border-width: 1px;
  --emr-sidebar-nav-item-border-color: transparent;
  --emr-sidebar-nav-item-font-weight: 500;
  --emr-sidebar-nav-item-color: var(--color-secondary);
  --emr-sidebar-nav-item-hover-bg: var(--color-neutral-300);
  --emr-sidebar-nav-item-active-bg: var(--color-secondary-container);
  --emr-sidebar-nav-item-hover-color: var(--color-secondary-800);
  --emr-sidebar-nav-item-active-color: var(--color-secondary-950);
  --emr-sidebar-nav-item-icon-font-size: theme(--text-2xl);
  --emr-sidebar-nav-item-icon-color: var(--color-secondary-700);
  --emr-sidebar-nav-item-icon-width: 27px;
  --emr-sidebar-nav-item-hover-icon-color: var(--color-secondary-800);
  --emr-sidebar-nav-item-active-icon-color: var(--color-secondary-950);
  --emr-sidebar-nav-item-icon-size: --spacing(6);
  --emr-sidebar-nav-item-gap: --spacing(2.5);
  --emr-sidebar-nav-item-has-icon-padding-start: --spacing(2.5);
  --emr-sidebar-nav-heading-color: var(--color-neutral-900);
  --emr-sidebar-nav-heading-font-size: var(--text-2xs);
  --emr-sidebar-nav-heading-font-weight: 700;
  --emr-sidebar-nav-heading-padding: 0 --spacing(4);
  --emr-sidebar-nav-heading-margin-top: --spacing(6);
  --emr-sidebar-nav-heading-margin-bottom: --spacing(2);
  --emr-sidebar-nav-heading-after-margin: --spacing(8);
  --emr-sidebar-nav-heading-text-transform: uppercase;
  --emr-sidebar-nav-divider-height: 1px;
  --emr-sidebar-nav-divider-bg: var(--color-border);
  --emr-sidebar-nav-divider-margin: --spacing(6) 0;
  --emr-sidebar-nav-group-toggle-has-icon-padding-end: --spacing(2);
  --emr-sidebar-nav-group-toggle-icon-color: var(--color-neutral-700);
  --emr-sidebar-nav-group-toggle-icon-position-end: --spacing(3);
  --emr-sidebar-nav-group-toggle-icon-size: --spacing(4);
  --emr-sidebar-nav-group-menu-padding-start: 0;
  --emr-sidebar-nav-group-toggle-bg: transparent;
  --emr-sidebar-nav-group-toggle-active-bg: var(--color-neutral-300);
  --emr-sidebar-nav-group-toggle-active-color: var(--emr-sidebar-nav-item-active-color);
  --emr-sidebar-nav-group-toggle-hover-icon-color: var(--color-secondary-700);
  --emr-sidebar-nav-group-toggle-active-icon-color: var(--color-secondary-700);
  --emr-sidebar-nav-nested-item-bg: transparent;
  --emr-sidebar-nav-nested-item-height: --spacing(10);
  --emr-sidebar-nav-nested-item-padding: 0 --spacing(4);
  --emr-sidebar-nav-nested-item-margin: 0 0 0 52px;
  --emr-sidebar-nav-nested-item-border-radius: 0;
  --emr-sidebar-nav-nested-item-color: var(--color-secondary-600);
  --emr-sidebar-nav-nested-item-hover-bg: var(--color-neutral-200);
  --emr-sidebar-nav-nested-item-active-bg: var(--color-secondary-fixed);
  --emr-sidebar-nav-nested-item-hover-color: var(--color-secondary-800);
  --emr-sidebar-nav-nested-item-active-color: var(--color-secondary-950);
  --emr-sidebar-nav-nested-item-indicator-width: --spacing(3.5);
  --emr-sidebar-nav-nested-item-indicator-height: --spacing(0.5);
  --emr-sidebar-nav-nested-item-indicator-bg: var(--color-neutral-500);
  --emr-sidebar-nav-nested-item-indicator-position-start: calc(--spacing(2.5) * -1);
  --emr-sidebar-nav-group-active-bg: transparent;
  --emr-sidebar-nav-group-border-radius: 0;
  --emr-sidebar-nav-group-tree-lines-color: var(--color-surface-container-highest);
  --emr-sidebar-nav-heading-text-align: start;
  --emr-sidebar-nav-compact-line-bg: var(--color-surface-container-high);

  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--emr-sidebar-nav-items-gap);
  background: var(--emr-sidebar-nav-bg);
}

:host-context(html.dark) {
  --emr-sidebar-nav-item-color: var(--color-neutral-400);
  --emr-sidebar-nav-item-icon-color: var(--color-neutral-400);
  --emr-sidebar-nav-item-hover-bg: var(--color-neutral-700);
  --emr-sidebar-nav-item-active-bg: var(--color-primary-300);
  --emr-sidebar-nav-item-hover-color: var(--color-neutral-100);
  --emr-sidebar-nav-item-hover-icon-color: var(--color-neutral-100);
  --emr-sidebar-nav-item-active-color: var(--color-neutral-950);
  --emr-sidebar-nav-item-active-icon-color: var(--color-neutral-950);
  --emr-sidebar-nav-heading-color: var(--color-neutral-200);
  --emr-sidebar-nav-nested-item-color: var(--color-neutral-400);
  --emr-sidebar-nav-nested-item-hover-bg: var(--color-neutral-700);
  --emr-sidebar-nav-nested-item-hover-color: var(--color-neutral-100);
  --emr-sidebar-nav-group-toggle-active-bg: var(--color-neutral-800);
  --emr-sidebar-nav-group-toggle-active-color: var(--color-neutral-100);
  --emr-sidebar-nav-group-toggle-icon-color: var(--color-neutral-300);
  --emr-sidebar-nav-group-toggle-hover-icon-color: var(--color-neutral-100);
  --emr-sidebar-nav-group-toggle-active-icon-color: var(--color-neutral-100);
  --emr-sidebar-nav-group-toggle-hover-bg: var(--color-neutral-800);
}
