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

export const removePointerEvents = css`
  pointer-events: none;
`;

export const linkDisabledStyle = css`
  &,
  &:hover {
    cursor: not-allowed;
    color: ${palette.gray.base};
    font-weight: unset;
  }
`;

export const anchorOverrides = css`
  a:focus,
  a:hover,
  a:visited,
  a:active,
  a:link {
    text-decoration: none;
    cursor: pointer;
  }
`;

export const navContainerBaseStyle = css`
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  width: 100%;
  padding: 0 ${spacing[3]}px;
  box-sizing: border-box;
  font-size: ${typeScales.body1.fontSize}px;
  line-height: 15px;
`;

export const navContainerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background-color: ${palette.white};
  `,
  [Theme.Dark]: css`
    background-color: ${palette.black};
  `,
};

export const navSectionStyle = css`
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
`;