{"version":3,"file":"Spinner-B-aSVz3z.js","sources":["../../../app/javascript/shared/components/Spinner.vue"],"sourcesContent":["<script>\nexport default {\n  props: {\n    size: {\n      type: String,\n      default: 'small',\n    },\n    colorScheme: {\n      type: String,\n      default: '',\n    },\n  },\n  computed: {\n    colorSchemeClasses() {\n      if (this.colorScheme === 'primary') {\n        return 'before:!border-t-woot-500';\n      }\n\n      if (this.colorScheme === 'warning') {\n        return 'before:!border-t-yellow-500';\n      }\n\n      if (this.colorScheme === 'success') {\n        return 'before:!border-t-success-500';\n      }\n\n      return this.colorScheme;\n    },\n  },\n};\n</script>\n\n<template>\n  <span class=\"spinner\" :class=\"`${size} ${colorSchemeClasses}`\" />\n</template>\n\n<style scoped lang=\"scss\">\n@import 'widget/assets/scss/variables.scss';\n\n@mixin color-spinner() {\n  @keyframes spinner {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  &:before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: $space-medium;\n    height: $space-medium;\n    margin-top: -$space-one;\n    margin-left: -$space-one;\n    border-radius: 50%;\n    border: 2px solid rgba(255, 255, 255, 0.8);\n    border-top-color: rgba(255, 255, 255, 0.3);\n    animation: spinner 0.9s linear infinite;\n  }\n}\n\n.spinner {\n  @include color-spinner();\n  position: relative;\n  display: inline-block;\n  width: $space-medium;\n  height: $space-medium;\n  padding: $zero $space-medium;\n  vertical-align: middle;\n\n  &.message {\n    padding: $space-one;\n    top: 0;\n    left: 0;\n    margin: 0 auto;\n    margin-top: $space-slab;\n    background: $color-white;\n    border-radius: $space-large;\n\n    &:before {\n      margin-top: -$space-slab;\n      margin-left: -$space-slab;\n    }\n  }\n\n  &.small {\n    width: $space-normal;\n    height: $space-normal;\n\n    &:before {\n      width: $space-normal;\n      height: $space-normal;\n      margin-top: -$space-small;\n    }\n  }\n\n  &.tiny {\n    width: $space-one;\n    height: $space-one;\n    padding: 0 $space-smaller;\n\n    &:before {\n      width: $space-one;\n      height: $space-one;\n      margin-top: -$space-small + $space-micro;\n    }\n  }\n\n  &.dark::before {\n    border-color: rgba(0, 0, 0, 0.7);\n    border-top-color: rgba(0, 0, 0, 0.2);\n  }\n}\n</style>\n"],"names":["_sfc_main","_createElementBlock","_normalizeClass","$props","$options"],"mappings":"iFACA,MAAKA,EAAU,CACb,MAAO,CACL,KAAM,CACJ,KAAM,OACN,QAAS,OACV,EACD,YAAa,CACX,KAAM,OACN,QAAS,EACV,CACF,EACD,SAAU,CACR,oBAAqB,CACnB,OAAI,KAAK,cAAgB,UAChB,4BAGL,KAAK,cAAgB,UAChB,8BAGL,KAAK,cAAgB,UAChB,+BAGF,KAAK,WACb,CACF,CACH,qCAIEC,EAAiE,OAAA,CAA3D,MAjCRC,EAiCc,CAAA,UAAqB,GAAAC,EAAA,IAAI,IAAIC,EAAkB,kBAAA,EAAA,CAAA"}