toggle-corp/react-store

@import '../../../stylesheets/utils';

.horizontal-bar {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;

    .grid line {
        stroke: var(--color-grid-path);
        shape-rendering: crispEdges;
    }

    .grid {
        path {
            stroke: var(--color-axis-path);
        }
    }

    .x-axis {
        path {
            stroke: var(--color-axis-path);
        }

        :global {
            .tick line {
                visibility: hidden;
            }
        }
    }

    .y-axis {
        path {
            stroke: var(--color-axis-path);

            :global {
                .tick line {
                    visibility: hidden;
                }
            }
        }
    }
}

.tooltip {
    @include shadow-medium;
    position: fixed;
    z-index: 10;
    background-color: var(--color-foreground);
    padding: var(--spacing-small) var(--spacing-medium-alt);
    animation: fade-in .2s ease-in;
    color: var(--color-text-on-foreground);
    pointer-events: none;

    .label {
        display: block;
    }

    .value {
        display: block;
    }
}