<template>
  <div class="dc-chart-toolbar">
    <div class="left-box">
      <slot name="left"></slot>
    </div>
    <div class="right-box">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChartToolbar',
};
</script>

<style lang="less">
.dc-chart-toolbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  z-index: 2;
  .left-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 32px;
    .index-select {
      min-width: 96px;
      margin-right: 4px;
      margin-bottom: 4px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .right-box {
    display: flex;
    align-items: center;
    .dimension-select {
      min-width: 96px;
    }
  }

  &.editable {
    .right-box {
      padding-right: 28px;
    }
  }
}
</style>
