/*------------------------------------------------------------------------*/
/* Input Group                                                            */
/*------------------------------------------------------------------------*/

.input-group {
  position: relative;
  display: flex;
  align-items: center;
  border-collapse: separate;
  float: left;
  border-spacing: 0;

  > * {
    margin-left: 4px;

    &:first-child {
      margin-left: 0;
    }
  }

  .input {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
  }

  /* @deprecated Use CSS classes according to the "addon"-element  */
  .input-group-addon {
    min-width: 32px;
    height: 32px;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    background: $white;
    padding: 7px;
    border: 1px solid $neutral-600;
    border-radius: $input-border-radius;

    /* @deprecated Use button element and .btn CSS class  */
    &.input-group-addon-clickable {
      &:hover {
        background: $neutral-200;
        cursor: pointer;
      }
    }
  }

  [disabled].input-group-addon.input-group-addon-clickable,
  [disabled="disabled"].input-group-addon.input-group-addon-clickable,
  .disabled.input-group-addon.input-group-addon-clickable {
    background: #dddddd;
    cursor: default;
    opacity: 0.5;
  }

  .input-group-addon.input-group-addon-unstyled {
    border: none;
    background: transparent;
  }

  /* This can be used for two fields next to each other (calendar + time). The two (or more) fields need inline styles which add up to exactly 100% width! */
  .input.input-group-addon {
    width: 30%;
  }

  // @todo  Check if this is necessary, or if we can fallback to the .input style.
  .chosen-container {
    position: relative;
    width: 100%;
    line-height: 16px;
  }
}

