<style>
:global([draggable]) {
-webkit-touch-callout:none;
-ms-touch-action:none; touch-action:none;
-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
.Note {
display:block; position:absolute;
padding:40px 0px 0px 0px;
border:solid 1px lightgray; background-color:lightyellow;
text-align:center; color:black;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}
.Note-Titlebar {
display:block; position:absolute;
left:0px; top:0px; width:100%; height:20px; background-color:palegoldenrod;
cursor:grab;
}
.Note-ResizeHandle {
display:block; position:absolute;
right:0px; bottom:0px; width:32px; height:32px;
background-color:transparent;
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAiklEQVRYR+WUwQ3AIAwDm3UzUNZtxQ8hhBpIbGhZIKezsVzkJ4z7ZnaXu6oq/wSorVMMwAHqzNvOQQzQAUY/DWIADjBSXmDSd4AO4FnXb3TAozxlB+gAnsxTDMABVpSH7AAdYEX5mR2IVD5lgA4QmfmUAThApvJXO0AHyFS+ZweQyrsG6ADIzNtbD4OSoCHdTWtaAAAAAElFTkSuQmCC");
cursor:nwse-resize;
}
</style>
<script context="module">
import DragDropTouch from 'svelte-drag-drop-touch'
import { asDraggable } from 'svelte-drag-and-drop-actions'
</script>