<script setup>
import { nextStep, nextStepDelay } from "@/components/shop/POSDepartmentProcess.vue";
import { defineProps } from 'vue';
const props = defineProps(['label']);

const label = props.label || 'Næste';
import { Colors } from "@/ThemeConfig.vue";
import 'animate.css/animate.min.css';

</script>

<template>
  <button
      class="button slide-green-on-hover-left-to-right has-text-white"
      @click="nextStep" v-if="nextStepDelay === 0"
  >
    {{ label }}</button>
  <button class="button is-loading" v-else>Please wait... {{ nextStepDelay }}</button>
</template>

<style scoped>


.button.slide-green-on-hover-left-to-right {
  transition: all .3s;
  overflow: hidden;
  z-index: 1;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f0ad4e; /* yellow */
    z-index: -2;
  }
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #45a049; /* green */
    transition: all .3s;
    z-index: -1;
  }
  &:hover {
    &:before {
      width: 100%;
    }
  }
}
</style>