@import 'element:ef-tornado-item';
@import 'element:ef-layout';

:host {
  --primary-color: @dataviz-color-primary;
  --secondary-color: @dataviz-color-secondary;
  --responsive-width: 450;

  font-size: @global-text-size;

  [part='legend'] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 25px;
  }

  [part='legend-item'] {
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    margin-right: 10px;
  }

  // responsive style for legend
  [part='legend'][vertical] {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  [part='primary-symbol'],
  [part='secondary-symbol'] {
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 1px;
    margin-right: 5px;
  }

  [part='primary-symbol'] {
    background-color: var(--primary-color);
  }

  [part='secondary-symbol'] {
    background-color: var(--secondary-color);
  }

  [part='primary-label'],
  [part='secondary-label'] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}