// bootstrap: Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
// Usage: class="form-control mmui-form-control"
.mmui-form-control {
  // @extend .form-control;
  border: 0.1rem solid;
  border-radius: 0;
  border-color: $mm-neutral-gray-80;
  font-size: 1.6rem;
  background-color: $mm-neutral-white;
  color: $mm-neutral-gray-80;

  &:focus {
    border: 0.1rem solid;
    border-color: $mm-core-digital-blue-70;
    background-color: $mm-neutral-white;
    box-shadow: none;
  }

  &::placeholder {
    color: $mm-neutral-gray-80;
  }

  &:disabled, &[readonly] {
    border-color: $mm-neutral-gray-10;
    background: $mm-neutral-gray-10;
    color: $mm-seq-gray-50;

    &::placeholder {
      color: $mm-seq-gray-50;
    }
  }

}

//inputs are 40px high. text area heights can be set by "row" = 3
input {
  &.mmui-form-control {
    padding-left: 2rem; //for spacing of placeholder text within input forms
    height: 4rem;
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
  }
}

textarea {
  &.mmui-form-control {
    padding-left: 2rem;
  }
}

//general label above forms
.mmui-form-label {
  color: $mm-neutral-gray-80;
  font-size: 1.4rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  line-height: 1.1;
  vertical-align: top;
  display: block;
}

// error message and style
.mmui-form-error-msg {
  font-size: 1.4rem;
  line-height: 1.1429;
  color: $mm-sem-neg-60;
  padding-top: 1rem;
}

.mmui-form-has-error {
  & input,
  & textarea,
  & select {
    border: 0.1rem solid !important;
    border-color: $mm-sem-neg-60 !important;
  }
}

.mmui-form-notification-msg {
  font-size: 14px;
  padding-top: 1rem;
}

.mmui-form-notification-danger {
  color: $mm-sem-neg-60;
}

.mmui-form-check-inline {
  align-items: normal;
  margin-right: 2rem;

  .form-check-input {
    margin-top: 0;
    position: relative;
  }
}

.mmui-form-check {
  .form-check-input {
    margin-top: 5px;
  }
}

//creates correct left padding per design, for labels when used in:
//vertically stacked forms
/// Usagfe: class="form-check-label mmui-form-check-label"
.mmui-form-check-label {
  // @extend .form-check-label;
  padding-left: 1rem;
}

//horizontally inline forms
/// Usage: class="form-check-label mmui-form-check-inline-label"
.mmui-form-check-inline-label {
  // @extend .form-check-label;
  padding-left: 0.6875rem; //10px from design - 0.3125rem from bootstrap's .form-check-inline .form-check-input
}

//this is a hack to not show the chrome hack that makes an input field yellow, when autofill is used
//Boyoon greatly dislikes this yellow and would like to use this hack until chrome address this issue
//unfortunately, the form still seems to flash yellow for a second before tyrning gray
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px $mm-neutral-gray-10 inset;
}