.author {
  @apply flex items-center divide-gray-3 divide-x text-sm text-gray-2;

  a.author__container {
    .author__name {
      @apply underline text-secondary font-bold;
    }
  }

  &__container {
    @apply flex items-center gap-2.5 first:[&>*]:flex-none;

    > :last-child {
      @apply flex flex-col [&>*]:grow;
    }
  }

  &__avatar {
    @apply w-full h-full object-cover;

    &-container {
      @apply rounded-full overflow-hidden inline-block w-6 h-6 align-top;

      &:focus-within {
        @apply ring-2 ring-primary;
      }
    }

    &-counter {
      @apply -ml-4 rounded-full overflow-hidden inline-grid w-6 h-6 bg-background place-items-center text-secondary text-xs font-semibold;
    }
  }

  &__container.is-compact &__avatar-container {
    @apply w-8 h-8;
  }

  &__container.is-compact &__name {
    @apply text-secondary font-semibold;
  }

  &__badge svg {
    @apply grid overflow-hidden place-items-center bg-primary rounded-full w-4 h-4 text-white fill-current;
  }

  &__metadata {
    @apply flex items-center gap-1 text-gray-2 text-sm;

    > svg {
      @apply text-gray fill-current flex-none;
    }
  }

  &__coauthors {
    @apply flex flex-wrap items-center gap-2;

    &[aria-hidden="false"] + [id$="trigger"] span:last-child,
    &[aria-hidden="true"] + [id$="trigger"] span:first-child {
      @apply first-letter:lowercase block;
    }

    &[aria-hidden="false"] + [id$="trigger"] span:first-child,
    &[aria-hidden="true"] + [id$="trigger"] span:last-child {
      @apply hidden;
    }
  }
}
