/*!
 * React Vis (MetaTeam CSS overrides)
 * http://uber.github.io/react-vis/
 * https://github.com/uber/react-vis/blob/master/packages/react-vis/src/styles/examples.scss
 */


:root {
    --mtm-chart-light-text: rgba(0, 0, 0, 0.87);
    --mtm-chart-dark-text: #fff;
    --mtm-chart-light-bg: rgba(255,255,255,0.3);
    --mtm-chart-dark-bg: rgba(0,0,0,0.2);
    --mtm-chart-light-legend-bg: rgba(0,0,0,0.07);
    --mtm-chart-dark-legend-bg: rgba(255,255,255,0.15);
    --mtm-chart-light-gridlines: rgba(255,255,255,0.25);
    --mtm-chart-dark-gridlines: rgba(255,255,255,0.15);
}

.mtm-chart-hover-label {
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    color: #fff;
    border-radius: 4px;
    margin: 48px 0 0 0
}

.rv-discrete-color-legend-item {
    font-size: smaller;
    padding: 4px 6px;
    text-align: left;
}

.rv-xy-plot__series, .rv-xy-plot__series path {
    cursor: pointer
}


/* LIGHT */

.mtm-chart-container-light {
    background: var(--mtm-chart-light-bg);
    border-radius: 8px;
    color: var(--mtm-chart-light-text);
}

.mtm-chart-text-light {
    color: var(--mtm-chart-light-text) !important;
}

.mtm-chart-legend-light {
    background: var(--mtm-chart-light-legend-bg);
    border-radius: 4px;
}

.mtm-chart-legend-light .rv-discrete-color-legend-item {
    color: var(--mtm-chart-light-text);
}

.mtm-chart-light .rv-xy-plot__series--label-text,
.mtm-chart-light .rv-xy-plot__axis__tick__text {
    fill: var(--mtm-chart-light-text);
    pointer-events: none;
    text-shadow: 1px 1px WHITE;
}

.mtm-chart-light .rv-xy-plot__grid-lines__line,
.mtm-chart-light .rv-xy-plot__axis__line {
    stroke: var(--mtm-chart-light-gridlines)
}

.mtm-chart-light .rv-radial-chart__series--pie__slice {
    stroke: #fff !important;
    stroke-width: 0.5px !important;
}

.mtm-chart-light .rv-radial-chart__series--pie__slice:hover {
    stroke: #666 !important;
    stroke-width: 2px !important;
}


/* DARK */

.mtm-chart-container-dark {
    background: var(--mtm-chart-dark-bg);
    border-radius: 8px;
    color: var(--mtm-chart-dark-text);
}

.mtm-chart-text-dark {
    color: var(--mtm-chart-dark-text) !important;
}

.mtm-chart-legend-dark {
    background: var(--mtm-chart-dark-legend-bg);
    border-radius: 4px;
}

.mtm-chart-legend-dark .rv-discrete-color-legend-item {
    color: var(--mtm-chart-dark-text);
}

.mtm-chart-dark .rv-xy-plot__series--label-text,
.mtm-chart-dark .rv-xy-plot__axis__tick__text {
    fill: var(--mtm-chart-dark-text);
    pointer-events: none;
    text-shadow: 1px 1px BLACK;
}

.mtm-chart-dark .rv-xy-plot__grid-lines__line,
.mtm-chart-dark .rv-xy-plot__axis__line {
    stroke: var(--mtm-chart-dark-gridlines)
}

.mtm-chart-dark .rv-radial-chart__series--pie__slice {
    stroke: #666 !important;
    stroke-width: 0.5px !important;
}

.mtm-chart-dark .rv-radial-chart__series--pie__slice:hover {
    stroke: #666 !important;
    stroke-width: 2px !important;
}