PaneHeader.css

.paneHeader {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-p2);
  position: relative;
  will-change: transform;
  padding: 0 var(--gutter-static);
  min-height: var(--control-min-size-touch);
  background-color: var(--color-fill);

  & button {
    z-index: 2;
    position: relative;
  }
}

/**
 * Default Pane Header styling
 */

/* Centered content in pane */
.paneHeaderCenter {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter-static-one-third);
}

/* Inner part of pane header
(which can be turned in to a button for toggling a popover in the future) */
.paneHeaderCenterInner {
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Add ellipsis to titles */
.paneTitle,
.paneSub {
  margin: 0;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;

  /*  If paneTitle is wrapped in a div
      we add display:flex and vertcially centers the content */
  & div {
    display: flex;
    align-items: center;
  }

  /* Any span within paneTitle will get ellipsis applied to it */
  & span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Pane title */
.paneTitle {
  font-size: var(--font-size-medium);
  font-weight: var(--text-weight-bold);
  align-items: center;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.paneTitleLabel {
  margin: 0 4px;
  outline: 0;
}

/* Pane sub */
.paneSub {
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* Pane button areas */
.paneHeaderButtonsArea {
  position: relative;
  align-items: center;
  display: flex;
  z-index: 1;
}

/* Pane action menu */
button.actionMenuToggle {
  margin: 0 var(--gutter-static-one-third);
}

/* stylelint-disable */
/* Pull last pane icon button to the right/end */
.paneHeaderButtonsArea.last .paneHeaderIconButton:last-child,
[dir="rtl"] .paneHeaderButtonsArea.first .paneHeaderIconButton:first-child {
  margin-right: calc(var(--gutter-static-two-thirds) * -1);
  margin-left: 0;
}

/* Pull first pane icon button to the left/start */
.paneHeaderButtonsArea.first .paneHeaderIconButton:first-child,
[dir="rtl"] .paneHeaderButtonsArea.last .paneHeaderIconButton:last-child {
  margin-left: calc(var(--gutter-static-two-thirds) * -1);
  margin-right: 0;
}
/* stylelint-enable */