.vui-buttonbar{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  box-sizing:border-box;

  > *{
    flex: 0 1 auto;
    width: auto;
  }
  > *{
    &.vui-buttonbar{
      margin: 0;
    }
  }

  &[data-position="left"]{
    justify-content: flex-start;
  }
  &[data-position="center"]{
    justify-content: center;
  }
  &[data-position="right"]{
    justify-content: flex-end;
  }

  &[data-spacing="tight"]{
    > * + *{
      margin-left: 3px;
    }
  }
  &[data-spacing="normal"]{
    > * + *{
      margin-left: 8px;
    }
  }
  &[data-spacing="wide"]{
    > * + *{
      margin-left: 12px;
    }
  }
  &[data-spacing="xwide"]{
    > * + *{
      margin-left: 24px;
    }
  }

  //Alignment for nested ButtonBars, TODO find a better way to do this :/
  &[data-count="0"]{
    margin: 0;
  }
  &[data-count="2"]{
    > .vui-buttonbar{
      flex-basis:50%;
    }
  }
  &[data-count="3"]{
    > .vui-buttonbar{
      flex-basis:33.333%;
    }
  }
  &[data-count="4"]{
    > .vui-buttonbar{
      flex-basis:25%;
    }
  }
  &[data-count="5"]{
    > .vui-buttonbar{
      flex-basis:20%;
    }
  }
  &[data-count="6"]{
    > .vui-buttonbar{
      flex-basis:16.666%;
    }
  }
  &[data-count="7"]{
    > .vui-buttonbar{
      flex-basis:14,285%;
    }
  }
  &[data-count="8"]{
    > .vui-buttonbar{
      flex-basis:12.5%;
    }
  }
  &[data-count="9"]{
    > .vui-buttonbar{
      flex-basis:11.111%;
    }
  }
  &[data-count="10"]{
    > .vui-buttonbar{
      flex-basis:10%;
    }
  }
}