import { css, cx } from '@leafygreen-ui/emotion';
import { spacing } from '@leafygreen-ui/tokens';

export const baseStyles = css`
  display: flex;
  justify-content: space-between;
  width: 100%;

  > div:first-child {
    justify-content: flex-start;
  }
  > div:last-child {
    justify-content: flex-end;
  }
`;

export const getSectionStyles = ({ className }: { className?: string }) =>
  cx(
    css`
      flex: 1;
      display: flex;
      gap: ${spacing[100]}px;
      align-items: center;
      justify-content: center;
    `,
    className,
  );