.bk.bk-comments-overlay {
  @apply fixed top-0 left-0 w-full h-full pointer-events-none z-comments-overlay;
  .bk-comments-overlay-item {
    @apply absolute top-0 left-0  pointer-events-auto w-40 h-40 origin-top-left;
    &.bk-is-active {
      @apply z-comments-overlay-active;
    }
  }
  .bk-comments-overlay-item-button {
    @apply text-lg font-bold leading-none relative bg-mono-300 text-mono-600 hover:bg-mono-400 flex items-center justify-center z-20 origin-top-left;
    @apply w-full h-full;
    &.bk-has-unresolved-comments {
      @apply bg-yellow-normal text-yellow-dark hover:bg-yellow-dark hover:text-yellow-light;
    }
    svg {
      @apply fill-current w-20 h-20;
    }
    span {
      @apply mt-2;
    }
  }
  .bk-comments-overlay-comments {
    @apply bg-white shadow-xl  origin-top-left absolute top-40  z-10;
    @apply w-300;
    &.bk-is-right {
      @apply right-0;
    }
    &.bk-is-left {
      @apply left-0;
      .bk-comments-overlay-comments-header {
        @apply justify-between flex-row-reverse;
      }
    }
  }
  .bk-comments-overlay-comments-header {
    @apply h-40 pl-10 bg-mono-100 flex items-center uppercase text-xs font-semibold border-b border-b-mono-300 text-mono-600 pr-10;
    svg {
      @apply w-15 h-15 mr-5 fill-current;
    }
  }
  .bk-comments-overlay-form {
    @apply p-10;
    button {
      @apply w-full mt-10;
    }
  }
}

.bk.bk-comment {
  @apply font-sans text-base p-15 lg:p-20 border-b hover:bg-mono-50;
  h3 {
    @apply font-sans font-bold;
  }
  .bk-comment-date {
    @apply text-xs text-mono-500;
  }
  .bk-comment-body {
    @apply mt-5 break-words lg:mt-15;
  }
  &:hover {
    button {
      @apply opacity-100;
    }
  }

  button {
    @apply items-center text-lime-normal font-medium px-5 py-2 border border-lime-normal rounded flex opacity-0;
    svg {
      @apply w-15 h-15 fill-current mr-5;
    }
  }
}
