toggle-corp/react-store

.horizontal-bar-chart {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .overflow-container {
        flex-grow: 1;
        overflow: auto;

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

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

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

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

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

    .axes-container {
        flex-shrink: 0;

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

                .tick {
                    text-anchor: middle;

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

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