import { styled } from 'styled-components';
import { Button } from '../button/index.js';
import { themeGet, cssClass } from '../../utils/index.js';

/**
 * @component
 * @private
 */
const TableCaption = styled.caption.withConfig({
  displayName: "table-caption__TableCaption",
  componentId: "sc-6edhnr-0"
})(["font-family:", ";padding:", " ", ";text-align:left;color:", ";font-size:", ";line-height:", ";position:absolute;left:0;right:0;top:-4px;transform:translateY(-100%);background:", ";border-radius:4px;box-sizing:border-box;vertical-align:middle;&:first-child{flex-grow:1;}& ", "{color:", ";border-color:", ";}"], themeGet('font'), themeGet('space', 'sm'), themeGet('space', 'lg'), themeGet('colors', 'white'), themeGet('fontSizes', 'default'), themeGet('lineHeights', 'default'), themeGet('colors', 'primary100'), Button, themeGet('colors', 'white'), themeGet('colors', 'white'));
TableCaption.defaultProps = {
  className: cssClass('TableCaption')
};
export default TableCaption;