.co-actions {
  display: flex;
  @media(max-width: $screen-xs){
    align-items: flex-end;
    flex-direction: column;
  }
}

@media(max-width: $screen-xs){
  .co-action-buttons__btn {
    margin-bottom: 10px;
  }
}

.co-action-buttons__btn, // btn along with drowdown actions
.co-actions-menu {
  margin-left: 10px;
}

.co-m-nav-title {
  padding: $grid-gutter-width ($grid-gutter-width / 2) 0;
  @media (min-width: $grid-float-breakpoint) {
    padding-left: $grid-gutter-width;
    padding-right: $grid-gutter-width;
  }
  &--detail {
    border-bottom: 1px solid $color-grey-background-border;
    // Set min-height to prevent shifting of page content when actions btn is rendered after page content
    min-height: 90px; // h1 text + top & bottom margin + bottom border (29 + 30 + 30 + 1)
    flex-shrink: 0; // do not allow to shrink
  }
  // Positioned after --detail to take precedence, since they will be a siblings
  &--breadcrumbs {
    // Set min-height to prevent shifting of page content when actions btn is rendered after page content
    min-height: 118px; // breadcrumb text + top & bottom padding + h1 text + bottom margin + bottom border +  (21 + 25 + 12 + 29 + 30 + 1)
    padding-top: 0;
  }
}
