// COMPONENT: Toolbar: lays out a row (or stack) of controls that influence
// other items
.toolbar
  align-items: center
  display: flex
  justify-content: space-between
  padding: $gutter 0

  +tiny-screen
    flex-direction: column
    align-items: flex-start

  .toolbar-item
    display: flex
    margin-bottom: 0
    margin-right: 0

    +small-screen
      flex-wrap: wrap
      margin-bottom: $input-padding

      > *
        margin-bottom: $input-padding


    &:last-child
      margin-bottom: 0
      margin-right: 0

    +larger-than-small-screen
      + *
        margin-left: $input-padding


    &.toolbar-item--start
      margin-right: auto

    &.toolbar-item--end
      margin-left: auto

  // SUBCOMPONENT: A footer toolbar pointing the user to additional options,
  // always found below the main page content and above the page footer
  &.toolbar--footer
    padding: ($gutter * 2.5) 0 $gutter 0

  // SUBCOMPONENT: A header toolbar presenting an up-front list of actions
  &.toolbar--header
    padding: ($gutter * 4) 0
