@import "ui-variables";

.nuclide-ui-toolbar {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  flex-wrap: wrap;
  min-height: 32px;
  line-height: 32px;
  padding: 0 (@component-padding / 2);
}

.nuclide-ui-toolbar--bottom {
  border-top: 1px solid @pane-item-border-color;
}

.nuclide-ui-toolbar--top {
  border-bottom: 1px solid @pane-item-border-color;
}

.nuclide-ui-toolbar__center,
.nuclide-ui-toolbar__left,
.nuclide-ui-toolbar__right {
  align-items: center;
  display: flex;
  overflow: hidden;
  white-space: nowrap;

  // Set up flex for the following cases:
  // * Any single children should take up the whole width (flex: 1)
  // * If there are left, right, and center elements, the left and right should
  //   both have equal width (so that middle column is actually centered)
  &:only-child,
  &:nth-child(3),
  &:nth-last-child(3) {
    flex: 1;
  }
}

.nuclide-ui-toolbar__center {
  justify-content: center;
}

.nuclide-ui-toolbar__right {
  justify-content: flex-end;
}