import styled from 'styled-components';
import css from '@styled-system/css';
import { ReactComponent as PlusCircle } from "../../assets/plus-circle.svg";
import { BoxBlock } from "../../modules";
import { AlignCenter, colors, JustifyCenter, AJCenter, BorderRadius } from "../../globalStyled";
import { VariantDropdownMenu } from './types';
export const DropdownMenuWrapDiv = styled(BoxBlock) `
  position: relative;
`;
const defaultWidth = `
  width: 36px;
  height: 36px;
`;
const defaultIWidth = `
  width: 4px;
  height: 4px;
`;
const smallWidth = `
  width: 26px;
  height: 24px;
`;
const smallIWidth = `
  width: 2px;
  height: 2px;
`;
export const DropdownMenuDotsDiv = styled(BoxBlock) `
  ${AlignCenter}
  ${JustifyCenter}
  cursor: pointer;
  ${BorderRadius.default}

  ${({ variant }) => (variant === VariantDropdownMenu.small ? smallWidth : defaultWidth)}

  ${({ active }) => active && `background-color: ${colors.grays.border}`}
`;
export const DropdownMenuButtonDiv = styled(BoxBlock) `
  ${AJCenter}
  cursor: pointer;
  ${BorderRadius.small}
  height: 24px;
  color: ${colors.blue};
  ${css({ px: 1 })}
  ${({ active }) => active && `background-color: ${colors.buttonSecondaryPressed}`};
`;
export const DropdownMenuDotI = styled('i') `
  border-radius: 100%;
  background-color: ${colors.black};

  ${({ variant }) => (variant === VariantDropdownMenu.small ? smallIWidth : defaultIWidth)}

  ${css({
    marginRight: 1,
})}

  &:last-of-type {
    ${css({
    marginRight: 0,
})}
  }
`;
export const PlusCircleIconSVG = styled(PlusCircle) `
  width: 16px;
  height: 16px;
  fill: ${colors.blue};

  ${css({ mr: 2 })}
`;
