/* Color options for line chart */
/* Currently these are merely distinctive web colors for testing purposes. */
/* Final colors are up for discussion, but there should be 6 as shown below */
:root {
    --chartCompareCountriesColor0: blue;
    --chartCompareCountriesColor1: orange;
    --chartCompareCountriesColor2: green;
    --chartCompareCountriesColor3: red;
    --chartCompareCountriesColor4: purple;
    --chartCompareCountriesColor5: gray;
}

#chartCompareCountriesWrapper {}

.chartCompareCountriesModuleWrapper {
    background-color: var(--ef-background-gray-light);
    border: 1px solid var(--ef-background-gray-medium-light);
}

/* 'Select countries' placeholder text */
#noteToAddCountries {
    text-anchor: middle;
    alignment-baseline: middle;
    font-size: 1rem;
    opacity: .6;
    user-select: none;
}

/* Chart lines; line color and thickness is set by JS */
.chartCompareCountriesLine {
    fill: none;
    stroke-linecap: round;
}

/* Chart dots that appear on mouseover */
.chartCompareCountriesValueLabelsDots {
    pointer-events: none;
}

/* Chart labels that appear on mouseover */
.chartCompareCountriesValueLabelsText,
.chartCompareCountriesValueLabelsTextWhite {
    font-size: 1.125rem;
    font-weight: 500;
    pointer-events: none;
    alignment-baseline: middle;
    text-anchor: start;
}

/* The 'fill' and 'stroke' colors should match the background */
.chartCompareCountriesValueLabelsTextWhite {
    fill: var(--ef-background-gray-light);
    stroke: var(--ef-background-gray-light);
    opacity: 0.9;
    stroke-width: 8;
    stroke-linejoin: round;
}

/* Tick mark labels */
.tick text {
    font-size: .75rem;
    fill: var(--ef-black);
    user-select: none;
}

/* Tick lines */
.tick line, .domain {
    stroke: var(--ef-background-gray-dark);
    stroke-width: 0.5px;
    image-rendering: crisp-edges;
}

/* Year indicator line and text that appear on mouseover */
#chartCompareCountriesYearIndicatorLine {
    stroke: var(--ef-black);
    opacity: 0.5;
    stroke-width: 0.8;
    pointer-events: none;
    image-rendering: crisp-edges;
}

#chartCompareCountriesYearIndicatorText {
    stroke: var(--ef-black);
    font-weight: 100;
    opacity: 0.7;
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
}

/* DIV to hold key items */
#countriesKey {}

/* Individual key items */
.countriesKeyItem {
    font-size: .875rem;
    padding: 3px 6px 4px 6px;
    border: 0 solid;
    border-bottom: 3px solid white;
    width: fit-content;
    margin-right: 12px;
    margin-bottom: 6px;
    user-select: none;
    display: inline-block;
}

.countriesKeyItem:hover {
    background-color: var(--ef-background-gray-light);
    cursor: arrow;
}