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

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

export const orgSelectWrapperStyle = css`
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  ${mq({
    height: ['30px', '36px', '36px'],
  })}
`;

export const orgSettingsButtonBaseStyle = css`
  color: ${palette.gray.base};
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 5px 5px 0;
  outline: none;
  transition: all ${transitionDuration.default}ms ease-in-out;
  width: 28px;
  height: 100%;

  &:hover {
    background-color: ${palette.gray.light2};
    border-color: ${palette.gray.light2};
    box-shadow: unset;

    svg {
      color: ${palette.gray.dark2};
    }
  }

  svg {
    transition: color ${transitionDuration.default}ms ease-in-out;
  }

  > *:last-child {
    ${mq({
      padding: ['0 6px', ' 0 8px'],
    })}
  }
`;

export const orgSettingsButtonThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    background-color: ${palette.white};
    border: 1px solid ${palette.gray.light2};
    border-left: 0;

    &:hover,
    &:focus-visible {
      background-color: ${palette.gray.light2};

      svg {
        color: ${palette.black};
      }
    }
  `,
  [Theme.Dark]: css`
    background-color: ${palette.black};
    border: 1px solid ${palette.gray.dark2};
    border-left: 0;

    &:hover,
    &:focus-visible {
      background-color: ${palette.gray.dark1};
      border-color: ${palette.gray.dark1};

      svg {
        color: ${palette.gray.light3};
      }
    }
  `,
};

// Menu items
export const orgMenuContainerStyle = css`
  width: 280px;
  padding: 24px 0 8px;
`;

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

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

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

export const linkThemeStyle: Record<Theme, string> = {
  [Theme.Light]: css`
    &,
    &:visited {
      color: ${palette.blue.light1};
      text-decoration: none;
    }
  `,
  [Theme.Dark]: css`
    &,
    &:visited {
      color: ${palette.blue.base};
      text-decoration: none;
    }
  `,
};