.ax-bars__bar {
    display: flex;
    position: relative;
    transition: opacity var(--transition-time-base) var(--transition-function);
}

.ax-bars__bar--center {
    align-items: center;
}

.ax-bars__bar--faded {
    opacity: var(--cmp-chart-opacity-faded);
}

.ax-bars__bar--hidden {
    opacity: 0;
}

.ax-bars__bar-label {
    align-self: center;
    opacity: 1;
    line-height: var(--cmp-chart-label-line-height);
    transition: opacity var(--transition-time-base) var(--transition-function);
}

.ax-bars__bar-label--hidden {
    opacity: 0;
}

.ax-bars__bar-rect {
    position: relative;
    flex: 1 1 0%;
}

.ax-bars__bar-rect .ax-bars__bar--solid,
    .ax-bars__bar-rect .ax-bars__bar--striped,
    .ax-bars__bar-rect .ax-bars__bar--semistriped {
        width: 100%;
        height: 100%;
    }

.ax-bars__bar-rect .ax-bars__bar--solid {
        background-color: currentcolor;
    }

.ax-bars__bar-rect .ax-bars__bar-striped,
    .ax-bars__bar-rect .ax-bars__bar--semistriped {
        position: absolute;
        top: 0;
        bottom: 0;
    }

.ax-bars__bar-rect .ax-bars__bar--semistriped {
        opacity: 0.3;
        background:
            repeating-linear-gradient(
                -45deg,
                rgb(var(--rgb-ui-white)),
                rgb(var(--rgb-ui-white)) var(--spacing-grid-size--x1),
                currentcolor var(--spacing-grid-size--x1),
                currentcolor calc(var(--spacing-grid-size--x1) * 2)
            );
    }

.ax-bars__bar-rect .ax-bars__bar--striped {
        opacity: 0.4;
        background:
            repeating-linear-gradient(
                -45deg,
                transparent,
                transparent var(--spacing-grid-size--x1),
                currentcolor var(--spacing-grid-size--x1),
                currentcolor calc(var(--spacing-grid-size--x1) * 2)
            );
    }

.ax-bars__bar-rect.ax-bars__bar-rect--forbidden-planet { color: var(--color-product-forbidden-planet); }

.ax-bars__bar-rect.ax-bars__bar-rect--tiny-clanger { color: var(--color-product-tiny-clanger); }

.ax-bars__bar-rect.ax-bars__bar-rect--critical-mass { color: var(--color-product-critical-mass); }

.ax-bars__bar-rect.ax-bars__bar-rect--fantastic-voyage { color: var(--color-product-fantastic-voyage); }

.ax-bars__bar-rect.ax-bars__bar-rect--paradise-lost { color: var(--color-product-paradise-lost); }

.ax-bars__bar-rect.ax-bars__bar-rect--serene-sea { color: var(--color-product-serene-sea); }

.ax-bars__bar-rect.ax-bars__bar-rect--event-horizon { color: var(--color-product-event-horizon); }

.ax-bars__bar-rect.ax-bars__bar-rect--electric-dreams { color: var(--color-product-electric-dreams); }

.ax-bars__bar-rect.ax-bars__bar-rect--outer-limits { color: var(--color-product-outer-limits); }

.ax-bars__bar-rect.ax-bars__bar-rect--giant-leap { color: var(--color-product-giant-leap); }

.ax-bars__bar-rect.ax-bars__bar-rect--moon-lagoon { color: var(--color-product-moon-lagoon); }

.ax-bars__bar-rect.ax-bars__bar-rect--space-invader { color: var(--color-product-space-invader); }

.ax-bars__bar-rect.ax-bars__bar-rect--extraterrestrial { color: var(--color-product-extraterrestrial); }

.ax-bars__bar-rect.ax-bars__bar-rect--terra-form { color: var(--color-product-terra-form); }

.ax-bars__bar-rect.ax-bars__bar-rect--primeval-soup { color: var(--color-product-primeval-soup); }

.ax-bars__bar-rect.ax-bars__bar-rect--future-shock { color: var(--color-product-future-shock); }

.ax-bars__bar-rect.ax-bars__bar-rect--sun-maker { color: var(--color-product-sun-maker); }

.ax-bars__bar-rect.ax-bars__bar-rect--new-horizon { color: var(--color-product-new-horizon); }

