import { styled } from 'styled-components';
import { Box } from '../../atoms/box/index.js';
import { DEFAULT_STICK } from './drop-down.js';
import { cssClass } from '../../utils/index.js';

/**
 * Props passed to DropDownMenu element.
 * Extends {@link BoxProps}
 *
 * @memberof DropDown
 */

/**
 * @component
 * @private
 */
export const DropDownMenu = styled(Box).attrs(props => ({
  className: cssClass([`DropDown-Stick-${props.stick || DEFAULT_STICK}`, 'DropDownMenu'], props.className)
})).withConfig({
  displayName: "drop-down-menu__DropDownMenu",
  componentId: "sc-1kjt9mj-0"
})(["background:", ";display:inline-block;position:absolute;z-index:40;flex-direction:column;box-shadow:", ";border-radius:", ";", ";&.", " .", "{left:100%;}&.", " .", "{right:100%;}"], ({
  theme
}) => theme.colors.container, ({
  theme
}) => theme.shadows.card, ({
  theme
}) => theme.space.sm, ({
  isVisible
}) => isVisible !== false ? '' : 'display: none;', cssClass('DropDown-Stick-left'), cssClass('DropDownMenu'), cssClass('DropDown-Stick-right'), cssClass('DropDownMenu'));
DropDownMenu.displayName = 'DropDownMenu';
export default DropDownMenu;