body {
  --input-padding: 6px 12px;
  --input-line-height: 1;
  --input-color-text: var(--text-color-primary);
  --input-font-size: 14px;
  --input-color-text-placeholder: var(--text-color-placeholder);
  --input-bg-color: transparent;
  --input-border-color: var(--border-level-2-color);
  --input-disabled-bg-color: var(--bg-color-component-disabled);
  --input-disabled-text-color: var(--text-color-disabled);
  --input-disabled-border-color: var(--border-level-2-color);
  --input-font-tip-size: 12px;
  --input-padding-word-limit-left: 8px;
  --input-size-icon-clear: 12px;
  --input-color-icon-clear: var(--text-color-secondary);
  --input-padding-horizontal: 12px;
  --input-size-default-icon-suffix-size: 14px;
  --input-color-prefix-text: var(--text-color-placeholder);
  --input-color-suffix-text: var(--text-color-placeholder);
  --input-border-radius: var(--border-radius-medium);
  --input-color-addon-bg: var(--bg-color-secondary-container);
  --input-color-addon-border_default: transparent;
  --input-size-default-icon-addon-size: 14px;
  --input-color-addon-border: var(--border-level-2-color);
  --input-wrapper-padding: 12px;
  --input-icon-hover-bg: var(--bg-color-container-hover);
  --input-icon-hover-size: 18px;
  --input-error-color: var(--error-color);
  --input-warning-color: var(--warning-color);
}
.mx-input {
  padding: var(--input-padding);
  line-height: var(--input-line-height);
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  color: var(--input-color-text);
  padding-left: var(--input-wrapper-padding);
  padding-right: var(--input-wrapper-padding);
  font-size: var(--input-font-size);
  box-sizing: border-box;
  transition: color 0.1s linear, border-color 0.1s linear, background-color 0.1s linear;
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
}
.mx-input::placeholder {
  color: var(--input-color-text-placeholder);
}
.mx-input.mx-input-focus {
  border-color: var(--brand-color);
}
.mx-input:hover {
  border-color: var(--brand-color);
}
.mx-input-error {
  border-color: var(--input-error-color);
}
.mx-input-error:hover {
  border-color: var(--input-error-color);
}
.mx-input-error.mx-input-focus,
.mx-input-error.mx-input-focus:hover {
  border-color: var(--input-error-color);
}
.mx-input-warning {
  border-color: var(--input-warning-color);
}
.mx-input-warning:hover {
  border-color: var(--input-warning-color);
}
.mx-input-warning.mx-input-focus,
.mx-input-warning.mx-input-focus:hover {
  border-color: var(--input-warning-color);
}
.mx-input-disabled {
  background-color: var(--input-disabled-bg-color);
  cursor: not-allowed;
  color: var(--input-disabled-text-color);
  -webkit-text-fill-color: var(--input-disabled-text-color);
  border-color: var(--input-disabled-border-color);
}
.mx-input-disabled:hover {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-bg-color);
  color: var(--input-disabled-text-color);
}
.mx-input-disabled::placeholder {
  color: var(--input-disabled-text-color);
}
.mx-input input:disabled {
  color: var(--input-disabled-text-color);
}
.mx-input-word-limit {
  font-size: var(--input-font-tip-size);
  padding-left: var(--input-padding-word-limit-left);
}
.mx-input-word-limit-error {
  color: var(--error-color);
}
.mx-input-clear-icon {
  font-size: var(--input-size-icon-clear);
  cursor: pointer;
  color: var(--input-color-icon-clear);
}
.mx-input-clear-icon > svg {
  transition: color 0.1s linear;
  position: relative;
}
.mx-input-inner-wrapper {
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: var(--input-color-text);
  padding-left: var(--input-wrapper-padding);
  padding-right: var(--input-wrapper-padding);
  font-size: var(--input-font-size);
  box-sizing: border-box;
  transition: color 0.1s linear, border-color 0.1s linear, background-color 0.1s linear;
  background-color: var(--input-bg-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  display: inline-flex;
  width: 100%;
  position: relative;
  align-items: center;
}
.mx-input-inner-wrapper::placeholder {
  color: var(--input-color-text-placeholder);
}
.mx-input-inner-wrapper.mx-input-inner-wrapper-focus {
  border-color: var(--brand-color);
}
.mx-input-inner-wrapper:hover {
  border-color: var(--brand-color);
}
.mx-input-inner-wrapper-error {
  border-color: var(--input-error-color);
}
.mx-input-inner-wrapper-error:hover {
  border-color: var(--input-error-color);
}
.mx-input-inner-wrapper-error.mx-input-inner-wrapper-focus,
.mx-input-inner-wrapper-error.mx-input-inner-wrapper-focus:hover {
  border-color: var(--input-error-color);
}
.mx-input-inner-wrapper-warning {
  border-color: var(--input-warning-color);
}
.mx-input-inner-wrapper-warning:hover {
  border-color: var(--input-warning-color);
}
.mx-input-inner-wrapper-warning.mx-input-inner-wrapper-focus,
.mx-input-inner-wrapper-warning.mx-input-inner-wrapper-focus:hover {
  border-color: var(--input-warning-color);
}
.mx-input-inner-wrapper .mx-icon-hover {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 0;
}
.mx-input-inner-wrapper .mx-icon-hover .mx-icon {
  position: relative;
}
.mx-input-inner-wrapper .mx-icon-hover::before {
  content: '';
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: transparent;
  box-sizing: border-box;
  transition: background-color 0.1s linear;
}
.mx-input-inner-wrapper .mx-icon-hover:hover::before {
  background-color: var(--input-icon-hover-bg);
}
.mx-input-inner-wrapper .mx-icon-hover.mx-icon-hover-disabled::before {
  opacity: 0;
}
.mx-input-inner-wrapper .mx-icon-hover::before {
  top: 50%;
  left: 50%;
  height: var(--input-icon-hover-size);
  width: var(--input-icon-hover-size);
  transform: translate(-50%, -50%);
}
.mx-input-inner-wrapper .mx-input {
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  border: none;
  background: none;
}
.mx-input-inner-wrapper .mx-input:hover,
.mx-input-inner-wrapper .mx-input:focus {
  background: none;
  box-shadow: none;
}
.mx-input-inner-wrapper-has-prefix > .mx-input-clear-wrapper .mx-input,
.mx-input-inner-wrapper-has-prefix > .mx-input {
  padding-left: var(--input-padding-horizontal);
}
.mx-input-inner-wrapper .mx-input-group-prefix,
.mx-input-inner-wrapper .mx-input-group-suffix {
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.mx-input-inner-wrapper .mx-input-group-prefix > svg,
.mx-input-inner-wrapper .mx-input-group-suffix > svg {
  font-size: var(--input-size-default-icon-suffix-size);
}
.mx-input-inner-wrapper .mx-input-group-prefix {
  color: var(--input-color-prefix-text);
}
.mx-input-inner-wrapper .mx-input-group-suffix {
  color: var(--input-color-suffix-text);
}
.mx-input-inner-wrapper-disabled {
  background-color: var(--input-disabled-bg-color);
  cursor: not-allowed;
  color: var(--input-disabled-text-color);
  -webkit-text-fill-color: var(--input-disabled-text-color);
  border-color: var(--input-disabled-border-color);
}
.mx-input-inner-wrapper-disabled:hover {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-bg-color);
  color: var(--input-disabled-text-color);
}
.mx-input-inner-wrapper-disabled::placeholder {
  color: var(--input-disabled-text-color);
}
.mx-input-inner-wrapper-disabled .mx-input-group-prefix,
.mx-input-inner-wrapper-disabled .mx-input-group-suffix {
  color: inherit;
}
.mx-input-inner-wrapper .mx-input-clear-icon {
  visibility: hidden;
}
.mx-input-inner-wrapper:hover .mx-input-clear-icon {
  visibility: visible;
}
.mx-input-inner-wrapper:hover .mx-input-clear-icon ~ .mx-input-group-suffix {
  margin-left: 4px;
}
.mx-input-group {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.mx-input-group > .mx-input-inner-wrapper,
.mx-input-group > .mx-input {
  border-radius: 0;
}
.mx-input-group > :first-child {
  border-top-left-radius: var(--input-border-radius);
  border-bottom-left-radius: var(--input-border-radius);
}
.mx-input-group > :last-child {
  border-top-right-radius: var(--input-border-radius);
  border-bottom-right-radius: var(--input-border-radius);
}
.mx-input-group-addbefore,
.mx-input-group-addafter {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0 var(--input-padding-horizontal);
  background-color: var(--input-color-addon-bg);
  border: 1px solid var(--input-color-addon-border_default);
}
.mx-input-group-addbefore > svg,
.mx-input-group-addafter > svg {
  font-size: var(--input-size-default-icon-addon-size);
}
.mx-input-group-addafter {
  border: 1px solid var(--input-color-addon-border);
  border-left: none;
  background-color: var(--input-color-addon-bg);
}
.mx-input-group-addbefore {
  border: 1px solid var(--input-color-addon-border);
  border-right: none;
}
.mx-input-group-wrapper {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}
.mx-input-group-wrapper .mx-input-inner-wrapper {
  height: 100%;
}
.mx-input-group-wrapper.mx-input-disabled {
  cursor: not-allowed;
}
.mx-input-password.mx-input-group-wrapper:not(.mx-input-group-wrapper-disabled) .mx-input-group-suffix {
  cursor: pointer;
}
.mx-input-password-icon-wrapper {
  display: flex;
  align-items: center;
}