import styled from '@emotion/styled';
import { clr } from '@os-design/theming';

const FigureCaption = styled.figcaption`
  font-size: ${(p) => p.theme.sizes.small}em;
  padding: 0.4em 0.8em;

  background-color: ${(p) => clr(p.theme.editorFigureCaptionColorBg)};
  color: ${(p) => clr(p.theme.editorFigureCaptionColorText)};

  & > div {
    text-align: center !important;
    margin: 0 !important;
  }
`;

FigureCaption.displayName = 'FigureCaption';

export default FigureCaption;