//Percent gauge
$gauge-color                         : $link-color !default;
$gauge-max-color                     : $accent-one !default;
$gauge-text-color                    : $text-color !default;
$gauge-main-color                    : $accent-border !default;
$gauge-subtitle-color                : $accent-two !default;
$gauge-tick-color                    : $accent-three !default;
//Component badge
$healthy-circle-color                : $success !default;
$unhealthy-circle-color              : $error !default;
$healthy-background-color            : $success !default;
$unhealthy-background-color          : $error !default;
$healthy-text-color                  : $success !default;
$unhealthy-text-color                : $error !default;
$live-color                          : #52c41a !default;

.percent-gauge {
  fill: $gauge-main-color;

  .gauge-value-path {
    fill: $gauge-color;
  }

  .gauge-live-value-path {
    fill: $live-color;
  }

  .gauge-text-stroke {
    stroke: $gauge-main-color;
  }

  .gauge-value-fill {
    stroke: $gauge-text-color;
    fill: $gauge-text-color;
  }

  .gauge-title-fill {
    fill: $gauge-text-color;
  }

  .gauge-subtitle-fill {
    fill: $gauge-color;
  }

  .gauge-liveLabel-fill {
    fill: $live-color;
  }

  .gauge-tick-path {
    fill: none;
    stroke: $gauge-tick-color;
  }

  .gauge-max-path {
    fill: $gauge-max-color;
  }

  .gauge-circle-fill {
    fill: $gauge-tick-color;
  }

  .gauge-none-fill {
    fill: transparent;
  }

  .gauge-usedPercent-fill {
    stroke: $live-color;
    fill: $live-color;
  }

  .gauge-reservedPercent-fill {
    stroke: $gauge-color;
    fill: $gauge-color;
  }
}

.percent-gauge-tooltip {
  position: absolute;
  background: $info;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

.percent-gauge-tooltip table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  border-spacing: 0;
  background-color: #fff;
  empty-cells: show;
  box-shadow: 7px 7px 12px -9px #777;
}

.percent-gauge-tooltip th {
  background-color: #aaa;
  font-size: 14px;
  padding: 2px 5px;
  color: #FFF !important;
  text-align: center;
}

.percent-gauge-tooltip tr {
  border: 1px solid #CCC;
}

.percent-gauge-tooltip td {
  font-size: 13px;
  height: 25px;
  padding: 3px 6px;
  background-color: white;
  border-left: 1px dotted #999;
}
