.chart-tooltip {
  background-color: $tooltip-bg-color;
  border: $tooltip-border;
  @include box-shadow($tooltip-box-shadow);
  display: none;
  padding: $tooltip-padding;
  position: absolute;
  white-space: nowrap;
  z-index: 12000;

  &.tooltip-enabled {
    display: inline-block;
  }

  .tooltip-key {
    color: $tooltip-key-color;
    font-weight: $tooltip-key-weight;
    padding: $tooltip-key-padding;
  }

  .tooltip-value {
    color: $tooltip-value-color;
  }

  span.fa {
    background-color: inherit;
    fill: none;
    &.usage {
      color: $chart-quota-usage-color;
    }

    &.added {
      color: $chart-quota-added-color;
    }

    &.remaining {
      color: $chart-quota-remaining-color;
    }

    &.danger {
      color: $chart-quota-danger-color;
    }
  }
}

// styles for donut chart tooltips over quota
.pie-chart.danger {
  .chart-tooltip {
    span.fa {
      &.added {
        color: $chart-quota-danger-color;
      }
    }
  }
}