wagtail/client/scss/components/forms/_field-comment-control.scss

.w-field__comment-button {
  $root: &;

  @include transition(opacity 0.2s ease);
  position: absolute;
  color: $color-teal;
  background: none;
  border: 0;
  padding: 0;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-inline-start: theme('spacing.[2.5]');
  visibility: hidden;
  opacity: 0;

  .icon {
    width: $comment-button-size;
    height: $comment-button-size;
    color: inherit;
  }

  // For devices without hover support, always show when comments are enabled.
  @media (hover: none) {
    .tab-content--comments-enabled & {
      visibility: visible;
      opacity: 1;
    }
  }

  // Hide by default, reveal on hover of parent, for devices supporting hover interaction
  @media (hover: hover) {
    .tab-content--comments-enabled .w-field__input:hover > &,
    .tab-content--comments-enabled .w-field__input:focus-within > &,
    &:hover,
    &:focus,
    &.w-field__comment-button--focused {
      visibility: visible;
      opacity: 1;
    }
  }

  // Special positioning of comment icons to sit at the top right of these fields
  textarea ~ &,
  .w-field--checkbox_select_multiple &,
  .w-field--admin_tag_widget & {
    transform: translateY(0);
    top: 0.3125rem;
  }
}

.w-field__comment-button--add {
  .icon-comment-add,
  .icon-comment-add-reversed {
    display: none;
  }

  &:not(:hover) {
    .icon-comment-add {
      display: block;
    }
  }

  &:hover {
    cursor: pointer;

    .icon-comment-add-reversed {
      display: block;
    }
  }

  // Hide the "Add comment" button if it’s preceded by a "Reveal comment" button.
  .w-field__comment-button--reveal + & {
    display: none;
  }
}

.w-field__comment-button--reveal {
  display: none;

  .tab-content--comments-enabled & {
    display: block;
  }
}