@import "../../styles/modules/importAll";

.legend {
  font-family: $bodyFont;
  h4 {
    margin-bottom: 5px;
    font-size: 16px;
  }
  .legend-description {
    font-size: 12px;
    margin-bottom: 2rem;
  }
  .vx-legend {
    line-height: 22px;
    font-size: 14px;
  
    .vx-legend-item {
      margin-left: 0 !important;
  
      .vx-legend-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block !important;
      }
    }
  }

  &.legend-horizontal {
    text-align: center;
    
    .vx-legend {
      display: inline-block !important;
    }

    .vx-legend-item {
      padding-left: 15px;
      position: relative;
      vertical-align: top;
      height: 20px;
    }

    .vx-legend-shape {
      position: absolute;
      left: 0;
      top: 0;
    }    

    .vx-legend-label {
      position: relative;
    }

    .vx-legend-item,
    .vx-legend-shape,
    .vx-legend-label {
      display: inline-block !important;
      white-space: nowrap !important;
    }

    .BubbleLegend,
    .vx-legend {
      display: inline-block;
      vertical-align: top;
    }   
  }
}
