import { styled } from 'styleh-components'
import { SelectText } from '../Option/styled'

/**
 * NOTE:
 * we can pass the color code for fill by using props
 * this is causing when we overwriting the css
 *   svg path {
 *     fill: var(--color-black);
 *   }
 */

export const StyledSelect = styled.div.attrs({
  className: 'dropdown-parent',
  'data-qa': 'qa-dropdown',
})`
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding: rem(8) rem(16);
  margin: 0;
  width: 100%;
  flex: 1;
  flex-direction: row;
`
export const StyledSelectText = styled.withComponent(SelectText)`
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
`