.control-group {
  .display(flex);
  .flex(0, 0, auto);
  .flex-direction(row);
  .flex-wrap(wrap);
  .align-items(stretch);

  padding: @padding-base-vertical @padding-base-horizontal;

  /***
   * components
   ***/

  > * {
    padding-right: @padding-base-horizontal;
    .flex(0, 0, auto);

    &:last-child {
      padding-right: 0;
    }
  }

  // the element should take up an even share of available space
  > .fill {
    .flex(1, 1, 1%);
  }

  button {
    padding: @padding-base-vertical @padding-base-horizontal;
    font-size: @font-size-base;
    color: @control-group-link-color;
    background-color: @control-group-bg;

    &:hover {
      color: @control-group-link-hover-color;
      background-color: @control-group-link-hover-bg;
    }

    .active, &:active, &:focus {
      color: @control-group-link-active-color;
      background-color: @control-group-link-active-bg;
    }

    &[disabled] {
      color: @control-group-link-disabled-color;
      background-color: @control-group-link-disabled-bg;
    }

    &:focus {
      // because some buttons are all side-to-side, the browser's outline
      // is cut off by the next button. This causes the outline to be
      // drawn inside the button. Appplied to all buttons so that it's
      // uniform within this widget
      outline-offset: -4px;
    }
  }


  // horizontal group of buttons/form elements
  .button-group,
  .inline-form .input-group {
    margin-bottom: 0px;
    .display(flex);

    > * {
      .border-radius(0);
    }

    > :first-child {
      .border-left-radius(@input-border-radius);
    }

    > :last-child {
      .border-right-radius(@input-border-radius);
    }
  }

  .inline-form {
    .flex-parent();
    .display(flex);

    > .typeahead {
      .flex-parent();

      > .input-group {
        .display(flex);
        .flex(1, 0, auto);

        > * {
          float: none;
          height: auto;
          width: auto;
          .flex(0 0 auto);
        }

        input[type="text"] {
          .flex(1 1 100%);
        }
      }
    }
  }
}

.nav-controls .column {
  .flex-direction(column);
}