@use 'vars';
@use 'tag';
@use 'mixins';
@import '_variables';

.author-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 5rem;
  margin: 0 auto;
  display: inherit;

  animation-duration: 4s;
  // animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.blog-info {
  max-width: $BIMinWidth;
  margin-left: 1rem;
  position: sticky;
  top: calc(var(--navbar-height) + 1rem);
  padding-bottom: 1rem;
  .author-info {
    @include mixins.card_item;
    width: 100%;
    height: max-content;
    padding: 2rem 0;
    border-radius: var(--card-radius);

    // @keyframes rotate {
    //   0% {
    //     transform: rotate(0deg);
    //   }

    //   100% {
    //     transform: rotate(360deg);
    //   }
    // }

    .author-name {
      text-align: center;
      font-weight: bold;
      margin: 1rem 0;
      font-size: 1.4rem;
    }

    .blog-overview {
      display: flex;
      justify-content: space-evenly;
      font-size: 1.1rem;
      font-weight: 400;
      text-align: center;

      .blog-overview-item {
        // .blog-overview-count {
        // }
        .blog-overview-name {
          margin-top: 0.3rem;
          font-size: 0.7rem;
        }
      }
    }
    .blog-external {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .blog-external-icon {
        width: 1.5rem;
        height: 1.5rem;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  @mixin categoryTag {
    @include mixins.card_item;
    @include tag.tag_wrapper;
    display: flex;
    margin-top: 1rem;
    padding: 1rem 0.4rem;
    .icon-container {
      margin: 0rem 0.6rem 0.6rem;
    }
  }

  .category-info {
    flex-direction: column;
    @include categoryTag;
  }

  .tag-info {
    @include categoryTag;
    display: block;
  }
}

@media (max-width: $MQNarrow) {
  .blog-info {
    display: none;
  }
}