import { transparentize } from 'polished';

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

import { mq } from '../breakpoints';

export const projectNavHeight = 45;

export const projectNavContainerBaseStyle = css`
  height: ${projectNavHeight}px;

  z-index: 0;
`;

export const projectNavContainerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    box-shadow: 0 4px 4px 0 ${transparentize(0.9, palette.black)};
  `,
  [Theme.Dark]: css`
    box-shadow: 0 0 0 1px ${palette.gray.dark2};
  `,
};

export const projectNavFirstSectionStyle = css`
  ${mq({
    width: [`unset`, `100%`, `unset`],
  })};
`;

export const projectSelectWrapperstyle = css`
  display: flex;
  align-items: center;
  margin-left: 11px;
`;

export const menuIconButtonStyle = css`
  z-index: 1;
`;

export const iconButtonThemeStyles: Record<Theme, string> = {
  [Theme.Light]: css`
    color: ${palette.green.dark2};
    background-color: transparent;
  `,
  [Theme.Dark]: css`
    color: ${palette.green.base};
    background-color: transparent;
  `,
};

export const alertBadgeStyle = css`
  position: absolute;
  top: 3px;
  right: 4px;
  background-color: ${palette.red.base};
  width: 14px;
  height: 14px;
  border-radius: 200px;
  font-size: 8px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const tooltipStyles = css`
  text-align: center;
`;