import { css } from '@leafygreen-ui/emotion';
import { Theme } from '@leafygreen-ui/lib';
import { palette } from '@leafygreen-ui/palette';
import { spacing } from '@leafygreen-ui/tokens';

export const projectButtonContainerStyle = css`
  display: flex;
  justify-content: space-between;
  padding: 0 24px;

  & > :is(button, a) {
    white-space: nowrap;
  }
`;

export const projectMenuContainerStyle = css`
  width: 305px;
  padding: ${spacing[4]}px 0;
`;

export const emptyStateStyle = css`
  cursor: default;
  pointer-events: none;
`;

export const menuSeparatorStyles = css`
  height: 1px;
  margin-top: ${spacing[2]}px;
  margin-bottom: ${spacing[4]}px;
`;

export const buttonHoverThemeStyle: Record<Theme, string> = {
  [Theme.Dark]: css`
    &:hover {
      border: 1px solid ${palette.gray.base};
      box-shadow: 0px 0px 0px 3px ${palette.gray.light1};
    }
  `,
  [Theme.Light]: css``,
};