{"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,wHAAA,CAAA,oFAAA,CAAA,+EAAA,CAAA,6EAAA,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';\r\n\r\n.#{$component-prefix}skeleton {\r\n  height: $skeleton-height;\r\n  background: $skeleton-background-color;\r\n\r\n  &--circle {\r\n    width: $skeleton-circle-width;\r\n    height: $skeleton-circle-height;\r\n    border-radius: $skeleton-circle-border-radius;\r\n  }\r\n\r\n  &--pulse {\r\n    animation: #{$component-prefix}skeleton-pulse //\r\n    $skeleton-pulse-animation-duration //\r\n    $skeleton-pulse-animation-timing-function //\r\n    $skeleton-pulse-animation-delay infinite;\r\n  }\r\n\r\n  &--wave {\r\n    position: relative;\r\n    display: block;\r\n    overflow: hidden;\r\n\r\n    &::after {\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      left: 0;\r\n      content: \"\";\r\n      background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);\r\n      transform: translateX(-100%);\r\n      animation: #{$component-prefix}skeleton-wave //\r\n      $skeleton-wave-animation-duration //\r\n      $skeleton-wave-animation-timing-function //\r\n      $skeleton-wave-animation-delay infinite;\r\n    }\r\n  }\r\n}\r\n\r\n@keyframes #{$component-prefix}skeleton-pulse {\r\n  0% {\r\n    opacity: 1;\r\n  }\r\n  50% {\r\n    opacity: 0.4;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes #{$component-prefix}skeleton-wave {\r\n  0% {\r\n    transform: translateX(-100%);\r\n  }\r\n  50% {\r\n    /* +0.5s of delay between each loop */\r\n    transform: translateX(100%);\r\n  }\r\n  100% {\r\n    transform: translateX(100%);\r\n  }\r\n}\r\n","@import \"../styles/prefix\";\r\n@import \"../styles/variables\";\r\n\r\n$skeleton-height: var(--skeleton-height, 16px * $hd);\r\n$skeleton-background-color: var(--skeleton-background-color, var(--active-color, $active-color));\r\n$skeleton-circle-size: var(--skeleton-circle-size, 32px * $hd);\r\n$skeleton-circle-width: var(--skeleton-circle-width, $skeleton-circle-size);\r\n$skeleton-circle-height: var(--skeleton-circle-height, $skeleton-circle-size);\r\n$skeleton-circle-border-radius: var(--skeleton-circle-border-radius, var(--border-radius-max, $border-radius-max));\r\n$skeleton-pulse-animation-duration: var(--skeleton-pulse-animation-duration, 1.5s);\r\n$skeleton-pulse-animation-timing-function: var(--skeleton-pulse-animation-timing-function, ease-in-out);\r\n$skeleton-pulse-animation-delay: var(--skeleton-pulse-animation-delay, 0.5s);\r\n$skeleton-wave-animation-duration: var(--skeleton-wave-animation-duration, 1.6s);\r\n$skeleton-wave-animation-timing-function: var(--skeleton-wave-animation-timing-function, linear);\r\n$skeleton-wave-animation-delay: var(--skeleton-wave-animation-delay, 0.5s);\r\n"]}