//
// Input groups
// --------------------------------------------------

.input-group {
  position: relative;
  display: table;
  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table

  // Undo padding and float of grid classes
  &[class*="col-"] {
    float: none;
    padding-right: 0;
    padding-left: 0;
  }

  .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;

    &:focus {
      z-index: 3;
    }
  }

  // Elements
  // ---------------------

  &-btn,
  & .form-control {
    display: table-cell;

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }

    &[uib-typeahead]:not(:last-child) {
      @include border-right-radius($input-border-radius);
    }
  }

  &-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
  }

  // Reset rounded corners
  & .form-control:first-child,
  &-btn:first-child > .btn,
  &-btn:first-child > .btn-group > .btn,
  &-btn:first-child > .dropdown-toggle,
  &-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
  &-btn:last-child > .btn-group:not(:last-child) > .btn {
    @include border-right-radius(0);
  }

  & .form-control:last-child,
  &-btn:last-child > .btn,
  &-btn:last-child > .btn-group > .btn,
  &-btn:last-child > .dropdown-toggle,
  &-btn:first-child > .btn:not(:first-child),
  &-btn:first-child > .btn-group:not(:first-child) > .btn {
    @include border-left-radius(0);
  }

  // Can not be used without .input-group-with-addon-left or .input-group-with-addon-right!
  &-addon {
    position: absolute;
    display: block;
    text-align: center;
    line-height: $input-group-addon-height;
    width: $input-group-addon-width;
    height: $input-group-addon-height;
    margin-top: -($input-group-addon-height * 0.5);
    font-size: $font-size-large;
    z-index: 4;
    top: 50%;

    @include themes(color, color-new-heading);

    .fa,
    .fas,
    .far {
      line-height: inherit;
    }

    a {
      @include themes(color, color-new-heading);

      &:hover,
      &:focus {
        @include themes-value(color, $brand-primary);
      }
    }
  }

  &-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;

    &:first-child {
      > .btn,
      > .btn-group {
        margin-right: -1px;
      }
    }

    &:last-child {
      > .btn,
      > .btn-group {
        z-index: 2;
      }

      > .btn {
        border-width: 1px 1px 1px 0;
        margin-left: 0;
      }

      > .btn-group {
        margin-left: -1px;
      }
    }

    .btn {
      position: relative;
      font-size: $font-size-base;
      font-weight: $font-weight-regular;
      background-color: $color-grey-rgba-04;
      border-style: solid;
      border-width: 1px 0 1px 1px;
      margin-right: 0;
      padding-right: ceil($grid-unit-x * 1.5);
      padding-left: ceil($grid-unit-x * 1.5);
      background-clip: padding-box;

      @include themes(color, color-new-heading);
      @include themes(background-color, input-group-btn-bg);
      @include themes(border-color, input-border, true);

      & + .btn {
        margin-left: -1px;
      }

      &:hover,
      &:focus {
        z-index: 2;

        &:not(:disabled) {
          @include themes(background-color, input-group-btn-bg-disabled);
        }
      }

      &.dropdown-toggle {
        padding-right: $grid-unit-x * 4;

        &:after {
          right: $grid-unit-x;
          line-height: $grid-unit-y * 3;
          margin-top: -(ceil($grid-unit-y * 1.5) + 1);
          padding-left: $grid-unit-x;
        }
      }

      &.btn-squared {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  // Variations
  // ---------------------

  &-with-addon {
    display: block;

    &-left {
      .form-control {
        padding-left: $input-padding-base-x + $input-group-addon-space +
          $input-group-addon-width;
      }

      .input-group-addon-left {
        left: $input-padding-base-x;
      }
    }

    &-right {
      .form-control {
        padding-right: $input-padding-base-x + $input-group-addon-space +
          $input-group-addon-width;
      }

      .input-group-addon-right {
        right: $input-padding-base-x;
      }
    }

    &.input-group-with-addon-left,
    &.input-group-with-addon-right {
      .form-control {
        display: block;
        float: none;

        &,
        &:not(:first-child):not(:last-child) {
          @include border-radius($input-border-radius);
        }
      }
    }

    &.input-group-sm {
      .input-group-addon {
        font-size: $font-size-small;
      }

      &.input-group-with-addon-left {
        .form-control {
          padding-left: $input-padding-sm-x + $input-group-addon-space +
            $input-group-addon-width;
        }

        .input-group-addon-left {
          left: $input-padding-sm-x;
        }
      }

      &.input-group-with-addon-right {
        .form-control {
          padding-right: $input-padding-sm-x + $input-group-addon-space +
            $input-group-addon-width;
        }

        .input-group-addon-right {
          right: $input-padding-sm-x;
        }
      }
    }

    &.input-group-lg {
      .input-group-addon {
        font-size: $font-size-h4;
        line-height: $input-group-lg-addon-height;
        width: $input-group-lg-addon-width;
        height: $input-group-lg-addon-height;
        margin-top: -($input-group-lg-addon-height * 0.5);
      }

      &.input-group-with-addon-left {
        .form-control {
          padding-left: $input-padding-lg-x + $input-group-lg-addon-space +
            $input-group-lg-addon-width;
        }

        .input-group-addon-left {
          left: $input-padding-lg-x;
        }
      }

      &.input-group-with-addon-right {
        .form-control {
          padding-right: $input-padding-lg-x + $input-group-lg-addon-space +
            $input-group-lg-addon-width;
        }

        .input-group-addon-right {
          right: $input-padding-lg-x;
        }
      }
    }
  }

  @mixin input-group-pos-abs($addon-size, $addon-size-sm) {
    display: block;
    position: relative;

    .form-control {
      float: none;

      &:focus + .input-group-btn .btn {
        background: $input-border-focus;
        color: $color-white;

        &:hover,
        &:focus {
          background: $brand-primary-dark-1;
        }
      }

      &,
      &:first-child {
        @include border-radius($input-border-radius);
      }
    }

    .input-group-btn {
      width: $addon-size !important;
      height: $addon-size;
      position: absolute;
      right: 3px;
      display: flex;
      z-index: 5;
      top: 3px;
      padding: 0;
      align-items: center;
      justify-content: center;

      &,
      &:first-child,
      &:last-child {
        .btn {
          @include border-radius($input-border-radius);
        }
      }

      .btn {
        width: $addon-size !important;
        height: $addon-size;
        line-height: $addon-size;
        border-width: 0;
        padding: 0;
        text-align: center;

        @include themes(background-color, input-group-btn-bg);
        @include themes(color, color-new-body-light);

        &:hover,
        &:focus {
          @include themes(background-color, color-new-border);
        }

        .fa,
        .fas,
        .far,
        .fal {
          margin-right: 0;
        }
      }
    }

    &.input-group-sm {
      $size: $addon-size-sm;

      .input-group-btn {
        width: $size !important;
        height: $size;

        &,
        &:first-child,
        &:last-child {
          .btn {
            @include border-radius($input-border-radius);
          }
        }

        .btn {
          width: $size !important;
          height: $size;
          line-height: $addon-size-sm;
          font-size: $font-size-base;
          padding: 0;
        }
      }
    }
  }

  $addon-size: $grid-unit-x * 4 + 2;
  $addon-size-sm: $grid-unit-x * 3 + 2;

  &-pos-abs {
    @include input-group-pos-abs($addon-size, $addon-size-sm);
  }

  // Sizing options
  // --------------------------------------------------

  &-lg {
    & > .form-control,
    & > .input-group-btn > .btn {
      @extend .input-lg;

      height: auto;
      padding-right: $grid-unit-x * 2;
      padding-left: $grid-unit-x * 2;

      &.btn-squared {
        padding-left: 0;
        padding-right: 0;
      }

      &.dropdown-toggle {
        padding-right: $grid-unit-x * 5;

        &:after {
          right: $grid-unit-x * 2;
        }
      }
    }

    .input-group-btn:first-child > .btn {
      @include border-right-radius(0);
    }

    .input-group-btn:last-child > .btn {
      @include border-left-radius(0);
    }
  }

  &-sm {
    & > .input-group-btn > .btn {
      padding-right: $grid-unit-x;
      padding-left: $grid-unit-x;
    }

    & > .form-control,
    & > .input-group-btn > .btn {
      @extend .input-sm;

      height: auto;

      &.btn-squared {
        padding-left: 0;
        padding-right: 0;
      }

      &.dropdown-toggle {
        padding-right: $grid-unit-x * 3;

        &:after {
          right: $grid-unit-x;
        }
      }
    }

    .input-group-btn:first-child > .btn {
      @include border-right-radius(0);
    }

    .input-group-btn:last-child > .btn {
      @include border-left-radius(0);
    }
  }
}