import styled, { keyframes } from 'styled-components';
import { getStar, getSkeletonColors, getSkeletonDimensions, getSkeletonRadius } from './utils.js';

const animation = keyframes `
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
`;
const SkeletonBase = styled.span `
  ${(props) => getStar(props.variant)}
  ${(props) => {
    var _a;
    return getSkeletonColors(props.variant, (_a = props.color) !== null && _a !== void 0 ? _a : 'skeleton01', 'containerDefault');
}};
  ${(props) => getSkeletonDimensions(props)};
  display: inline-block;
  line-height: 1;
  white-space: pre-wrap;
  animation: ${animation} ease-in-out infinite
    ${(props) => { var _a; return (_a = props.duration) !== null && _a !== void 0 ? _a : 1; }}s;

  ${(props) => getSkeletonRadius(props, props.theme)}
`;

export { SkeletonBase };
