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

export const bannerContainerBaseStyle = css`
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-grow: 1;
  height: 5px;
  align-items: flex-start;
  justify-content: center;
`;

export const bannerContainerThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background-color: ${palette.blue.light3};
  `,
  [Theme.Dark]: css`
    background-color: ${palette.blue.dark2};
  `,
};

export const bannerContainerDesktopBaseStyle = css`
  &::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    height: 10px;
    width: 100%;
    z-index: -1;
  }
`;

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

export const mobileContainer = css`
  ${bannerContainerBaseStyle};
  width: 30px;
  height: 30px;
  margin-left: 12px;
  border-radius: 7px;
  align-items: center;
`;

export const setTabRadius = (radius: number, darkMode: boolean) => css`
  border-radius: 0 0 ${radius}px ${radius}px;

  &:before,
  &:after {
    content: '';
    position: absolute;
    background-color: transparent;
    top: 5px;
    height: ${2 * radius}px;
    width: ${radius}px;
    box-shadow: 0 -${radius}px 0 0 ${darkMode ? palette.blue.dark2 : palette.blue.light3};
  }

  &:before {
    left: -${radius}px;
    border-top-right-radius: ${radius}px;
  }

  &:after {
    right: -${radius}px;
    border-top-left-radius: ${radius}px;
  }
`;

export const bannerTabBaseStyle = css`
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
`;

export const bannerTabThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background-color: ${palette.blue.light3};
  `,
  [Theme.Dark]: css`
    background-color: ${palette.blue.dark2};
  `,
};

export const iconThemeColor: Record<Theme, string> = {
  [Theme.Light]: css`
    color: ${palette.blue.base};
  `,
  [Theme.Dark]: css`
    color: ${palette.blue.light2};
  `,
};

export const bannerMargin = css`
  margin-bottom: 2px;
  margin-right: 2px;
`;

export const mobileMargin = css`
  margin-bottom: 4px;
  margin-top: 4px;
`;

export const bodyBaseStyle = css`
  font-size: 11px;
`;

export const bodyThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    color: ${palette.blue.dark2};
  `,
  [Theme.Dark]: css`
    color: ${palette.blue.light2};
  `,
};