Is it possible to write if conditions in SCSS with v-bind in Vue 3?

<script setup lang="ts"
  interface Props {
    hoverEnabled: boolean;
  }

  const { hoverEnabled = false } = defineProps<Props>();

</script>

  <div class="layout-block">
    <slot />
  </div>

<style lang="scss" scoped>
  .layout-block {
    background-color: red;
    transition: background-color 0.2s ease-in-out;

    //@if v-bind(hoverEnabled) == "true" - as i know v-bind returns string so tried this too
    @if v-bind(hoverEnabled) {
      &:hover {
        background-color: blue;
      }
    }
  }
</style>

I know i can do this with class, but I'm curios if this is possible and how it's done