src/components/Bar/Bar.less
@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-Bar {
	&-has-stroke {
		stroke: @color-white;
		stroke-width: 2;
	}

	&-color-chart-neutral {
		fill: @color-chart-neutral;
	}

	&-color-chart-bad-darkest {
		fill: @color-chart-bad-darkest;
	}

	&-color-chart-bad-dark {
		fill: @color-chart-bad-dark;
	}

	&-color-chart-bad-light {
		fill: @color-chart-bad-light;
	}

	&-color-chart-bad-lightest {
		fill: @color-chart-bad-lightest;
	}

	&-color-chart-bad {
		fill: @color-chart-bad;
	}

	&-color-chart-good-darkest {
		fill: @color-chart-good-darkest;
	}

	&-color-chart-good-dark {
		fill: @color-chart-good-dark;
	}

	&-color-chart-good-light {
		fill: @color-chart-good-light;
	}

	&-color-chart-good-lightest {
		fill: @color-chart-good-lightest;
	}

	&-color-chart-good {
		fill: @color-chart-good;
	}

	&-color-chart-6-darkest {
		fill: @color-chart-6-darkest;
	}

	&-color-chart-6-dark {
		fill: @color-chart-6-dark;
	}

	&-color-chart-6-light {
		fill: @color-chart-6-light;
	}

	&-color-chart-6-lightest {
		fill: @color-chart-6-lightest;
	}

	&-color-chart-6 {
		fill: @color-chart-6;
	}

	&-color-chart-5-darkest {
		fill: @color-chart-5-darkest;
	}

	&-color-chart-5-dark {
		fill: @color-chart-5-dark;
	}

	&-color-chart-5-light {
		fill: @color-chart-5-light;
	}

	&-color-chart-5-lightest {
		fill: @color-chart-5-lightest;
	}

	&-color-chart-5 {
		fill: @color-chart-5;
	}

	&-color-chart-4-darkest {
		fill: @color-chart-4-darkest;
	}

	&-color-chart-4-dark {
		fill: @color-chart-4-dark;
	}

	&-color-chart-4-light {
		fill: @color-chart-4-light;
	}

	&-color-chart-4-lightest {
		fill: @color-chart-4-lightest;
	}

	&-color-chart-4 {
		fill: @color-chart-4;
	}

	&-color-chart-3-darkest {
		fill: @color-chart-3-darkest;
	}

	&-color-chart-3-dark {
		fill: @color-chart-3-dark;
	}

	&-color-chart-3-light {
		fill: @color-chart-3-light;
	}

	&-color-chart-3-lightest {
		fill: @color-chart-3-lightest;
	}

	&-color-chart-3 {
		fill: @color-chart-3;
	}

	&-color-chart-2-darkest {
		fill: @color-chart-2-darkest;
	}

	&-color-chart-2-dark {
		fill: @color-chart-2-dark;
	}

	&-color-chart-2-light {
		fill: @color-chart-2-light;
	}

	&-color-chart-2-lightest {
		fill: @color-chart-2-lightest;
	}

	&-color-chart-2 {
		fill: @color-chart-2;
	}

	&-color-chart-1-darkest {
		fill: @color-chart-1-darkest;
	}

	&-color-chart-1-dark {
		fill: @color-chart-1-dark;
	}

	&-color-chart-1-light {
		fill: @color-chart-1-light;
	}

	&-color-chart-1-lightest {
		fill: @color-chart-1-lightest;
	}

	&-color-chart-1 {
		fill: @color-chart-1;
	}

	&-color-chart-0-darkest {
		fill: @color-chart-0-darkest;
	}

	&-color-chart-0-dark {
		fill: @color-chart-0-dark;
	}

	&-color-chart-0-light {
		fill: @color-chart-0-light;
	}

	&-color-chart-0-lightest {
		fill: @color-chart-0-lightest;
	}

	&-color-chart-0 {
		fill: @color-chart-0;
	}
}

