article.report .report-container section.block {
  padding: 0 3.2rem 0 2.72rem; // no padding at the top -- it's provided by `block-actions`
  // 1.7 left for highlight margin
  border-left: 0.5rem solid transparent; // to highlight the block when hover

  .block-main {
    flex: 1 1 auto;
  }

  .block-actions {
    button {
      padding: 0.8rem;
      margin-right: 0.8rem;
      border: 1px solid $light-gray;
      border-radius: 50%;
      font-size: 1.6rem;
      line-height: 0;

      color: $light-gray;
      background-color: white;

      &:disabled {
        color: $light-gray;
      }

      &:hover,
      &:focus,
      &:active {
        opacity: 1;
      }

      &:hover,
      &:focus {
        background: $SuperLightGray;
      }

      &:active {
        background-color: $page-background;
        color: $brand-text--darker;
      }
    }
  }

  &:hover {
    border-left-color: $heading-bg; // in order to highlight the block

    .block-actions button {
      border: 1px solid $heading-bg;
      color: $heading-bg;

      &:hover {
        color: white;
        background-color: $heading-bg;
      }
    }
  }
}

article.report .report-container.report-read-only section.block {
  // Read-only reports don't have .add-block-prompt elements, so we increase
  // the margin between blocks.
  margin-top: 3rem; // overrides the previous margin
}
