:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D80, D60;
}

:import {
  -st-from: '../Foundation/stylable/default-scroll-bar.st.css';
  -st-named: defaultScrollBar;
}

.container {
  -st-states: withSections, labelPlacement(enum(end, bottom)), size(enum(medium, large, small));
  border-right: 1px solid value(D60);
  -st-mixin: defaultScrollBar;
  background: value(D80);
  padding: 12px 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  max-width: 240px;
}

.container:withSections {
  padding: 6px 0;
}

.container:labelPlacement(bottom) {
  width: 90px;
}

.container:size(small) {
  padding: 6px 0;
}

.section {
  display: flex;
  flex-direction: column;
}

.itemsContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  list-style-type: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

.title {
  display: block;
  padding: 12px 12px 12px 15px;
  box-sizing: border-box;
}

.item {
  -st-states: labelPlacement(enum(end, bottom, tooltip)), size(enum(medium, large, small));
}

.item:labelPlacement(end) {
  padding: 9px 15px;
}

.item:labelPlacement(end):size(small) {
  padding: 6px 15px;
}

.item:labelPlacement(bottom) {
  display: flex;
  justify-content: center;
  padding: 12px 6px;
}

.item:labelPlacement(bottom):size(small) {
  padding: 6px 6px;
}

.item:labelPlacement(tooltip) {
  padding: 12px 12px;
}

.item:labelPlacement(tooltip):size(small) {
  padding: 6px 12px;
}

/* st-namespace-reference="../../../../src/ComposerSidebar/ComposerSidebar.st.css" */