article.report {
  .add-block-prompt {
    margin: 0 2rem;

    &:hover,
    &.active,
    &:focus-within {
      & > .actions {
        & > button,
        & > .dropdown > button {
          // Overridden by .actions>button:hover later in this file
          border-color: $heading-bg;
          color: $heading-bg;
          background: white;
        }

        &::before,
        &::after {
          background: $heading-bg;
        }
      }
    }

    & > .actions {
      display: flex;
      align-items: center;
      margin: 1.5rem 0;

      & > * {
        // Middle items are buttons. They're fixed-size.
        flex: 0 0 auto;
        display: inline-block;
        margin: 0 0.5rem;
      }

      &::before,
      &::after {
        // Line to left and right of buttons, stretching to fill available space.
        flex: 1 1 auto;
        display: block;
        content: '';
        height: 0.3rem;
        background: transparent;
        border-radius: 0.15rem;
      }
      &::before {
        margin-right: 2rem;
      }
      &::after {
        margin-left: 2rem;
      }

      & > button,
      & > .dropdown > button {
        background: white;
        cursor: pointer;
        border: 1px solid $light-gray;
        border-radius: 50%;
        padding: 0.8rem;
        color: $light-gray;
        font-size: 1.6rem;
        line-height: 0;

        &:hover {
          color: white;
          background-color: $heading-bg;
        }
        &.active,
        &:active,
        &[aria-expanded='true'],
        &:focus {
          color: white;
          border-color: $header-hover;
          background: $header-hover;
        }
      }

      & > button {
        // Bootstrap's .btn class has vertical-align: middle, and DropdownItem
        // uses that. Give our non-Bootstrap button the same vertical-align.
        vertical-align: middle;
      }
    }

    form.markdown-editor {
      @include report-markdown-editor();
    }
  }
}
