@reference 'tailwindcss';

:host {
  --emr-tab-panel-width: 5rem;
  --emr-tab-panel-item-width: 3.75rem;
  --emr-tab-panel-item-height: 3.75rem;
  --emr-tab-panel-item-padding: calc(var(--spacing) * 2);
  --emr-tab-panel-item-color: var(--color-neutral-500);
  --emr-tab-panel-item-gap: calc(var(--spacing) * 1);
  --emr-tab-panel-item-hover-bg: var(--color-neutral-200);
  --emr-tab-panel-item-hover-color: var(--color-neutral-700);
  --emr-tab-panel-item-active-bg: var(--color-secondary-fixed);
  --emr-tab-panel-item-active-color: var(--color-on-secondary-fixed);
  --emr-tab-panel-item-border-radius: theme(--radius-xl);
  --emr-tab-panel-aside-width: 18.75rem;
  --emr-tab-panel-border-end: 1px solid var(--color-border);
  --emr-tab-panel-nav-padding: calc(var(--spacing) * 2.5);
  --emr-tab-panel-nav-gap: calc(var(--spacing) * 3);
  --emr-tab-panel-item-text-font-size: var(--text-xs);
  --emr-tab-panel-item-icon-font-size: theme(--text-2xl);

  // compact state
  --emr-tab-panel-compact-width: --spacing(14);
  --emr-tab-panel-compact-item-width: --spacing(10);
  --emr-tab-panel-compact-item-height: --spacing(10);

  display: flex;
  width: min-content;
  align-items: stretch;

  .panel {
    display: flex;
    flex-direction: column;
    border-right: var(--emr-tab-panel-border-end);
    width: var(--emr-tab-panel-width);
    flex: none;
  }

  &.is-compact {
    .panel {
      width: var(--emr-tab-panel-compact-width);
    }
  }
}

:host-context(html.dark) {
  --emr-tab-panel-item-hover-bg: var(--color-neutral-700);
  --emr-tab-panel-item-hover-color: var(--color-primary-200);
}
