knowyt/client/src/components/QuoteCardActionButton.vue

<template>
  <button class="quote-card-action-button__button">
    <Icon :name="icon" />
  </button>
</template>

<script setup lang="ts">
defineProps<{
  icon: string,
}>()
</script>

<style lang="scss">
@import '~/assets/css/components';

.quote-card-action-button {
  &__button {
    margin: 0 4px;
    padding: 12px;
    width: 48px;
    height: 48px;
    border: $quote-button-border;
    border-radius: 48px;
    background-color: $quote-button-background-color;
    color: $quote-button-text-color;
    font-family: $font-secondary;
    font-size: 24px;
    cursor: pointer;

    &:hover {
      border: $quote-button-hover-border;
      background-color: $quote-button-hover-background-color;
      color: $quote-button-hover-text-color;
    }
  }
}
</style>