.ax-bars__bar-rect.ax-bars__bar-rect--blast-off { color: var(--color-product-blast-off); }

.ax-bars__bar-rect.ax-bars__bar-rect--crash-course { color: var(--color-product-crash-course); }

.ax-bars__bar-rect.ax-bars__bar-rect--solar-rust { color: var(--color-product-solar-rust); }

.ax-bars__bar-rect.ax-bars__bar-rect--ground-control { color: var(--color-product-ground-control); }

.ax-bars__bar-rect.ax-bars__bar-rect--space-oddity { color: var(--color-product-space-oddity); }

.ax-bars__bar-rect.ax-bars__bar-rect--rocky-planet { color: var(--color-product-rocky-planet); }

.ax-bars__bar-rect.ax-bars__bar-rect--deep-thought { color: var(--color-product-deep-thought); }

.ax-bars__bar-rect.ax-bars__bar-rect--luna-dust { color: var(--color-product-luna-dust); }

.ax-bars__bar-rect.ax-bars__bar-rect--sentiment-positive { color: var(--color-sentiment-positive); }

.ax-bars__bar-rect.ax-bars__bar-rect--sentiment-negative { color: var(--color-sentiment-negative); }

.ax-bars__bar-rect.ax-bars__bar-rect--sentiment-neutral { color: var(--color-sentiment-neutral); }

.ax-bars__bar-rect.ax-bars__bar-rect--social-twitter { color: var(--color-social-twitter); }

.ax-bars__bar-rect.ax-bars__bar-rect--social-facebook { color: var(--color-social-facebook); }

.ax-bars__bar-rect.ax-bars__bar-rect--social-instagram { color: var(--color-social-instagram); }

.ax-bars__bar-rect.ax-bars__bar-rect--social-reddit { color: var(--color-social-reddit); }

.ax-bars__bar-rect.ax-bars__bar-rect--social-youtube { color: var(--color-social-youtube); }

.ax-bars__bar-rect.ax-bars__bar-rect--social-tumblr { color: var(--color-social-tumblr); }

.ax-bars__bar--clickable {
    cursor: pointer;
}

.ax-bars__bar--clickable .ax-bars__bar-rect .ax-bars__bar--solid {
            transition-property: color;
            transition-duration: var(--transition-time-base);
            transition-timing-function: var(--transition-function);
        }

.ax-bars__bar--clickable .ax-bars__bar-rect .ax-bars__bar--striped,
        .ax-bars__bar--clickable .ax-bars__bar-rect .ax-bars__bar--semistriped {
            transition-property: opacity;
            transition-duration: var(--transition-time-base);
            transition-timing-function: var(--transition-function);
        }

