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(SelectDropDown) `
  width: 65px;
  height: 24px;
  background-color: var(--color-light-grey);
  ${StyledSelect} {
    padding: 0;
    justify-content: center;
    span {
      color: white;
    }
  }
`

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

export { DarkSelectDropDownStyle, StyledMaterialIcon }