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.button`
  background: #000;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 rem(4);
  cursor: pointer;
  opacity: ${(props: { isActive: CssProps.isActive }) =>
    props.isActive === true ? 1 : 0.5};
`

export { BulletsPanel, BulletIcon }