jobiqo-cl/lib/es/src/components/02-atoms/16-popover/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';
import { color } from '../../../../node_modules/@styled-system/color/dist/index.esm.js';
import { space } from '../../../../node_modules/@styled-system/space/dist/index.esm.js';
import '../../../../node_modules/styled-system/dist/index.esm.js';

const PopoverContent = styled.div `
  position: absolute;
  z-index: 10;
  min-width: ${props => props.theme.popover.minWidth};
  padding: ${props => props.theme.popover.p};
  background-color: ${props => props.theme.popover.background};
  box-shadow: ${props => props.theme.popover.boxShadow};
  border-radius: ${props => props.theme.popover.borderRadius};
  ${space}
  ${color}

  ${props => props.maxHeight
    ? `
  max-height: ${props.maxHeight};
  overflow-y:auto;
  `
    : null}

  ${props => props.position === 'right'
    ? `
    top: 0;
    left: 100%;
    margin-left: ${props.theme.popover.margin};
  `
    : ``}

  ${props => props.position === 'left'
    ? `
    top: 0;
    right: 100%;
    margin-right: ${props.theme.popover.margin};
  `
    : ``}

${props => props.position === 'top'
    ? `
    bottom: 100%;
    margin-bottom: ${props.theme.popover.margin};
    transform: translateX(-25%);
  `
    : ``}

${props => props.position === 'bottom'
    ? `
    top: 100%;
    margin-top: ${props.theme.popover.margin};
    transform: translateX(-25%);
    `
    : ``}
`;
const PopoverWrapper = styled.div `
    position: relative;
    display: block;
    box-sizing: border-box;

  ${props => props.position === 'right'
    ? `
    flex-flow: row-reverse nowrap;`
    : ``}

  ${props => props.position === 'left'
    ? `
    flex-flow: row nowrap;`
    : ``}

${props => props.position === 'top'
    ? `
    flex-flow: column-reverse nowrap;
    align-items:center;`
    : ``}

${props => props.position === 'bottom'
    ? `
    flex-flow: column nowrap;
    align-items:center;`
    : ``}
`;

export { PopoverContent, PopoverWrapper };