<template>
  <div class="btn-wrap">
    <div class="center-y">
      <p title="Quay trở lại" class="class-default">
        <Icon name="fa6-solid:arrow-left" />
      </p>
      <button class="defaultClasses">
        <Icon name="fa6-regular:bookmark" />
      </button>
    </div>

    <div class="center-y">
      <button title="Copy link" class="class-default text-2xl">
        <Icon name="bi:link-45deg" />
      </button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  @media (min-width: 768px) {
    flex-direction: row;
  }
  .class-default {
    display: grid;
    place-items: center;
    border-radius: 9999px;
    border-width: 1px;
    width: 3rem;
    height: 3rem;
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    &:hover {
      color: #2563eb;
    }
  }
}
.center-y {
  display: flex;
  gap: 1rem;
  align-items: center;
}
</style>
