import { rgba } from 'polished';
import { styled } from 'styled-components';
import { space, variant } from 'styled-system';
import { Box } from '../../atoms/box/index.js';
import { cssClass, themeGet } from '../../utils/index.js';
import DropDownMenu from './drop-down-menu.js';
const variantsShared = (theme, color) => ({
  color,
  [`& .${cssClass('DropDownItemAction')}`]: {
    color
  },
  '&:hover': {
    bg: rgba(theme.colors[color], 0.03)
  },
  [`& .${cssClass('Icon')} svg`]: {
    stroke: color
  }
});
const colorVariants = variant({
  prop: 'colorVariant',
  variants: {
    primary: theme => variantsShared(theme, 'primary100'),
    danger: theme => variantsShared(theme, 'error'),
    success: theme => variantsShared(theme, 'success'),
    info: theme => variantsShared(theme, 'info'),
    secondary: theme => variantsShared(theme, 'accent'),
    light: theme => variantsShared(theme, 'grey80'),
    default: theme => variantsShared(theme, 'text')
  }
});

/**
 * Props passed to DropDownItem
 * Extends {@link BoxProps}
 *
 * @memberof DropDown
 * @extends BoxProps
 */

/**
 * @component
 * @private
 */
export const DropDownItem = styled(Box).withConfig({
  displayName: "drop-down-item__DropDownItem",
  componentId: "sc-z70z88-0"
})(["position:relative;z-index:10000;border:none;color:", ";font-family:", ";border:solid transparent;border-width:0 ", ";", ";text-decoration:none;display:flex;flex-direction:row;align-items:center;white-space:nowrap;text-align:left;&:hover{background:", ";}& .", "{padding-right:", ";stroke:", ";flex-grow:0;flex-shrink:0;}& > ", "{position:absolute;top:0;display:none;}&:hover > ", "{display:flex;}& a{color:", ";text-decoration:none;}padding:", " ", ";", ";", ";"], themeGet('colors', 'text'), themeGet('font'), themeGet('space', 'sm'), ({
  onClick
}) => onClick ? 'cursor: pointer;' : '', ({
  theme
}) => rgba(theme.colors.text, 0.03), cssClass('Icon'), themeGet('space', 'default'), themeGet('colors', 'grey40'), DropDownMenu, DropDownMenu, themeGet('colors', 'grey80'), themeGet('space', 'lg'), themeGet('space', 'xxl'), space, colorVariants);
export default DropDownItem;