toggle-corp/react-store

:root {
    --timeseries-area-color: rgba(0, 128, 128, .6);
    --timeseries-line-color: #008080;
    --timeseries-color-overlay: var(--timeseries-line-color);
    --timeseries-stroke-overlay: #fff;
}

.time-series {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;

    svg {
        flex-grow: 1;
        width: 100%;
        height: 100%;

        :global {
            .axis {
                line,
                path {
                    stroke: var(--color-background-header-alt);
                }

                text {
                    fill: var(--color-text);
                }
            }

            .time-area {
                path {
                    stroke: var(--timeseries-area-color);
                    fill: var(--timeseries-area-color);
                }
            }

            .time-path {
                path {
                    stroke: var(--timeseries-line-color);
                    fill: transparent;
                    stroke-width: 1.5px;
                }
            }

            .overlay {
                fill: none;
                pointer-events: all;
            }

            .overlay-line {
                opacity: 0;
                stroke: var(--timeseries-color-overlay);
                fill: var(--timeseries-color-overlay);
            }

            .overlay-circle {
                opacity: 0;
                stroke: var(--timeseries-stroke-overlay);
                fill: var(--timeseries-line-color);
            }
        }
    }
}