import t, { keyframes as n } from "styled-components";
import { getStar as i, getSkeletonColors as o, getSkeletonDimensions as a, getSkeletonRadius as r } from "./utils.js";
const s = n`
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
`, k = t.span`
  ${(e) => i(e.variant)}
  ${(e) => o(
  e.variant,
  e.color ?? "skeleton01",
  "containerDefault"
)};
  ${(e) => a(e)};
  display: inline-block;
  line-height: 1;
  white-space: pre-wrap;
  animation: ${s} ease-in-out infinite
    ${(e) => e.duration ?? 1}s;

  ${(e) => r(e, e.theme)}
`;
export {
  k as SkeletonBase
};
