Styling for slot template is not applying in vue3

In my vueJs-3 project I am defining slot in App.vue and sending to child Modal.vue component.

The slot is defined like this in App.vue

<Modal theme="sale" @close="handleToggle">
      <template v-slot:links>
        <a href="#">Sign Up</a>
        <a href="#">More Info</a>
      </template>
      <h1>Hey Ninjas</h1>
      <p>There is a give away for you !!</p>
 </Modal>

In Modal.vue I am using the slot like this

   <div class="modal" :class="{ sale: theme === 'sale' }">
      <slot>Default value</slot>
      <div class="actions">
        <slot name="links"></slot>
      </div>
    </div>

The styling that I am applying In this section

   <div class="actions">
        <slot name="links"></slot>
      </div>

is not applying.

My styling in the Modal.vue file looks like this

<style scoped>
.actions  a {
  text-decoration: none;
  border: 1px solid white;
  margin: 5px;
  padding: 10px;
}
</style>

Can somebody help me why this is happening ?

Thanks in advance !!