import { styled } from 'styleh-components'
import { CssProps } from '../typings'

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

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

export { BulletsPanel, BulletIcon }