<template>
  <section>
    <button><slot>Wish</slot></button>
  </section>
</template>

<style>
  html, body, #app, section{
    height: 100%;
    width: 100%;
  }
  
  body{
    background: linear-gradient(#000, #171940);
  }
  
  section{
    align-items: center;
    display: flex;
    justify-content: center;
  }
  
  button{
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border-color: #EAA010;
    border-style: solid;
    border-width: 2px 0;
    box-sizing: border-box;
    color: #EAA010;
    cursor: pointer;
    font-family: "haboro-contrast-condensed", sans-serif;
    font-weight: 800;
    font-size: 24px;
    font-style: normal;
    height: 48px;
    letter-spacing: 2px;
    padding: 0 12px 1px 12px;
    position: relative;
    text-transform: uppercase;
  }
  
  button::before{
    background: url("data:image/svg+xml,%3Csvg width='36' height='48' viewBox='0 0 36 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34 46H20V40H18C9.16344 40 2 32.8366 2 24C2 15.1634 9.16344 8 18 8H20V2H34H36V0H18V6C8.05887 6 0 14.0589 0 24C0 33.9411 8.05887 42 18 42V48H36V46H34Z' fill='%23EAA010'/%3E%3C/svg%3E");
    content: "";
    display: block;
    height: 48px;
    left: -36px;
    position: absolute;
    top: -2px;
    width: 36px;
  }
  
  button::after{
    background: url("data:image/svg+xml,%0A%3Csvg width='36' height='48' viewBox='0 0 36 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 46H16V40H18C26.8366 40 34 32.8366 34 24C34 15.1634 26.8366 8 18 8H16V2H2H0V0H18V6C27.9411 6 36 14.0589 36 24C36 33.9411 27.9411 42 18 42V48H0V46H2Z' fill='%23EAA010'/%3E%3C/svg%3E%0A");
    content: "";
    display: block;
    height: 48px;
    position: absolute;
    right: -36px;
    top: -2px;
    width: 36px;
  }
</style>