{"version":3,"sources":["skeleton/skeleton.scss","skeleton/_variables.scss"],"names":[],"mappings":"AAEA,kBAEE,qFAAA,CADA,kCACA,CAEA,0BAGE,iFCD4B,CDA5B,qECDqB,CDArB,mECC4B,CDI9B,yBACE,qMAAA,CAAA,6LAAA,CAMF,wBAEE,aAAA,CACA,eAAA,CAFA,iBAEA,CAEA,8BASE,4LAAA,CAAA,oLAAA,CAFA,oHAAA,CAAA,gFAAA,CAAA,2EAAA,CAAA,yEAAA,CAHA,QAAA,CAEA,UAAA,CADA,MAAA,CAJA,iBAAA,CAEA,OAAA,CADA,KAAA,CAMA,mCAAA,CAAA,+BAAA,CAAA,2BACA,CAQN,0CACE,GACE,SAAA,CAEF,IACE,UAAA,CAEF,GACE,SAAA,CAAA,CARJ,kCACE,GACE,SAAA,CAEF,IACE,UAAA,CAEF,GACE,SAAA,CAAA,CAIJ,yCACE,GACE,mCAAA,CAAA,2BAAA,CAEF,IAEE,kCAAA,CAAA,0BAAA,CAEF,GACE,kCAAA,CAAA,0BAAA,CAAA,CATJ,iCACE,GACE,mCAAA,CAAA,2BAAA,CAEF,IAEE,kCAAA,CAAA,0BAAA,CAEF,GACE,kCAAA,CAAA,0BAAA,CAAA","file":"index.css","sourcesContent":["@import './variables';\n\n.#{$component-prefix}skeleton {\n  height: $skeleton-height;\n  background: $skeleton-background-color;\n\n  &--circle {\n    width: $skeleton-circle-width;\n    height: $skeleton-circle-height;\n    border-radius: $skeleton-circle-border-radius;\n  }\n\n  &--pulse {\n    animation: #{$component-prefix}skeleton-pulse //\n    $skeleton-pulse-animation-duration //\n    $skeleton-pulse-animation-timing-function //\n    $skeleton-pulse-animation-delay infinite;\n  }\n\n  &--wave {\n    position: relative;\n    display: block;\n    overflow: hidden;\n\n    &::after {\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      content: \"\";\n      background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);\n      transform: translateX(-100%);\n      animation: #{$component-prefix}skeleton-wave //\n      $skeleton-wave-animation-duration //\n      $skeleton-wave-animation-timing-function //\n      $skeleton-wave-animation-delay infinite;\n    }\n  }\n}\n\n@keyframes #{$component-prefix}skeleton-pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes #{$component-prefix}skeleton-wave {\n  0% {\n    transform: translateX(-100%);\n  }\n  50% {\n    /* +0.5s of delay between each loop */\n    transform: translateX(100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n","@import \"../styles/prefix\";\n@import \"../styles/variables\";\n\n$skeleton-height: var(--skeleton-height, 16px * $hd);\n$skeleton-background-color: var(--skeleton-background-color, var(--active-color, $active-color));\n$skeleton-circle-size: var(--skeleton-circle-size, 32px * $hd);\n$skeleton-circle-width: var(--skeleton-circle-width, $skeleton-circle-size);\n$skeleton-circle-height: var(--skeleton-circle-height, $skeleton-circle-size);\n$skeleton-circle-border-radius: var(--skeleton-circle-border-radius, var(--border-radius-max, $border-radius-max));\n$skeleton-pulse-animation-duration: var(--skeleton-pulse-animation-duration, 1.5s);\n$skeleton-pulse-animation-timing-function: var(--skeleton-pulse-animation-timing-function, ease-in-out);\n$skeleton-pulse-animation-delay: var(--skeleton-pulse-animation-delay, 0.5s);\n$skeleton-wave-animation-duration: var(--skeleton-wave-animation-duration, 1.6s);\n$skeleton-wave-animation-timing-function: var(--skeleton-wave-animation-timing-function, linear);\n$skeleton-wave-animation-delay: var(--skeleton-wave-animation-delay, 0.5s);\n"]}