/* st-namespace-reference="../../../src/RadarChart/RadarChart.st.css" */
@st-import Tooltip from '../Tooltip/Tooltip.st.css';
@st-import [F00, D80, D10, B10, D30, D40, D55] from '../Foundation/stylable/colors.st.css';
@st-import [text-tiny-thin, text-small-thin] from '../Foundation/stylable/typography.st.css';

:vars {
  greyFillColor: #f5f8fa;
  greyStrokeColor: #e3e3e3;
}

.root {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.axis {
  stroke: value(D80);
  stroke-width: 2px;
}

.axisLabel {
  -st-states: size(enum(small, large)), hovered, disabled;
  cursor: pointer;
  fill: value(D10);
}

.axisLabel:size(small) {
  -st-mixin: text-tiny-thin;
  color: value(D10);
}

.axisLabel:size(large) {
  -st-mixin: text-small-thin;
  color: value(D10);
}

.axisLabel:hovered {
  fill: value(B10);
}

.axisLabel:disabled {
  cursor: default;
  fill: value(D55);
}

.circles {
  fill: value(greyFillColor);
  stroke-width: 1px;
  stroke: value(greyStrokeColor);
}

.scaleLabel {
  -st-mixin: text-tiny-thin;
  fill: value(D30);
}

.dataPoint {
  -st-states: disabled;
  cursor: pointer;
}

.dataPoint:disabled {
  cursor: default;
}

.dataPoint:focus {
  outline: none;
}

.tooltip {
  -st-extends: Tooltip;
}