@use "00-base/configure" as *;

input {

  &.has-error:not(:focus) {
    background-image: url('#{$assets-path}/images/icons/input-error.svg');
    border-color: $c-bd-error;
  }

  .ma__form--light & {
    background-color: rgba($c-white, 0.1);
    border-color: rgba($c-bd-input,.5);
    color: $c-font-inverse;

    &.has-error {
      border-color: $c-bd-error;
    }
  }
}

input {
  background-color: $c-white;
  border: 2px solid $c-bd-input;
  color: $c-font-base;
  font-size: $fonts-medium;
  font-weight: $fonts-light;
  max-width: 100%;
  min-height: 40px;
  padding: 0 18px;

  &.has-error:not(:focus) {
    background-position: center right 10px;
    background-repeat: no-repeat;
    padding-right: 40px;
  }
}

input,
optgroup,
select,
textarea {
  font-family: $fonts;
  font-weight: $fonts-light;
  font-size: $fonts-medium;
}

[type="radio"] {
  height: 18px;
  width: 18px;
}

input[type=file] {
  border: none;
  min-height: 0;
  padding: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  // Removes leftover margin.
  margin: 0;
}

textarea {
  background-color: $c-white;
  border: 2px solid $c-bd-input;
  font-size: $fonts-medium;
  font-weight: $fonts-light;
  max-width: 100%;
  min-height: 135px;
  padding: 18px;

  &.has-error {
    border-color: $c-bd-error;
  }

  .ma__form--light & {
    background-color: rgba($c-white, 0.1);
    border-color: rgba($c-bd-input, 0.5);
    color: $c-font-inverse;

    &.has-error {
      border-color: $c-bd-error;
    }
  }
}

legend,
label {
  display: block;
  margin-bottom: .25em;
  padding: 0;
  font-weight: $fonts-normal;
}


fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

optgroup,
select {
  font-weight: $fonts-light;
  font-size: $fonts-medium;
  max-width: 100%;
}

// override if an input label combo is added directly to the page-content area
// This is mainly for Pattern Lab

.main-content .page-content > label:not(.ma__label--hidden) {

  & + textarea,
  & + .ma__textarea__wrapper,
  & + .ma__input-number,
  & + input {
    margin-top: 0;
  }

  & + .ma__error-msg {
    margin-top: 0;

    & + textarea,
    & + .ma__textarea__wrapper,
    & + .ma__input-number,
    & + input {
      margin-top: 0;
    }
  }
}

:focus {
  border-color: Highlight !important;

  // WebKit gets its native focus styles.

  @media (-webkit-min-device-pixel-ratio:0) {
    outline-color: -webkit-focus-ring-color;
  }
}

// Chrome/Opera/Safari.

::-webkit-input-placeholder {
  color: inherit;
  font-style: italic;
  opacity: 1;
}

// Firefox 19+.

::-moz-placeholder {
  color: inherit;
  font-style: italic;
  opacity: 1;
}

// IE 10+.

:-ms-input-placeholder {
  color: inherit;
  font-style: italic;
  opacity: 1;
}

// Firefox 18-.

:-moz-placeholder {
  color: inherit;
  font-style: italic;
  opacity: 1;
}