import { styled } from 'styleh-components'
import { Figure, FigureCaption, StyledImage } from '@skava/ui/dist/components/molecules/Figure'

const StyledFigure = styled.withComponent(Figure)`
  position: relative;
  background: var(--color-light-grey);

  ${StyledImage} {
    width: auto;
  }

  ${FigureCaption} {
    position: absolute;
    left: 0;
    bottom: rem(16);
    padding: rem(4) rem(8);
    color: var(--color-pure-white);
    font-size: rem(14);
    min-width: rem(94);
  }

  ${props => props && props.captionColor && styled.css`
    ${FigureCaption} {
      background: ${props.captionColor};
    }
  `}
`

export { StyledFigure }