import styled from 'styled-components'

import {
  rem
} from '../../style/function.style'

export const SelectContainer = styled.div`

`

export const SelectOptionsItem = styled.div<{
  selected: boolean;
}>`
  width: ${rem(622)};
  box-sizing: border-box;
  padding: ${rem(16)} ${rem(30)};
  border-radius: ${rem(44)};
  background-color: ${props => props.selected ? '#14C4BC' : '#F5F5F5'};
  font-size: ${rem(26)};
  line-height: ${rem(38)};
  color: ${props => props.selected ? '#ffffff' : '#2E2E2E'};
  margin-bottom: ${rem(16)};
  &:last-child {
    margin-bottom: 0;
  }
`