@import "~ui/styles/variables";
@import "~ui/styles/mixins";

.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;
}