.ax-bars__bar--clickable .ax-bars__bar-rect .ax-bars__bar--striped:hover,
        .ax-bars__bar--clickable .ax-bars__bar-rect .ax-bars__bar--semistriped:hover {
            opacity: 0.25;
        }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--forbidden-planet:hover { color: var(--color-product-forbidden-planet--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--forbidden-planet:active { color: var(--color-product-forbidden-planet--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--tiny-clanger:hover { color: var(--color-product-tiny-clanger--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--tiny-clanger:active { color: var(--color-product-tiny-clanger--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--critical-mass:hover { color: var(--color-product-critical-mass--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--critical-mass:active { color: var(--color-product-critical-mass--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--fantastic-voyage:hover { color: var(--color-product-fantastic-voyage--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--fantastic-voyage:active { color: var(--color-product-fantastic-voyage--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--paradise-lost:hover { color: var(--color-product-paradise-lost--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--paradise-lost:active { color: var(--color-product-paradise-lost--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--serene-sea:hover { color: var(--color-product-serene-sea--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--serene-sea:active { color: var(--color-product-serene-sea--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--event-horizon:hover { color: var(--color-product-event-horizon--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--event-horizon:active { color: var(--color-product-event-horizon--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--electric-dreams:hover { color: var(--color-product-electric-dreams--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--electric-dreams:active { color: var(--color-product-electric-dreams--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--outer-limits:hover { color: var(--color-product-outer-limits--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--outer-limits:active { color: var(--color-product-outer-limits--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--giant-leap:hover { color: var(--color-product-giant-leap--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--giant-leap:active { color: var(--color-product-giant-leap--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--moon-lagoon:hover { color: var(--color-product-moon-lagoon--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--moon-lagoon:active { color: var(--color-product-moon-lagoon--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--space-invader:hover { color: var(--color-product-space-invader--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--space-invader:active { color: var(--color-product-space-invader--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--extraterrestrial:hover { color: var(--color-product-extraterrestrial--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--extraterrestrial:active { color: var(--color-product-extraterrestrial--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--terra-form:hover { color: var(--color-product-terra-form--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--terra-form:active { color: var(--color-product-terra-form--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--primeval-soup:hover { color: var(--color-product-primeval-soup--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--primeval-soup:active { color: var(--color-product-primeval-soup--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--future-shock:hover { color: var(--color-product-future-shock--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--future-shock:active { color: var(--color-product-future-shock--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--sun-maker:hover { color: var(--color-product-sun-maker--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--sun-maker:active { color: var(--color-product-sun-maker--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--new-horizon:hover { color: var(--color-product-new-horizon--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--new-horizon:active { color: var(--color-product-new-horizon--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--blast-off:hover { color: var(--color-product-blast-off--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--blast-off:active { color: var(--color-product-blast-off--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--crash-course:hover { color: var(--color-product-crash-course--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--crash-course:active { color: var(--color-product-crash-course--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--solar-rust:hover { color: var(--color-product-solar-rust--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--solar-rust:active { color: var(--color-product-solar-rust--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--ground-control:hover { color: var(--color-product-ground-control--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--ground-control:active { color: var(--color-product-ground-control--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--space-oddity:hover { color: var(--color-product-space-oddity--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--space-oddity:active { color: var(--color-product-space-oddity--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--rocky-planet:hover { color: var(--color-product-rocky-planet--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--rocky-planet:active { color: var(--color-product-rocky-planet--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--deep-thought:hover { color: var(--color-product-deep-thought--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--deep-thought:active { color: var(--color-product-deep-thought--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--luna-dust:hover { color: var(--color-product-luna-dust--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--luna-dust:active { color: var(--color-product-luna-dust--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--sentiment-positive:hover { color: var(--color-sentiment-positive--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--sentiment-positive:active { color: var(--color-sentiment-positive--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--sentiment-negative:hover { color: var(--color-sentiment-negative--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--sentiment-negative:active { color: var(--color-sentiment-negative--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--sentiment-neutral:hover { color: var(--color-sentiment-neutral--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--sentiment-neutral:active { color: var(--color-sentiment-neutral--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--social-twitter:hover { color: var(--color-social-twitter--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--social-twitter:active { color: var(--color-social-twitter--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--social-facebook:hover { color: var(--color-social-facebook--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--social-facebook:active { color: var(--color-social-facebook--active); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--social-instagram:hover { color: var(--color-social-instagram--hover); }

.ax-bars__bar--clickable .ax-bars__bar-rect.ax-bars__bar-rect--social-instagram:active { color: var(--color-social-instagram--active); }

.ax-bars--up .ax-bars__bar { flex-direction: column-reverse; }
.ax-bars--right .ax-bars__bar { flex-direction: row; }
.ax-bars--down .ax-bars__bar { flex-direction: column; }
.ax-bars--left .ax-bars__bar { flex-direction: row-reverse; }

.ax-bars--right .ax-bars__bar-label, .ax-bars--left .ax-bars__bar-label {
        position: absolute;
    }

.ax-bars--right .ax-bars__bar-label {
        left: 100%;
        margin-right: calc(var(--cmp-chart-label-width) * -1);
        padding-left: var(--cmp-chart-label-margin);
    }

.ax-bars--left .ax-bars__bar-label {
        right: 100%;
        margin-left: calc(var(--cmp-chart-label-width) * -1);
        padding-right: var(--cmp-chart-label-margin);
    }

.ax-bars--up .ax-bars__bar, .ax-bars--down .ax-bars__bar {
        flex: 1 1 0%;
    }

.ax-bars--up .ax-bars__bar-label {
        margin-top: calc(var(--cmp-chart-label-height) * -1);
        padding-bottom: var(--cmp-chart-label-margin);
    }

.ax-bars--down .ax-bars__bar-label {
        margin-bottom: calc(var(--cmp-chart-label-height) * -1);
        padding-top: var(--cmp-chart-label-margin);
    }