import styled from 'styled-components';

type SelectMenuProps = {
  fixedPosition?: {
    top: number;
    right: number;
  };
  zIndex?: number;
  selectMenuWidth?: string;
};

export const SelectMenuWrapper = styled.div<SelectMenuProps>`
  position: ${({ fixedPosition }) => (fixedPosition ? 'fixed' : 'absolute')};
  z-index: ${({ zIndex }) => zIndex || 1};
  margin: 0;
  top: ${({ fixedPosition }) =>
    fixedPosition ? `${fixedPosition.top}px` : '48px'};
  right: ${({ fixedPosition }) =>
    fixedPosition ? `${fixedPosition.right}px` : 0};
  width: ${({ selectMenuWidth }) => selectMenuWidth || '140px'};
  background: ${({ theme }) => theme.colors.neutral[0]};
  border: 1px solid #c6c6ce;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
`;

export const SelectOption = styled.div<{ selected?: boolean }>`
  width: 100%;
  padding: 6px 0 6px 12px;
  font-weight: ${({ selected }) => (selected ? 600 : 400)};
  font-family: ${({ theme }) => theme.fonts.primary};
  font-size: 14px;
  line-height: 125%;
  cursor: pointer;
  user-select: none;
  display: flex;
  background: ${({ theme }) => theme.colors.neutral[0]};
  color: ${({ theme }) => theme.colors.neutral[800]};
  white-space: no-wrap;
  display: flex;
  align-items: center;

  &:hover {
    background: ${({ theme }) => theme.colors.neutral[50]};
  }
`;

export const IconWrapper = styled.span`
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  margin-right: 8px;
`;

export const LabelWrapper = styled.span`
  white-space: no-wrap;
`;

export const ChipWrapper = styled.span`
  margin-left: 8px;
  padding: 4px 8px;
  background: #f9f9f9;
  border: 1px solid #e2e2e5;
  border-radius: 3px;
  width: min-content;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
`;