.chart-wrapper {
    font-size: $medium-font;
    g.xsmall {
        font-size: 0.6rem;
    }
    g.small {
        font-size: $smaller-font;
    }
    g.medium {
        font-size: $small-font;
    }
    g.large,
    g.xlarge {
        font-size: $medium-font;
    }
}

.chart--bar {
    font-size: $medium-font;
}

.block__contents {
    @include small {
        overflow-x: scroll;
        background: rgba(255, 255, 255, 0.5);
    }
}
.block__contents__inner {
    @include small {
        padding: 0 $spacing $spacing $spacing;
        min-width: 800px;
    }
}
.PieRow {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.PieRow svg {
    margin-right: 15px;
}

.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;
}

.user-facts-placeholder {
    @include flex-center;
    border: dotted 1px $border-color;
    min-height: 400px;
    h3 {
        margin: 0;
    }
}

.results-chart-wrapper {
    padding: 0 $spacing * 3;
    text {
        font-size: $small-font;
    }
}

.Chart__Container__Outer {
    position: relative;
}
.Chart__Container {
    @include small-medium {
        overflow-x: scroll;
    }
    svg {
        display: block;
    }
}
.Chart__Container__Inner {
    .Chart__Container__Outer--expand & {
        @include small-medium {
            min-width: 800px;
            padding-bottom: $spacing;
        }
    }
}
.Chart__Container__Outer--expand .Chart__Container__Inner {
    @include small {
        max-height: 400px;
    }
}
.Chart__Container__Indicator {
    @include small {
        position: absolute;
        @include flex-center;
        z-index: 100;
        svg {
            display: block;
            stroke: $teal;
            opacity: 0.5;
            overflow: visible;
        }
        &--left,
        &--right {
            top: 0;
            bottom: 0;
            width: 20px;
        }
        &--left {
            left: 10px;
        }
        &--right {
            right: 10px;
            transform: rotate(180deg);
        }
        &--top,
        &--bottom {
            left: 0;
            right: 0;
            height: 20px;
        }
        &--top {
            top: 10px;
            transform: rotate(90deg);
        }
        &--bottom {
            bottom: 10px;
            transform: rotate(-90deg);
        }
    }
    @include medium-large {
        display: none;
    }
}

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

.OpinionSelector {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    color: $blue;
    border-bottom: 1px dashed $blue;
    border-radius: 0;

    &:focus {
        outline: transparent;
        border-bottom-style: solid;
    }
}

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

.Bar__Chart {
    & > div > div > svg {
        overflow: visible;
        box-sizing: content-box;
        border-bottom: 180px solid transparent;
        position: relative;
        z-index: 1;
        #text_editors & {
            // hack to prevent border from overlapping resources
            border-bottom: none;
        }
    }
}

.Bar__Tick {
    z-index: 1000;
}

.Bar__Tooltip__Wrapper {
    overflow: visible;
    display: none;
    z-index: 1000;
    .Bar__Tick:hover & {
        display: block;
    }
}

.Bar__Tick__Label {
    fill: $text-color;
    font-size: $small-font;
    cursor: default;
    &--hoverable {
        cursor: pointer;
        @include font-bold;
        fill: $active-color;
    }
}

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

/* 

Chart Controls

*/
.ChartControls {
    display: flex;
    justify-content: flex-end;
}

.ChartModeSelector,
.ChartUnitsSelector {
    display: inline-flex;
    align-items: center;
}

.ChartModeSelector {
    margin-right: $spacing;
}

.ChartModeSelector__Label,
.ChartUnitsSelector__Label {
    @include font-bold;
    padding: $spacing / 5 $spacing / 1.5 $spacing / 5 0;
    font-size: $small-font;
    white-space: nowrap;
}
/*

Vertical Bar Chart

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

Gauge Chart

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

Circle Packing Chart

*/
.CirclePackingChart{
    svg{
        overflow: visible;
    }
}
.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;
    }
}
.CirclePackingNode {
    &--inactive {
        opacity: 0.15;
    }
}
.CirclePackingNode__Legend {
    pointer-events: none;
    opacity: 0;
    transition: all 300ms ease-in;
    .CirclePackingNode--active & {
        opacity: 1;
    }
}
.CirclePackingNode__Legend__Label {
    font-size: $smallish-font;
}
.CirclePackingNode__Legend__Value {
    @include font-bold;
}
.ToolsOverviewCirclePackingChart {
    svg {
        overflow: visible;
    }
}

.CirclePackingNode__TotalCircle {
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    // transition: all 200ms ease-in;
    .CirclePackingNode:hover & {
        opacity: 1;
        transform: scale(1);
        // transition: all 200ms ease-in;
    }
}

.CirclePackingNode__TotalCircleLabel{
    opacity: 0;
    pointer-events: none;
    animation: rotateAnim 20s linear infinite;
    animation-fill-mode: forwards;
    // transition: all 200ms ease-in;
    font-size: $small-font;
    @include font-bold;
    .CirclePackingNode:hover & {
        opacity: 1;
        // transition: all 200ms ease-in;
    }
}
.CirclePackingNode__SectionLabel{
    opacity: 0.65;
}
/*

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;
            // transform: scale(1.2) translateX(15px);
        }
        .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__PointHoverZone {
}

.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

*/
.BumpChart__Node {
    transition: all 200ms ease-out;
}

@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-teal {
    @include coloredText($teal);
}

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

.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);
        }
    }
}
