{"version":3,"file":"InlineLoaderStyles.mjs","sources":["../../../packages/loaders/InlineLoaderStyles.tsx"],"sourcesContent":["import styled, { keyframes } from '../utils/styled-components-wrapper.js'\nimport { InlineLoaderColors } from './types.js'\n\nexport const translation = keyframes`\n  100% {\n    background-position: 0 0;\n  }\n`\n\nexport const InlineLoaderStyle = styled.span<{ $color?: InlineLoaderColors }>`\n  --loader-color: ${({ $color }) =>\n    $color ? `var(--lido-color-${$color})` : 'currentColor'};\n\n  width: 100%;\n  display: inline-block;\n  vertical-align: top;\n  border-radius: 1000px;\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  opacity: 0.05;\n  animation: ${translation} 2s infinite;\n  background-size: 300% 100%;\n  background-position: 100% 0;\n  background-image: linear-gradient(\n    90deg,\n    var(--loader-color) 0,\n    var(--loader-color) 33.33%,\n    transparent 44.44%,\n    transparent 55.55%,\n    var(--loader-color) 66.66%,\n    var(--loader-color) 100%\n  );\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: var(--loader-color);\n    opacity: 0.2;\n  }\n`\n"],"names":["translation","keyframes","InlineLoaderStyle","styled","span","_ref","$color"],"mappings":";;;AAGO,MAAMA,WAAW,GAAGC,SAAS,CAAA;AACpC;AACA;AACA;AACA,EAAC;AAEYC,MAAAA,iBAAiB,GAAGC,MAAM,CAACC,IAAqC,CAAA;AAC7E,kBAAA,EAAoBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAC3BC,MAAM,GAAG,CAAA,iBAAA,EAAoBA,MAAM,CAAA,CAAA,CAAG,GAAG,cAAc,CAAA;AAAA,CAAA,CAAA;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAA,EAAeN,WAAW,CAAA;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}