@import "./config";
@import "../../mixins";

.InputGroup {
  display: table;
  width: 100%;
  border-collapse: separate;
}

.InputGroup-input {
  display: table-cell;
  margin: 0;
  white-space: nowrap;
  vertical-align: middle;

  .InputGroup &:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .InputGroup &:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

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

  &:hover {
    .InputGroup-input,
    .InputGroup-context {
      border: $form-field-border-hover;
    }
  }
}

.InputGroup-context {
  display: table-cell;
  width: 1%;
  height: 100%;
  padding: 0 $spacer;
  color: $input-group-context-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background: $input-group-context-background;
  border: $form-field-border;
  font-size: $form-field-font-size;

  .InputGroup &:last-child {
    border-left: 0;
    border-top-right-radius: $form-field-border-radius;
    border-bottom-right-radius: $form-field-border-radius;
  }
  .InputGroup &:first-child {
    border-right: 0;
    padding: 0;
    width: $input-group-context-first-width;
    border-top-left-radius: $form-field-border-radius;
    border-bottom-left-radius: $form-field-border-radius;
  }

  .is-disabled & {
    color: $form-field-disabled-color;
    background-color: $form-field-disabled-background-color;
    border-color: $form-field-disabled-border-color;
  }

  .is-readOnly & {
    color: $form-field-read-only-color;
    background-color: $form-field-read-only-background-color;
    border-color: $form-field-read-only-border-color;
  }
}