import styled from 'styled-components';

const css = styled.div;

export default css`
   position: relative;
   display: inline-block;

   .ds-dropdown-menu {
      background: white;
      margin-top: 5px;
      //position: absolute;
      min-width: 120px;
      //max-width: 300px;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
      text-align: left;
      //right: 0px;
      z-index: 10;

      .menu-item {
         padding: 8px 20px;
         white-space: nowrap;
         font-weight: 500;
         font-size: 13px;

         &:hover {
            cursor: pointer;
            color: white;
            background: ${(props) => props.theme.primary};
         }

         &.disabled {
            cursor: not-allowed;
            background: transparent;
            opacity: 0.5;
            color: inherit;
         }
      }
   }
`;
