/* elc input fields */
.elc-floating-label-input,
.elc-input-field,
.elc-dropdown,
.elc-textarea,
.elc-input-error,
.elc-google-address-input {
  --form-input-border-radius: var(--input-border-radius);
  --form-input-border-style: 1px solid;
  --form-input-height: var(--input-height);
  --form-input-padding: var(--input-padding);
  --form-input-background: var(--input-background);
  --form-input-border-color: var(--color-primary-500);
  --form-input-border-color-focus: var(--color-foreground);
  --form-input-error-color: var(--color-primary-500);
  --form-input-placeholder-color: var(--color-primary-700);
  --form-input-font-size: var(--text-base);
  --form-input-latter-spacing: var(--input-letter-spacing, normal);
  --form-input-color: var(--color-black);
  --form-input-hover-color: var(--color-black);
  --form-input-disabled-background: var(--input-disabled-background);
  --form-input-disabled-color: var(--input-disabled-color);
  --form-input-disabled-border-color: var(--input-disabled-border);
}

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

input.elc-input-field,
input.elc-floating-label-input,
input.elc-floating-label-input-field,
textarea.elc-textarea,
input.elc-google-address-input {
  border: var(--form-input-border-style);
  border-radius: var(--form-input-border-radius);
  border-color: var(--form-input-border-color);
  color: var(--form-input-color);
  padding: var(--form-input-padding);
  height: var(--form-input-height);
  background: var(--form-input-background);
  font-size: var(--form-input-font-size);
  letter-spacing: var(--form-input-latter-spacing);
}

textarea.elc-textarea {
  height: 94px;
  padding: var(--form-input-padding);
}

.elc-textarea .elc-floating-label__label-is-down {
  margin-top: 15px;
}

input.elc-input-field:focus,
input.elc-textarea:focus,
input.elc-floating-label-input-field:focus,
body .react-tel-input .form-control:focus,
input.elc-google-address-input:focus {
  box-shadow: none;
  background: var(--form-input-background);
  border-color: var(--form-input-border-color-focus);
}

input.elc-input-field:hover,
input.elc-textarea:hover,
input.elc-floating-label-input-field:hover,
body .react-tel-input .form-control:hover,
.elc-dropdown .elc-dropdown-readonly-input:hover,
.elc-dropdown-option:hover {
  color: var(--form-input-hover-color);
}
.elc-input-field[aria-disabled='true'] {
  color: var(--color-primary-700);
  opacity: 1;
}

/* floating placeholder label */
.js-relative-positioned-text-wrapper {
  background: transparent;
}

.elc-floating-label-string {
  text-transform: capitalize;
  text-overflow: clip;
  color: var(--form-input-placeholder-color);
  line-height: 24px;
}

.elc-floating-label__label-is-down {
  font-size: var(--form-input-font-size);
}

/* elc-dropdown */
.elc-dropdown .elc-dropdown-wrapper {
  border: var(--form-input-border-style);
  border-radius: var(--form-input-border-radius);
  border-color: var(--form-input-border-color);
  height: var(--form-input-height);
  padding: 0;
  background: var(--input-background);
  color: var(--form-input-color);
}

.elc-dropdown .elc-dropdown-readonly-input {
  padding: var(--form-input-padding);
  font-family: var(--font-body);
  font-size: var(--form-input-font-size);
  letter-spacing: var(--form-input-latter-spacing);
}

.elc-dropdown-options-list {
  border-color: var(--form-input-border-color);
  background: var(--form-input-background);
  font-family: var(--font-body);
  line-height: 24px;
  padding-left: 10px;
}

/* input error state */
body .elc-floating-label-input-error input.elc-floating-label-input-errorField,
body .elc-floating-label-input-error .elc-floating-label__text-wrapper,
body .react-tel-input .form-control.elc-floating-label-input-errorField,
body input.elc-floating-label-input-errorField:focus {
  border-color: var(--color-error);
  color: var(--color-error);
}

.elc-input-error p {
  color: var(--color-error);
  font-size: var(--text-xs);
  padding-top: 4px;
}

.elc-dropdown.elc-input-errorField .elc-dropdown-wrapper,
.elc-dropdown-wrapper.elc-floating-label-input-errorField .elc-dropdown-wrapper {
  border-color: var(--color-error);
}

/* auto fill style */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: 1px 2px 9px -6px rgba(0, 0, 0, 0.75),
    0 0 0px 1000px var(--form-input-background) inset;
  -webkit-box-shadow: 1px -2px 9px -6px rgba(0, 0, 0, 0.75),
    0 0 0px 1000px var(--form-input-background) inset;
  -moz-box-shadow: 1px -2px 9px -6px rgba(0, 0, 0, 0.75),
    0 0 0px 1000px var(--form-input-background) inset;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px) {
  input.elc-input-field,
  input.elc-dropdown-input,
  .elc-dropdown .elc-dropdown-readonly-input,
  .elc-dropdown-option {
    font-size: var(--text-lg);
  }
}

/* phone lib input */
body .react-tel-input .form-control {
  font-family: var(--font-body);
  background: var(--form-input-background);
  color: var(--form-input-color);
  width: 100%;
  border-color: var(--form-input-border-color);
  border-radius: var(--form-input-border-radius);
  padding: var(--form-input-padding);
}

body .react-tel-input .selected-flag {
  padding: var(--form-input-padding);
}

.elc-floating-label__required-wrapper {
  display: none;
}

.elc-floating-label-input-required .elc-floating-label__text-wrapper::before {
  content: '*';
}

.elc-floating-label-input-field::placeholder {
  color: var(--form-input-placeholder-color);
}

/* input disabled state */
.elc-field-container-disabled .elc-input-field,
.elc-dropdown-container-disabled .elc-dropdown .elc-dropdown-wrapper,
.elc-field-container-disabled .elc-floating-label-input,
.elc-field-container-disabled .elc-floating-label-string.elc-floating-label__label-is-down,
.elc-field-container-disabled .elc-floating-label-string.elc-floating-label__label-is-down span,
.elc-field-container-disabled .elc-floating-label-string.elc-floating-label__label-is-down::before,
.elc-dropdown-container-disabled .elc-floating-label-input,
.elc-dropdown-container-disabled .elc-floating-label-string.elc-floating-label__label-is-down,
.elc-dropdown-container-disabled .elc-floating-label-string.elc-floating-label__label-is-down span,
.elc-dropdown-container-disabled .elc-floating-label-string.elc-floating-label__label-is-down::before,
.elc-field-disabled + .elc-floating-label-string.elc-floating-label__label-is-down,
.elc-field-disabled + .elc-floating-label-string.elc-floating-label__label-is-down span,
.elc-field-disabled + .elc-floating-label-string.elc-floating-label__label-is-down::before,
.elc-form-field-wrapper input[value=""].elc-input-field[disabled],
.elc-dropdown-disabled .elc-dropdown-wrapper {
  background: var(--form-input-disabled-background);
  color: var(--form-input-disabled-color);
  border-color: var(--form-input-disabled-border-color);
}

.elc-dropdown-disabled .elc-dropdown-wrapper .elc-dropdown-readonly-input:hover {
  color: var(--form-input-disabled-color);
}

.elc-form-field-wrapper .elc-dropdown-wrapper .elc-dropdown-selected .elc-dropdown-wrapper {
  background: var(--form-input-background);
}

.elc-dropdown {
  font-family: var(--main-font-family);
  font-size: var(--form-input-font-size);
  letter-spacing: var(--form-input-latter-spacing);
}