:host {
  --sidebar-item-padding-left: 12px;
  --sidebar-item-expand-toggle-left: calc(
    var(--sidebar-item-padding-left) + var(--sidebar-item-additional-padding-left, 0px)
  );
  --sidebar-item-padding: 6px 12px 6px
    calc(var(--sidebar-item-padding-left) + var(--sidebar-item-additional-padding-left, 0px));

  display: block;
  flex-shrink: 0;
}

:host(.header),
:host(.footer) {
  --sidebar-item-padding: 12px 12px 12px
    calc(var(--sidebar-item-padding-left) + var(--sidebar-item-additional-padding-left, 0px));
}

:host(.header) {
  border-bottom: 1px solid var(--color-gray-eee);
}

:host(.main) {
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

:host(.footer) {
  border-top: 1px solid var(--color-gray-eee);
}

.scrollbar {
  --scrollbar-width: none;
  --scroll-controls-display: block;

  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

:host-context(.collapsed) {
  overflow-x: hidden;

  .scrollbar {
    overflow-x: hidden;
  }
}