content: import React from 'react';
  
  import { useTheme } from '@turntwo/react-ui';
  
  const ButtonGroup = ({ children }) => {
    const theme = useTheme();
    return (
      <div className="button-group">
        {children}
        <style jsx>{`
          .button-group {
            display: flex;
            flex-wrap: wrap;
            flex-flow: column;
          }
  
          .button-group :global(.button:not(:last-child)) {
            margin-bottom: 8px;
          }
  
          @media (max-width: ${theme.breakpoints.m - 1}px) {
            .button-group :global(.button) {
              justify-content: flex-start;
            }
          }
  
          @media (min-width: ${theme.breakpoints.m}px) {
            .button-group {
              flex-flow: row;
              align-items: center;
            }
  
            .button-group :global(.button:not(:last-child)) {
              margin-right: 8px;
              margin-bottom: 0;
            }
          }
        `}</style>
      </div>
    );
  };
  
  export default ButtonGroup;
  