.root {
  -st-states: views, mobile, harmony,
    responsiveMode(enum(title, views, tabs, disabled));
}

/* Harmony spacing comes from the flex gap on the overflow box (8px);
   drop the built-in 12px margin WDS TableToolbar.Item adds on top of it */
.root:harmony .right :global([data-hook='horizontal-overflow-box']) > * {
  margin-inline-start: 0;
}

.left {
  -st-states: expandable, title;
  min-width: 0;
}

.left:expandable {
  flex: auto;
}

.left:title > * {
  width: 100%;
}

.root:responsiveMode(title) .left {
  flex: 1 100;
  min-width: 50px;
}

.root:responsiveMode(tabs) .left,
.root:responsiveMode(tabs) .left:expandable {
  flex: 1 100 auto;
  min-width: 140px;
}

.root:responsiveMode(tabs) .left > * {
  flex-shrink: 1;
  min-width: 0;
}

.root .right {
  justify-content: flex-end !important;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.root:views .right {
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
}

.root:responsiveMode(tabs) .right,
.root:responsiveMode(title) .right {
  flex: 0 1 auto;
  min-width: 0;
}

.root .right.fullWidth {
  margin-inline-start: 0 !important;
}

.root:mobile {
  padding-right: 18px;
  padding-left: 18px;
}