import { position, positions } from '@gympass/yoga-system';

const Frame = styled.div`
  border: 1px solid #ccc;

  width: 100px;
  height: 100px;

  ${position}
`;

const Dot = styled.div`
  width: 8px;
  height: 8px;
  border-radius: 50%;

  background-color: tomato;

  ${positions}
`;

render(() => {
  return (
    <Frame position="relative">
      <Dot position="absolute" top="small" left="small" zIndex={1}/>
    </Frame>
  );
});
const Frame = styled.div`
  border: 1px solid #ccc;

  width: 100px;
  height: 100px;

  ${position}
`;

const Dot = styled.div`
  width: 8px;
  height: 8px;
  border-radius: 50%;

  background-color: tomato;

  ${positions}
`;

render(() => {
  return (
    <Frame position="relative">
      <Dot position="absolute" top="small" left="small" zIndex={1}/>
    </Frame>
  );
});