$fg-color: #222;
$bg-color: white;
$arrow-size: 10px;
$vertical-border-color: #cacaca;

.container {
  z-index: 10;

  /* Prevents the popper from shifting when adding it to the DOM
   * triggers showing the scrollbars.
   * https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
   */
  top: 0;
  font-size: 12px;

  button:enabled {
    cursor: pointer;
  }
}

.arrow {
  position: absolute;
  border: $arrow-size solid transparent;
  margin: $arrow-size;
}

.container[data-placement^='bottom'] .arrow {
  border-top-width: 0;
  border-bottom-color: $bg-color;
  margin-top: 0;
}

.content {
  border-right: 1px solid $vertical-border-color;
  border-bottom: 1px solid var(--header-accent-border);
  border-left: 1px solid $vertical-border-color;
  margin: $arrow-size;
  background: $bg-color;
  border-radius: var(--header-border-radius);
  box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 white;
  color: $fg-color;
}

$fg-color: #222;
$bg-color: white;
$arrow-size: 10px;
$vertical-border-color: #cacaca;

.container {
  z-index: 10;

  /* Prevents the popper from shifting when adding it to the DOM
   * triggers showing the scrollbars.
   * https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
   */
  top: 0;
  font-size: 12px;

  button:enabled {
    cursor: pointer;
  }
}

.arrow {
  border: $arrow-size solid transparent;
}

.container[data-placement^='bottom'] .arrow {
  border-top-width: 0;
  border-bottom-color: $bg-color;
  margin-top: 0;
}

.content {
  border-right: 1px solid $vertical-border-color;
  border-bottom: 1px solid var(--header-accent-border);
  border-left: 1px solid $vertical-border-color;
  margin: $arrow-size;
  background: $bg-color;
  border-radius: var(--header-border-radius);
  box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 white;
  color: $fg-color;
}

Adjust positioning of the popper arrow so it is centered
Adjust positioning of the popper arrow so it is centered
