<script>
    let {label="button", action
    } = $props()
</script>

<button class="hover-underline" onclick={() => action()}>
    <p>
    {label}
    </p>
</button>

<style>

p {
    margin:10px
}

button {
    color:var(--text);
    background-color: var(--button-color);
    border-color: var(--text);
    border-style:solid;

    font-size: large;
}

button:hover {
    cursor: pointer;
}

.hover-underline {
  position: relative;
}

.hover-underline {
  position: relative;
}

.hover-underline::after,
.hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--text);
  bottom: -4px;
  left: 0;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-out;
}

.hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(1);
}


</style>