"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Skeleton=exports.SkeletonBox=void 0;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importStar(require("styled-components")),theme_1=require("@redocly/theme"),panels_1=require("../panels"),shimmer=styled_components_1.keyframes`
  100% {
      transform: translateX(100%);
  }
`;function Skeleton(){return(0,jsx_runtime_1.jsx)(panels_1.Section,{children:(0,jsx_runtime_1.jsxs)(panels_1.SamplesMiddlePanel,{children:[(0,jsx_runtime_1.jsx)(theme_1.H2,{children:(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"40%"})}),(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"80%"}),(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"90%"}),(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"83%"}),(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"80%"})]})})}exports.SkeletonBox=styled_components_1.default.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:e})=>e||"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: ${shimmer} 2s infinite;
    content: '';
  }
`,exports.Skeleton=Skeleton;
//# sourceMappingURL=Skeleton.js.map