{"version":3,"file":"SquareCheck-Dqmn-H1d.js","sources":["../../../app/javascript/src/components/Theme/SquareCheck.vue"],"sourcesContent":["<template>\n  <div\n    class=\"theme-square-check\"\n    :class=\"{\n      'theme-square-check_empty': !checked,\n      'theme-square-check_gray': gray || disabled,\n      'theme-square-check_disabled': disabled\n    }\"\n    @click=\"click\"\n  >\n    <i class=\"icon icon-check\"/>\n  </div>\n</template>\n\n<script setup>\nconst props = defineProps({\n  checked: { type: Boolean, default: false },\n  gray: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false }\n});\nconst emit = defineEmits(['click']);\n\nfunction click() {\n  if (props.disabled) return;\n  emit('click');\n}\n</script>\n\n<style lang=\"scss\" scoped>\n$size: 16px;\n\n.theme-square-check {\n  border: 1px solid $brand-tertiary;\n  border-radius: 2px;\n  color: $white;\n  background-color: $brand-tertiary;\n  cursor: pointer;\n\n  &, .icon-check {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $size;\n    height: $size;\n  }\n\n\n  &_empty {\n    background-color: $white;\n\n    .icon {\n      visibility: hidden;\n    }\n  }\n\n  &_gray,\n  &_disabled {\n    background-color: $gray-lighter;\n    color: $gray;\n    border-color: $gray-lighter;\n  }\n\n  &_disabled {\n    pointer-events: none;\n  }\n\n  .icon {\n    text-align: center;\n\n    &:before {\n      transform: scale(.8);\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","click"],"mappings":"wYAeA,MAAMA,EAAQC,EAKRC,EAAOC,EAEb,SAASC,GAAQ,CACXJ,EAAM,UACVE,EAAK,OAAO,CACd"}