toggle-corp/react-store

.vertical-bar-chart {
    display: flex;
    align-items: center;
    justify-content: center;

    .svg {
        .bars {
            .bar {
                opacity: .2;
                fill: var(--color-accent);
                cursor: pointer;

                &:hover {
                    opacity: .7;
                }
            }
        }

        .y-axis {
            .line {
                stroke-width: var(--width-separator-thin);
                stroke: var(--color-accent);
            }

            .ticks {
                text-anchor: end;

                .line {
                    stroke-width: var(--width-separator-thin);
                    stroke: var(--color-accent);
                }

                .label {
                    fill: var(--color-text);
                    font-size: var(--font-size-extra-small);
                }
            }
        }

        .x-axis {
            stroke-width: var(--width-separator-thin);
            stroke: var(--color-accent);
        }

        .grid {
            .x-grid {
                fill: none;
                stroke-width: var(--width-separator-thin);
                stroke: var(--color-separator);
                stroke-dasharray: 5,5;
            }
        }
    }
}