<template>
  <div
    class="w-text"
    :class="{ 'w-text-am': props.am }"
    :style="{ '--time': props.time || time }"
  >
    <slot></slot>
  </div>
</template>
<script setup>
const props = defineProps({
  am: {
    type: Boolean,
    default: false,
  },
  time: {
    type: String,
    default: "",
  },
});

const time = Math.random() * 10 + 5 + "s";
</script>
<style lang="scss" scoped>
@layer {
  .w-text {
    display: inline-block;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    --color-inner: var(--color, var(--c, var(--w-main)));
    --color-light-inner: var(--color-light, var(--c-l, currentColor));
    --direction-inner: var(--direction, var(--d, to top));

    background-image: linear-gradient(
      var(--direction-inner),
      currentColor 10%,
      var(--color-inner)
    );
    background-repeat: repeat;
    background-size: auto;
    background-position: 0 0;
    background-clip: text;
    -webkit-text-fill-color: #0000;

    &-am {
      animation: w-text-am infinite alternate-reverse
        cubic-bezier(0.12, 0.47, 0.78, 0.49);
      animation-duration: var(--time);

      background-image: linear-gradient(
          75deg,
          #0000 40%,
          var(--color-light-inner) calc(40% + 0.2em),
          var(--color-light-inner) calc(40% + 0.4em),
          #0000 calc(40% + 0.6em),
          #0000 50%,
          var(--color-light-inner) calc(50% + 0.2em),
          var(--color-light-inner) calc(50% + 0.7em),
          #0000 calc(50% + 0.9em)
        ),
        linear-gradient(
          75deg,
          #0000 80%,
          var(--color-light-inner) calc(80% + 0.2em),
          var(--color-light-inner) calc(80% + 0.4em),
          #0000 calc(80% + 0.6em)
        ),
        linear-gradient(
          var(--direction-inner),
          currentColor 10%,
          var(--color-inner)
        );
      background-repeat: repeat-x, repeat;
      background-size: 100% 100%, 100% 100%, auto;
      background-position: 0 0, 0 0, 0 0;
    }
  }

  @keyframes w-text-am {
    0% {
      background-position: 0 0, 0 0, 0 0;
    }

    100% {
      background-position: var(--move, 10em) 0, calc(var(--move, 10em) * -1.1) 0,
        0 0;
    }
  }
}
</style>