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

/**
 * @component
 * @private
 */
const TableCaption = styled.caption`
  font-family: ${themeGet('font')};
  padding: ${themeGet('space', 'sm')} ${themeGet('space', 'lg')};
  text-align: left;
  color: ${themeGet('colors', 'white')};
  font-size: ${themeGet('fontSizes', 'default')};
  line-height: ${themeGet('lineHeights', 'default')};
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  transform: translateY(-100%);
  background: ${themeGet('colors', 'primary100')};
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align: middle;

  &:first-child {
    flex-grow: 1;
  }

  & ${Button} {
    color: ${themeGet('colors', 'white')};
    border-color: ${themeGet('colors', 'white')};
  }
`;
TableCaption.defaultProps = {
  className: cssClass('TableCaption')
};
export default TableCaption;