/*
Rating hexagon: radar chart of the base criterion scores.
Rendered server-side as inline SVG by tool/includes/rating_hexagon.html;
shown on the tool detail Score tab (one tool) and the vs page (two
tools). Supports up to 5 overlaid tools, one color per series.
*/

/*container: center the chart, leave room for the labels that stick out of the svg*/
.rating-hexagon {
    max-width: 420px;
    margin: 0 auto 1.5rem;
    padding: 0 1.5rem;
}

/*the axis labels sit past the svg edge on purpose*/
.rating-hexagon svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/*grid rings at 25, 50, 75 and 100*/
.rating-hexagon-ring {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 1;
}

/*axis lines from the center to each criterion*/
.rating-hexagon-axis {
    stroke: #e9ecef;
    stroke-width: 1;
}

/*criterion names around the chart*/
.rating-hexagon-label {
    font-size: 11px;
    fill: #6c757d;
}

/*rating hexagon - axis labels with a criterion tooltip: the help cursor
  says "hover for an explanation", not "click me"*/
.rating-hexagon-label[data-toggle="tooltip"] {
    cursor: help;
}

/*one polygon per tool: translucent fill, solid outline*/
.rating-hexagon-series {
    fill-opacity: 0.15;
    stroke-width: 2;
    stroke-linejoin: round;
}

.rating-hexagon-series-1 {
    fill: #007bff;
    stroke: #007bff;
}

.rating-hexagon-series-2 {
    fill: #fd7e14;
    stroke: #fd7e14;
}

.rating-hexagon-series-3 {
    fill: #28a745;
    stroke: #28a745;
}

.rating-hexagon-series-4 {
    fill: #6f42c1;
    stroke: #6f42c1;
}

.rating-hexagon-series-5 {
    fill: #20c997;
    stroke: #20c997;
}

/*legend under the chart when more than one tool shows*/
.rating-hexagon-legend {
    text-align: center;
    font-size: 0.85rem;
    margin-bottom: 0;
}

.rating-hexagon-legend-item {
    margin: 0 0.5rem;
    white-space: nowrap;
}

/*colored square in front of each legend name, matching its series*/
.rating-hexagon-legend-item::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: baseline;
}

.rating-hexagon-legend-1::before {
    background: #007bff;
}

.rating-hexagon-legend-2::before {
    background: #fd7e14;
}

.rating-hexagon-legend-3::before {
    background: #28a745;
}

.rating-hexagon-legend-4::before {
    background: #6f42c1;
}

.rating-hexagon-legend-5::before {
    background: #20c997;
}