<template>
  <view
    class="w-button"
    hover-class="w-button-hover"
    @click="emits('click')"
    :class="{ 'w-button-loading': props.loading ,'w-button-disabled': props.disabled }">
    <view></view>
    <view><slot></slot></view>
    <view></view>
  </view>
</template>

<script setup>
const emits = defineEmits('click');
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
.w-button {
  padding: var(--padding, 0.3em 0.7em);
  margin: var(--margin,0);
  border-radius: var(--border-radius, 0.2em);
  position: relative;
  overflow: hidden;
  font-size: var(--font-size, 1em);
  color: var(--color, var(--w-main-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;

  & > view {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    &:first-child {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: currentColor;
      transition: all 0.3s;
      opacity: var(--opacity, 0.1);
    }
  }

  &.w-button-hover {
    --opacity: 0.2;
  }
  &.w-button-disabled {
    --opacity: 0.1;
    pointer-events: none;
    filter: grayscale(100%);
  }
  &.w-button-loading {
    --opacity: 0.1;
    pointer-events: none;

    & > view:first-child {
      z-index: 2;
      opacity: 0.5;
      background-color: #000;
    }

    & > view:last-child {
      position: absolute;
      content: "";
      width: 1em;
      height: 1em;
      border-radius: 1em;
      border: 0.2em solid #fff;
      border-top-color: #0000;
      z-index: 3;
      animation: w-am-button-loading 1s infinite;
    }
  }
  @keyframes w-am-button-loading {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}
</style>