$spacing: 1.5em;

.toolbar {
  display: flex;
  margin-bottom: $spacing / 2;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: -$spacing / 4;
  margin-right: -$spacing / 4;

  .toolbar-item {
    margin-bottom: $spacing / 2;
    padding-left: $spacing / 4;
    padding-right: $spacing / 4;
    align-self: center;
    flex-grow: 1;

    &.is-minimum {
      flex-grow: 0;
    }

    &.is-right-aligned {
      flex-grow: 0;
      margin-left: auto;
    }

    &.is-top-aligned {
      align-self: auto;
    }

    &.is-mobile-full-width {
      @include mobile {
        flex-grow: 1;
        margin-left: 0;
        width: 100%;
      }
    }
  }
}