.toolbar {
  flex: 1 1 0%;
  position: relative; /* for `z-index` below, in case parent doesn't have `display: flex` */
  z-index: 1; /* for toolbar menus to appear above visualizations (overflow, selectors) */
  display: flex;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.5rem;
  background-color: var(--h5w-toolbar--bgColor, aliceblue);
  font-size: 0.875rem;
}

.controls {
  flex: 1 1 0%;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.controlWrapper[data-measured='false'] {
  position: relative;
  overflow: hidden; /* hide controls while they are being measured */
}

.controlWrapper[data-measured='false'] > .control {
  position: absolute;
}

.controlWrapper,
.control {
  display: flex;
}

.sep {
  margin: 0.375rem 0.25rem;
  border-left: 1px solid var(--h5w-toolbar-separator--color, rgba(0, 0, 0, 0.2));
}

.btn {
  composes: btnClean from global;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
}

a.btn {
  color: inherit;
  text-decoration: none;
}

.btn[data-small] {
  padding: 0 0.125rem;
}

.btnLike {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.875rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
  white-space: nowrap;
}

.btn[data-small] > .btnLike {
  height: 1.75rem;
  border-radius: 0.875rem;
  font-size: 0.875em;
}

.btn[data-raised] > .btnLike {
  box-shadow: 0 0 1px inset var(--h5w-btnRaised--shadowColor, gray),
    -1px -1px 2px inset var(--h5w-btnRaised--shadowColor, gray);
}

.icon {
  font-size: 1.5em;
  padding-top: 1px;
}

.btn[data-small] .icon {
  font-size: 1.375em;
}

.icon:not(:last-child) {
  margin-right: 0.375rem;
}

.btn[data-small] .icon:not(:last-child) {
  margin-right: 0.25rem;
}

.label {
  margin-right: 0.125rem;
  line-height: 1.5em;
}

.btn:hover > .btnLike {
  background-color: var(--h5w-btn-hover--bgColor, whitesmoke);
  box-shadow: -1px -1px 2px inset var(--h5w-btn-hover--shadowColor, var(--h5w-btnRaised--shadowColor, gray));
}

.btn[data-raised]:hover > .btnLike {
  box-shadow: 0 0 1px inset var(--h5w-btnRaised-hover--shadowColor, dimgray),
    -1px -1px 2px inset var(--h5w-btnRaised-hover--shadowColor, dimgray);
}

.btn:active > .btnLike,
.btn[data-raised]:active > .btnLike,
.btn[aria-pressed='true'] > .btnLike, /* toggle buttons, domain slider "edit" button */
.btn[aria-checked='true'] > .btnLike, /* toggle group buttons */
.btn[aria-haspopup][aria-expanded='true'] > .btnLike  /* selectors and overflow menu buttons */ {
  background-color: var(--h5w-btnPressed--bgColor, white);
  box-shadow: 1px 1px 2px inset
    var(--h5w-btnPressed--shadowColor, var(--h5w-btnRaised--shadowColor, gray));
}

.btn[aria-pressed='true']:hover > .btnLike,
.btn[aria-checked='true']:hover > .btnLike,
.btn[aria-haspopup][aria-expanded='true']:hover > .btnLike {
  box-shadow: 1px 1px 2px inset
    var(
      --h5w-btnPressed-hover--shadowColor,
      var(--h5w-btnRaised-hover--shadowColor, dimgray)
    );
}

.popup {
  position: absolute;
  bottom: 1px; /* guarantees overlap with toolbar for hover-only popup */
  padding-top: calc(0.375rem + 1px);
  transform: translateY(100%);
}

.popupInner {
  background-color: var(
    --h5w-domainSlider-tooltip--bgColor,
    rgba(255, 255, 255, 0.9)
  );
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.1) 0px 4px 11px;
}