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

defineProps<Props>();
</script>

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

      <div class="character__meta">
        <div class="character__name">
          <slot name="name"></slot>
        </div>

        <div class="character__species">
          <slot name="species"></slot>
        </div>
      </div>
    </a>
  </li>
</template>

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

    display: flex;
    flex-flow: var(--character-item-flex-flow);
    justify-content: center;
    align-items: center;

    transition: var(--character-item-transition);

    position: relative;

    &:before,
    &:after {
      content: "";

      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      filter: var(--base-saturation);

      transition: var(--character-item-transition);

      z-index: -1;
    }

    &:hover {
      flex: 2 1 auto;

      &:before,
      &:after {
        filter: var(--hover-saturation);
      }
    }
  }

  &__link {
    flex: var(--character-item-link-flex);

    display: flex;
    flex-flow: var(--character-item-link-flex-flow);
    justify-content: var(--character-item-link-justify-content);
    align-items: center;

    filter: var(--base-saturation);

    transition: var(--character-item-transition);

    z-index: 1;
  }

  &__item:hover &__link {
    transform: scale(1.5);
    filter: var(--hover-saturation);
  }

  &__image {
    flex: var(--character-item-image-flex);

    max-width: var(--character-item-image-max-size);
    max-height: var(--character-item-image-max-size);

    transition: all 0.5s ease-in-out 0.25s;

    img {
      display: block;

      width: 100%;
      height: auto;

      margin: 0;
      border: var(--character-item-image-border);
      border-radius: 100%;
      padding: 0;
    }
  }

  &__meta {
    flex: var(--character-item-meta-flex);

    text-align: var(--character-item-meta-text-align);

    max-height: var(--character-item-meta-max-height);
    margin: var(--character-item-meta-margin);

    opacity: var(--character-item-meta-opacity);

    transition: all 0.5s ease-in-out 0.25s;
  }

  &__item:hover &__meta {
    max-height: 12vh;
    margin: var(--character-item-meta-margin-hover);
    opacity: 1;
  }

  &__name {
    font-size: var(--character-item-name-font-size);
  }

  &__species {
    font-size: var(--character-item-species-font-size);
  }
}
</style>
