<template>
  <figure class="attack">
    <div class="attack__illustration">
      <slot name="image"></slot>
    </div>

    <figcaption class="attack__text">
      <div class="attack__name">
        <slot name="name"></slot>
      </div>

      <div class="attack__description">
        <slot name="desc"></slot>
      </div>
    </figcaption>
  </figure>
</template>

<style lang="scss">
.attack {
  flex: var(--attack-item-flex);

  display: flex;
  flex-flow: var(--attack-item-flex-flow);
  align-items: center;

  margin: 0;
  padding: 0.375em 0;

  &:nth-child(even) {
    text-align: var(--attack-item-nth-child-even-text-align);
  }

  &:nth-child(even) &__illustration,
  &:nth-child(even) &__text {
    &:first-child {
      order: var(--attack-item-first-child-order);
    }
  }

  &__illustration {
    flex: var(--attack-item-illustration-flex);

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

    text-align: center;

    img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  &__text {
    flex: 1 1 auto;
    padding: var(--attack-item-text-padding);
  }

  &__name {
    font-weight: bold;
    margin: 0 0 1em 0;
  }
}
</style>
