import{jsx as r,jsxs as o}from"react/jsx-runtime";import{keyframes as e}from"styled-components";import{H2 as a}from"@redocly/theme/components/Typography/H2";import{Section as n,SamplesMiddlePanel as s}from"../panels.js";import{styled as d}from"../../../styled-components.js";const l=e`
  100% {
      transform: translateX(100%);
  }
`,t=d.div`
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-color-raised);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-base);
  width: ${({width:i})=>i||"100%"};

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0.2) 20%,
      rgba(255, 255, 255, 0.5) 60%,
      rgba(255, 255, 255, 0)
    );
    animation: ${l} 2s infinite;
    content: '';
  }
`;function b(){return r(n,{children:o(s,{children:[r(a,{children:r(t,{width:"40%"})}),r(t,{width:"80%"}),r(t,{width:"90%"}),r(t,{width:"83%"}),r(t,{width:"80%"})]})})}export{b as Skeleton,t as SkeletonBox};
