import styled from 'styled-components';
import { Flexbox, Icon } from '../../index';
export var Item = styled(Flexbox).withConfig({
  displayName: "DistributionBarstyled__Item",
  componentId: "sc-14t8k6-0"
})(["isolation:isolate;position:relative;min-width:0;"]);
export var Bar = styled.div.withConfig({
  displayName: "DistributionBarstyled__Bar",
  componentId: "sc-14t8k6-1"
})(["position:absolute;top:0;left:0;height:100%;background-color:", ";z-index:-1;margin:0 ", "px;&::before,&::after{position:absolute;content:'';display:block;border-radius:100px 0 0 100px;background-color:", ";height:100%;width:", "px;top:0;left:-", "px;}&::after{border-radius:0 100px 100px 0;left:initial;right:-", "px;}"], function (p) {
  return p.theme.color.tableEmphasis;
}, function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.color.tableEmphasis;
}, function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.spacing.unit(4);
}, function (p) {
  return p.theme.spacing.unit(4);
});
export var StyledDot = styled(Icon.Dot8).withConfig({
  displayName: "DistributionBarstyled__StyledDot",
  componentId: "sc-14t8k6-2"
})(["margin:0 ", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});