<template>
  <div class="content-card" :class="{ 'content-card--hoverable': hoverable }">
    <slot />
  </div>
</template>

<script setup>
defineProps({
  hoverable: { type: Boolean, default: true },
})
</script>

<style lang="less" scoped>
.content-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  padding: @space-xl;
  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);

  &--hoverable:hover {
    box-shadow: @shadow-md;
    transform: translateY(-3px);
  }
}
</style>
