// @flow
import { type ComponentType } from 'react';
import styled from 'styled-components';
import { getPaletteColor } from '../../../../mixins/branding/index';
import { type ContainerProps } from '../../../../mixins/container';

export type ContextMenuListContainerProps = {|
  ...ContainerProps,
  justify: 'left' | 'right',
  role: string,
|};

export const ContextMenuListContainer: ComponentType<ContextMenuListContainerProps> = styled.div`
  position: absolute;
  left: ${({ justify }) => (justify === 'left' ? '0' : undefined)};
  right: ${({ justify }) => (justify === 'right' ? '0' : undefined)};
  width: 210px;
  top: 100%;
  z-index: 2;

  display: flex;
  flex-direction: column;
  padding: 10px 0;

  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid ${getPaletteColor('greyscale-light')};
  border-radius: 8px;
  background: ${getPaletteColor('white')};
`;
