import { styled } from 'styleh-components'

const BulletsPanel = styled.div`
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: rem(24);
`

const BulletIcon = styled.div`
  background: ${props => props.bulletColor};
  width: ${props => props.bulletSize + 'px'};
  height: ${props => props.bulletSize + 'px'};
  border-radius: 50%;
  margin: 0 rem(4);
  cursor: pointer;
  opacity: ${props => (props.shouldActive === true ? 1 : 0.5)};
`

export { BulletsPanel, BulletIcon }