:local(.sidebar) {
  composes: py2 from "style";
  width: 30%;
  max-width: 500px;
  background-color: var(--color-bg-light);
  color: var(--color-text-medium);
}

:local(.sidebar) a {
  text-decoration: none;
}

:local(.item),
:local(.sectionTitle) {
  composes: flex align-center from "style";
  composes: py1 mb1 from "style";
}

:local(.item) {
  composes: rounded pl2 from "style";
  font-size: 1em;
  color: var(--color-text-light);
}

:local(.item) :local(.icon) {
  line-height: 1em;
}

:local(.sectionTitle) {
  composes: my1 from "style";
  composes: text-bold from "style";
  font-size: 16px;
}

:local(.item):hover,
:local(.sectionTitle):hover {
  background-color: var(--color-bg-medium);
  color: var(--color-brand);
}

:local(.item.selected),
:local(.item.selected) :local(.icon),
:local(.sectionTitle.selected) {
  color: var(--color-brand);
}
:local(.item.selected),
:local(.sectionTitle.selected) {
  background-color: rgba(80, 158, 227, 0.15);
}

:local(.divider) {
  composes: my2 from "style";
  composes: border-bottom from "style";
}

:local(.name) {
  composes: ml2 text-bold from "style";
  color: var(--color-text-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
}

:local(.item):hover :local(.name),
:local(.item.selected) :local(.name) {
  color: var(--color-brand);
}

:local(.icon) {
  composes: flex-no-shrink from "style";
}

:local(.noLabelsMessage) {
  composes: relative from "style";
  composes: text-centered from "style";
  composes: p2 my3 from "style";
  composes: text-brand-light from "style";
}