import { FONT_FAMILY_SANS, INPUT_ERROR_TEXT_STYLE, COLOR_INPUT_ERROR } from '../../../designTokens';

export const PRIMARY_DROPDOWN_SELECT_ACTIVE_COLOR = '#6D3856';
export const PRIMARY_DROPDOWN_SELECT_HOVER_BG = '#DDDDDD';
export const PRIMARY_DROPDOWN_SELECT_HOVER_COLOR = '#29474C';

export const PRIMARY_DROPDOWN_SELECT_TRIGGER_STYLE = {
  width: '100%',
  height: '42px',
  padding: '10px 40px 10px 12px',
  borderRadius: '8px',
  borderWidth: '1px',
  borderStyle: 'solid',
  borderColor: '#38656D',
  backgroundColor: '#FFFFFF',
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontSize: '16px',
  lineHeight: '24px',
  color: 'var(--color-main-800)',
  boxSizing: 'border-box',
  outline: 'none',
  cursor: 'pointer',
  textAlign: 'left',
};

export const PRIMARY_DROPDOWN_SELECT_MENU_STYLE = {
  position: 'absolute',
  top: 'calc(100% + 4px)',
  left: 0,
  zIndex: 80,
  width: '100%',
  maxHeight: '296px',
  borderRadius: '12px',
  border: '1px solid #38656D',
  padding: '8px',
  background: '#FFFFFF',
  boxSizing: 'border-box',
  overflowY: 'auto',
  scrollbarWidth: 'none',
  msOverflowStyle: 'none',
};

export const PRIMARY_DROPDOWN_SELECT_ITEM_STYLE = {
  width: '100%',
  minHeight: '40px',
  borderRadius: '8px',
  padding: '8px',
  border: 'none',
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontSize: '16px',
  lineHeight: '24px',
  textAlign: 'left',
  cursor: 'pointer',
  boxSizing: 'border-box',
  display: 'flex',
  alignItems: 'center',
};

export const PRIMARY_DROPDOWN_SELECT_HOVER_CSS = `
  .anima-primary-dropdown-select__menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  .anima-primary-dropdown-select__item:hover {
    background: ${PRIMARY_DROPDOWN_SELECT_HOVER_BG} !important;
    color: ${PRIMARY_DROPDOWN_SELECT_HOVER_COLOR} !important;
  }
`;
