//input-group-addon background color is handled in modified-color-variables
/// Usage: class="input-group mmui-input-group"

.mmui-ig-fc-no-lft-brdr {
  .mmui-form-control {
    border-left-style: none;
    &:focus {
      border-left-style: none !important;
    }
  }
}

.mmui-ig-fc-no-rght-brdr {
  .mmui-form-control {
    border-right-style: none;
    &:focus {
      border-right-style: none !important;
    }
  }
}

.mmui-input-group {
  // @extend .input-group;

  border: 0.1rem solid;
  border-color: $mm-neutral-gray-80;

  &:focus-within {
    border-color: $mm-core-digital-blue-70;
  }

  button {
    font-size: 1.6rem;
    height: 100%; //this is key for making form and button heights align in input-group
    border-color: $mm-neutral-gray-10;
    background-color: $mm-neutral-gray-10;
  }
  .mmui-form-control {
    //unclear of this border use pattern in design. will bring back later
    //border-left-width: 1px;
    //border-left-color:$mm-dark-blue;
    //border-left-style: solid;
    //border-right-style: none;
    height: 4rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.6rem;
    border: none;
  }

  .input-group-prepend {
    .input-group-text {
      background-color: $mm-neutral-white;
      border: none;
      font-size: 1.6rem;
    }
  }

  .input-group-append {
    .input-group-text {
      border: none;
      font-size: 1.6rem;
    }
  }

  .mmui-jumbo-search-form-control {
    background: $mm-neutral-white;
    height: 80px;
    border-color: $mm-neutral-white;

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus {
      -webkit-text-fill-color: $mm-neutral-black;
      -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    }
  }

  .mmui-jumbo-input-group-button {
    border-color: $mm-neutral-white;
    background-color: $mm-neutral-white;
    height: 80px;
    font-size: 38px;
    width: 80px;
  }
}

/// Usage: class="input-group-text mmui-form-input-group-text"
.mmui-form-input-group-text {
  //for styling text addons in input groups
  // @extend .input-group-text;
  height: 4rem;
  background-color: $mm-neutral-gray-30;
  color: $mm-neutral-gray-80;
  font-size: 1.6rem;
  line-height: 2.03; // (40px(form height) - 3.75 (form padding-top) - 3.75 (form padding-bottom))/16(font size) =  2.03
  border: 0;
  border-radius: 0;
}

fieldset:disabled, fieldset[readonly] {
  .mmui-input-group {

    border: none;

    .input-group-prepend span {
      background: $mm-neutral-gray-10;
    }
    .input-group-append span {
      background: $mm-neutral-gray-10;
    }
  }
}

.mmui-input-group {

  &.mmui-input-group-inactive {
    .input-group-prepend span {
      background: $mm-neutral-gray-10;
    }

    .input-group-append span {
      background: $mm-neutral-gray-10;
    }
  }
}