import styled from 'styled-components';
import { BoxBlock } from "../../../../modules";
import { AlignCenter, colors } from "../../../../globalStyled";
export const AppDropdownWrapperDiv = styled(BoxBlock) `
  margin-top: 8px !important;
  position: absolute;
  background: ${colors.white};
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
`;
export const AppDropdownItemDiv = styled(BoxBlock) `
  ${AlignCenter}
  cursor: pointer;
  font-weight: normal;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #000000;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.2px;
  background: ${(props) => (props.isActive ? colors.tag11 : 'none')};

  &:hover {
    background: ${colors.tag11};
  }

  & > div {
    flex: 1 1 100%;

    font-weight: ${(props) => (props.isActive ? '700' : 'normal')};
  }
`;
