{"version":3,"sources":["loading/loading.scss","loading/_variables.scss"],"names":[],"mappings":"AAEA,iBAEE,wBAAA,CAAA,qBAAA,CACA,uBAAA,CAAA,oBAAA,CADA,0BAAA,CAAA,kBAAA,CAEA,gDCHc,CDAd,0BAAA,CAAA,2BAAA,CAAA,0BAAA,CAAA,mBAAA,CAEA,8BAAA,CAAA,sBCFc,CDKd,qDAGE,6BAAA,CAAA,qBAAA,CAGA,+BCVW,CDWX,eAAA,CAFA,cAAA,CAHA,iBAAA,CAEA,8BAGA,CAGF,0BACE,0FAAA,CAAA,kFAAA,CAEA,gCAKE,WAAA,CAFA,MAAA,CAFA,iBAAA,CACA,KAAA,CAEA,UACA,CAEA,uCAME,6BAAA,CACA,iBAAA,CAFA,WAAA,CAJA,aAAA,CAEA,UAAA,CACA,aAAA,CAFA,SAKA,CAKA,8CACE,SAAA,CACA,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CAFF,+CACE,aAAA,CACA,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CAFF,+CACE,YAAA,CACA,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CAFF,+CACE,aAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,WAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,aAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,YAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,aAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,+CACE,UAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,gDACE,aAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,gDACE,YAAA,CACA,gCAAA,CAAA,4BAAA,CAAA,wBAAA,CAFF,gDACE,aAAA,CACA,+BAAA,CAAA,2BAAA,CAAA,uBAAA,CAMR,2BAIE,uFAAA,CAAA,+EAAA,CAHA,8BAAA,CACA,mEAAA,CACA,kBAAA,CADA,yDAEA,CAGF,uBAIE,qDCpDiB,CDkDjB,gECjDqB,CDkDrB,gDCjDuB,CD+CvB,kCCjDiB,CDsDjB,6BACE,YAAA,CAIJ,2BACE,2BAAA,CAAA,4BAAA,CAAA,6BAAA,CAAA,yBAAA,CAAA,qBAAA,CAEA,kDACE,iCAAA","file":"index.css","sourcesContent":["@import \"./variables\";\n\n.#{$component-prefix}loading {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: $loading-color;\n\n  &__spinner,\n  &__circular {\n    position: relative;\n    box-sizing: border-box;\n    width: $loading-size;\n    max-width: 100%;\n    height: $loading-size;\n    max-height: 100%;\n  }\n\n  &__spinner {\n    animation: #{$component-prefix}-rotate $loading-animation-duration steps(12) infinite;\n\n    &__item {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n\n      &::before {\n        display: block;\n        width: 2px * $hd;\n        height: 25%;\n        margin: 0 auto;\n        content: ' ';\n        background-color: currentColor;\n        border-radius: 40%;\n      }\n\n      // Generate 12 item\n      @for $i from 1 through 12 {\n        &:nth-of-type(#{$i}) {\n          opacity: 1 - calc(0.75 / 12) * ($i - 1);\n          transform: rotate($i * 30deg);\n        }\n      }\n    }\n  }\n\n  &__circular {\n    border: $loading-circular-border-width solid transparent;\n    border-top-color: currentColor;\n    border-radius: 100%;\n    animation: #{$component-prefix}-rotate $loading-animation-duration linear infinite;\n  }\n\n  &__text {\n    margin-left: var(--padding-xs, $padding-xs);\n    font-size: $loading-text-font-size;\n    line-height: $loading-text-line-height;\n    color: $loading-text-color;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &--vertical {\n    flex-direction: column;\n\n    .#{$component-prefix}loading__text {\n      margin: var(--padding-xs, $padding-xs) 0 0;\n    }\n  }\n}\n","@import \"../styles/prefix\";\n@import \"../styles/variables\";\n\n$loading-color: var(--loading-color, var(--gray-5, $gray-5));\n$loading-size: var(--loading-size, 30px * $hd);\n$loading-animation-duration: var(--loading-animation-duration, 0.8s);\n$loading-circular-border-width: var(--loading-circular-border-width, 1px * $hd);\n$loading-text-color: var(--loading-text-color, var(--gray-6, $gray-6));\n$loading-text-font-size: var(--loading-text-font-size, var(--font-size-md, $font-size-md));\n$loading-text-line-height: var(--loading-text-line-height, 20px * $hd);\n"]}