@import "shared/mixins-and-vars";

body {
    --text-zoom-factor: 1;
}

.chart-example {
    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    table {
        margin: 20px auto 0 auto;
        border: solid 1px black;
        width: initial;
    }

    svg {
        font-size: (16/@px);
    }

    .tick text {
        font-size: calc(0.625rem * var(--text-zoom-factor));
    }
}

#bar-chart {
    height: 400px;

    .ct-horizontal.ct-label {
        display: block;
        padding-right: 10px;
        white-space: nowrap;
        transform-origin: center right;
        transform: translateX(-170px) translateY(-10px) rotate(-35deg);
        min-width: 200px;
        text-align: right;
    }

    .ct-label {
        fill: #000;
        color: #000;
    }

    &.bar-chart--initialized {
        margin-bottom: 55px;

        svg {
            overflow: visible;
            padding-bottom: 200px;
        }
    }
}

.checker {
    fill: black;
}

.checker {
    fill: white;
}