
.Help {
    font-size: 13px;
    color: #6f8183;
    margin-bottom: 20px;
    padding-left: 15px;
}
.Help svg {
    color: rgb(150, 136, 228);
    display: inline-block;
    vertical-align: text-bottom;
}

.Overview__Chart {
    .Legends {
        @include small-medium {
            margin-top: $spacing;
        }
        @include large {
            margin-top: $spacing * 2;
        }
    }
}

.ToolsUsageByCountry__Chart,
.SalaryPerCountry__Chart {
    height: 500px;
}

.ToolsOverviewBlock {
    .Legends {
        margin-top: $spacing * 2;
    }
}


/*

Vertical Bar Chart

*/
.OpinionScaleChart {
    padding-top: $spacing;
    svg {
        overflow: visible;
    }
}
/*

Gauge Chart

*/
.FTBlock {
    .Legends__Item__Value {
        @include large {
            display: none;
        }
    }
}

.FeaturesOverviewChart {
    @include xsmall {
        height: 800px;
    }
    @include small {
        height: 800px;
    }
    @include medium {
        height: 800px;
    }
    @include large {
        height: 800px;
    }
}
.FeaturesSectionOverviewChart {
    @include xsmall {
        height: 200px;
    }
    @include small {
        height: 400px;
    }
    @include medium {
        height: 500px;
    }
    @include large {
        height: 500px;
    }
}
.ToolsOverviewCirclePackingChart {
    svg {
        overflow: visible;
    }
}

/*

Technologies Overview Chart

*/
.TechnologiesOverviewChart {
    @include xsmall {
        height: 800px;
    }
    @include small {
        height: 800px;
    }
    @include medium {
        height: 800px;
    }
    @include large {
        height: 800px;
    }
}
/*

Quadrant/Scatterplot Chart

*/
.Quadrant__Label {
    color: $teal;
    fill: $teal;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.75;
    font-size: $larger-font;
}
.Scatterplot__Node {
    &:hover {
        .Scatterplot__Node__Crosshairs {
            opacity: 1;
            transition: all 200ms ease-out;
        }
        .Scatterplot__Node__Label {
            transform: translateX(30px);
            transition: all 200ms ease-out;
        }
        .Scatterplot__Node__Label__Background {
            opacity: 0.75;
            transition: all 200ms ease-out;
        }
        .Scatterplot__Node__Label__Text {
            fill: $navy;
            transition: all 200ms ease-out;
        }
        .Scatterplot__Node__Crosshair__Line {
            @include svgAnts;
        }
    }
}
.Scatterplot__Node__Label {
    pointer-events: none;
    transition: all 200ms ease-out;
}
.Scatterplot__Node__Label__Background {
    opacity: 0;
    transition: all 200ms ease-out;
}
.Scatterplot__Node__Label__Text {
    font-size: $small-font;
    transition: all 200ms ease-out;
}

.Scatterplot__Node__Crosshairs {
    pointer-events: none;
    opacity: 0;
    transition: all 200ms ease-out;
}
.Scatterplot__Node__PointHover {
    opacity: 0.75;
}
.Scatterplot__Node__Crosshair__Label {
    font-size: $small-font;
}
/*

Bump Chart

*/
@mixin coloredText($color) {
    display: inline-block;
    background: $teal;
    color: $navy;
    border-radius: 15px;
    padding: 0 12px;
    background: $color;
    @include font-bold;
}
.text-highlight {
    @include coloredText(#000);
}
.text-green {
    @include coloredText($green);
}

.text-pink {
    @include coloredText($pink);
}
.text-pink-light {
    @include coloredText($pinkLight);
}
.text-pink-lighter {
    @include coloredText($pinkLighter);
}
.text-red {
    @include coloredText($red);
}
.text-teal {
    @include coloredText($teal);
}
.text-teal-dark {
    @include coloredText($tealDark);
}
.text-teal-darker {
    @include coloredText($tealDarker);
}

.text-blue {
    @include coloredText($blue);
}
.text-blackred {
    @include coloredText(black(0.3));
    color: $teal;
    border: 1px solid $red;
}

.text-bold {
    @include font-bold;
}

.Chip {
    display: block;
    margin-right: 7px;
    position: relative;
    overflow: hidden;
    height: 12px;
    width: 12px;
}
.Chip__Inner {
    height: 100%;
    width: 100%;
    display: block;
    .Chip--split & {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;

        &:last-child {
            z-index: 2;
            width: 200%;
            height: 100%;
            transform: translateX(-3px) translateY(5px) rotate(-45deg);
        }
    }
}
