<script setup lang="ts">
interface Props {
  href: string;
}

defineProps<Props>();
</script>

<template>
  <li class="character__item">
    <a class="character__link" :href="href">
      <span class="character__image">
        <slot name="image"></slot>
      </span>

      <span class="character__name">
        <slot name="name"></slot>
      </span>
    </a>
  </li>
</template>

<style lang="scss">
.character {
  &__item {
    flex: 1 1 auto;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    // transform: skew(25deg);
    transition: all 0.2s ease-in-out;

    position: relative;

    &:before {
      position: absolute;
      content: "";
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    &:hover {
      flex: 2 1 auto;
    }
  }

  &__item:hover &__link {
    transform: scale(1.5);
    filter: saturate(100%);
  }

  &__link {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    // transform: skew(-25deg);
    filter: saturate(0%);
  }

  &__image {
    flex: 0 0 auto;

    img {
      display: block;

      width: 30vw;
      height: 30vw;
      max-width: 15vh;
      max-height: 15vh;

      margin: 0;
      border: 0.25rem solid #fff;
      border-radius: 100%;
      padding: 0;

      @media (min-width: 80em) {
        width: 15vw;
        height: 15vw;
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

  &__name {
    flex: 0 0 auto;

    font-size: 1.75rem;

    margin: 1.75rem 0 0 0;

    @media (min-width: 80em) {
      font-size: 2.5vw;
      margin: 4vh 0 0 0;
    }
  }
}
</style>
