toggle-corp/react-store

:root {
    --color-bar-hovered: var(--color-primary);
    --color-bar-selected: var(--color-accent);
}

.bar-chart {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--color-foreground);

    .content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;

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

            .bar {
                fill: var(--color-accent);

                &:hover {
                    fill: var(--color-bar-hovered);
                }
            }

            .bar-selected {
                fill: var(--color-bar-selected);
            }

            .axis {

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

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

                &.hide {
                    line,
                    path {
                        stroke: transparent;
                    }
                }
            }
        }
    }
}