<template>
  <section class="fdCard">
    <div class="label flex">
      <label class="fill" v-text="label"/>
      <slot v-if="$slots.right" name="right"/>
    </div>
    <div class="content">
      <slot/>
    </div>
  </section>
</template>
<script>
export default {
  name: "fdCard",
  props: {
    label: String
  },
}
</script>
<style scoped lang="scss">
.fdCard {
  backdrop-filter: blur(8px);

  .label {
    display: block;
    color: white;
    background-image: url("../assets/card-label-icon.png"), url("../assets/card-bottom.png");
    background-repeat: no-repeat;
    height: 50px;
    font-weight: 500;
    font-size: 22px;
    padding-left: 54px;
    padding-top: 10px;
    background-position: left top, left bottom;
    background-size: 54px 42px, 100% 31px;
  }
  .content{
    padding: 0 18px;
  }
}
</style>
