@import (reference) "../variables/legacy-variables.less";
@import "./mixins/_border-radius.less";
@import "./mixins/_buttons.less";
@import "./mixins/_forms.less";
@import (reference) "./mixins/_logical-properties.less";
@import (reference) "./core/_typography.less";
@import "./forms/bootstrap-forms.less";

.input-group {
  position: relative; // For dropdowns
  display: table;
  // Prevent input groups from inheriting border styles from table cells when placed in a table
  border-collapse: separate;
  width: 100%;

  // Undo padding and float of grid classes
  &[class*="col-"] {
    float: none;
    .padding(left, 0);

    .padding(start, 0);
  }

  .form-control {
    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
    .float(left);

    width: 100%;
    margin-bottom: 0;

    &:not(:first-child) {
      .border(left, 0);
    }

    &:not(:last-child) {
      .border(right, 0);
    }

    border-color: var(--color-interactive-secondary);
  }

  .input-group-addon {
    button.np-btn {
      padding: 0;
      min-height: 16px;
      border-radius: 50%;
    }
  }

  .input-group-addon + .form-control {
    .padding(left, 0);
  }

  .form-control + .input-group-addon {
    .padding(left, 0);
  }
}

// Sizing options

.input-group-lg {
  > .form-control,
  > .input-group-addon,
  > .input-group-btn .btn {
    .input-lg();

    .np-text-title-subsection();

    margin-bottom: 0;
  }
}

.input-group-sm > .form-control,
.input-group-sm > .input-group-addon {
  .input-sm();

  .icon {
    font-size: var(--font-size-20);
  }
}

.input-group-sm > .input-group-btn > .btn {
  .btn-sm();
}

.input-group-sm > .input-group-addon {
  line-height: 22px;
}

// Display as table-cell
// -------------------------
.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
}

// Text input groups
// -------------------------
.input-group-addon {
  padding: var(--input-group-addon-padding);
  font-size: var(--font-size-16);
  line-height: var(--line-height-body);
  color: var(--color-content-secondary);
  text-align: center;
  background-color: var(--color-background-screen);
  border: 1px solid var(--color-interactive-secondary);

  // Sizing - over rule spacing from .input-group-sm/lg
  &.input-sm {
    padding: var(--input-group-addon-sm-padding) !important;
  }

  &.input-lg {
    padding: var(--input-group-addon-lg-padding) !important;
  }

  &--search {
    padding-right: calc(@padding-base-horizontal / 2);
  }

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
  }

  .icon {
    font-size: 24px;
    vertical-align: middle;
    display: inline-block;
    margin-top: -2px;
    .margin(left, -4px);
    .margin(right, -5px);
  }

  a {
    text-decoration: none;
  }

  &:empty {
    padding: 0 !important;
    // We still need the empty addon to provide border radius
    width: @border-radius-base;
  }
}

.form-group-lg .input-lg,
.form-group-lg .input-group {
  margin-bottom: 0;
}

.input-group .input-group-addon,
.input-group .btn-input,
.input-group .form-control {
  .border-width(left,0);

  .border-width(right,0);

  border-radius: 0;

  .np-theme-personal & {
    border-radius: 0;
  }
}

.input-group .input-group-btn:first-child,
.input-group .input-group-addon:first-child,
.input-group .btn-input:first-child,
.input-group .form-control:first-child {
  .border-width(left, 1px);

  .border-radius(left, @border-radius-base);
}

.input-group .input-group-btn:last-child,
.input-group .input-group-addon:last-child,
.input-group .btn-input:last-child,
.input-group .form-control:last-child {
  .border-width(right, 1px);

  .border-radius(right, @border-radius-base);
}

/* TODO: Remove this rule group once the brand refresh is out */
// stylelint-disable-next-line no-duplicate-selectors
.input-group {
  > :first-child .btn,
  > :first-child .btn-group {
    .border-radius(right, 0);

    .np-theme-personal & {
      .border-radius(left, var(--radius-small));
    }
  }

  > :last-child .btn,
  > :last-child .btn-group {
    .border-radius(left, 0);

    .np-theme-personal & {
      .border-radius(left, var(--radius-small));
    }
  }
}

// Button input groups
// -------------------------
.input-group-btn {
  position: relative;
  // Jankily prevent input button groups from wrapping with `white-space` and
  // `font-size` in combination with `inline-block` on buttons.
  font-size: 0;
  white-space: nowrap;

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .btn {
    position: relative;

    + .btn {
      .margin(left, -1px);
    }
    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }
  }

  // Negative margin to only have a 1px border between the two
  &:first-child {
    > .btn,
    > .btn-group {
      .margin(right, -1px);
    }
  }
}

// inputs focus and hover states (not disabled)
.input-group:hover:not(.disabled,:disabled) {
  .form-control,
  .input-group-addon,
  .btn-input,
  .bootstrap-select .btn-default {
    border-color: var(--color-interactive-secondary-hover);
  }
}

.form-control:hover:not(.disabled,:disabled) {
  border-color: var(--color-interactive-secondary-hover);
}

.input-group:focus-within:not(.disabled,:disabled) {
  .form-control,
  .input-group-addon,
  .btn-input,
  .bootstrap-select .btn-default {
    border-color: var(--color-interactive-accent);

    .np-theme-personal & {
      border-color: var(--color-interactive-secondary);
    }
  }
}

.form-control:focus-within:not(.disabled,:disabled) {
  border-color: var(--color-interactive-accent);

  .np-theme-personal & {
    border-color: var(--color-interactive-secondary);
  }
}

.has-error .input-group {
  .form-control,
  .input-group-addon {
    border-color: var(--color-interactive-negative);

    &:hover {
      border-color: var(--color-interactive-negative-hover);
    }
  }
}

.dropdown-menu {
  .input-group-addon {
    border: 0;
  }
}