<template>
  <q-btn flat square unelevated padding="0" :ripple="false">
    <div class="space-button-content">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="38"
        height="15"
        fill="none"
        viewBox="0 0 38 15"
        style="align-self: end"
      >
        <path
          :fill="color.innerColor"
          fill-opacity=".9"
          :stroke="color.outerColor"
          stroke-width="2"
          d="M13.262 13.061 2.265 1H24.81l10.867 11.947-22.415.114Z"
        />
      </svg>
    </div>
  </q-btn>
</template>

<script>
export default {
  name: "SpaceWithBottomLine",
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          innerColor: "#8282BF",
          outerColor: "#4A4AFF",
          color: "blue",
        };
      },
    },

    color: {
      type: Object,
      default: () => {
        return {
          innerColor: "#8282BF",
          outerColor: "#4A4AFF",
          color: "blue",
        };
      },
    },
  },
  setup() {
    return {};
  },
};
</script>
<style scoped>
.space-button-content {
  display: grid;
  height: 50px;
}
.space-button-content > svg,
.space-button-content > div {
  grid-area: 1/-1;
}
svg * {
  transition: all 1s;
}
</style>
