import { styled } from 'styleh-components'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { SelectDropDown, StyledSelect } from '@skava/ui/dist/components/molecules/SelectDropDown'

/* ${StyledSelect} = styling the text of the parent text */
const DarkSelectDropDownStyle = styled.withComponent(SelectDropDown)`
  width: 65px;
  height: 24px;
  background-color: var(--color-light-grey);
  ${StyledSelect} {
     padding: 0;
     justify-content: center;
     span {
      color: white;
    }
  }
`

const StyledMaterialIcon = styled.withComponent(MaterialIcon)`
  g {
    fill: #ffffff
  }
`

export { DarkSelectDropDownStyle, StyledMaterialIcon }