.error-tel-input {
  border: 1px solid var(--color-error);
}

.phone-number {
  .iti {
    width: 100%;

    input {
      width: 100%;
    }
  }

  input,
  .button {
    height: 35px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 100%;
    color: inherit;
  }

  input[disabled],
  .button[disabled] {
    background-color: var(--color-background-disabled);
  }

  input,
  select {
    font-family: var(--font-family-1-name);
    border: 1px solid var(--component-input-border-color);
    height: var(--component-input-height);
  }
}

.invalid-tel-message {
  position: absolute;
  top: 78px;
  font-size: var(--font-size-xs);
  padding: 4px;
  color: var(--color-error-text);
  background-color: rgb(from var(--color-error-light) r g b / 0.32);
  left: 50%;
  transform: translate(-50%);
}

.ant-input-outlined:focus-within {
  border-color: var(--component-input-active-border-color);
}

.ant-input-outlined:hover:not([disabled]),
.ant-input-number-outlined:hover:not([disabled]) {
  border-color: var(--component-input-hover-border-color);
}

.ant-input-outlined.ant-input-status-error:not(.ant-input-disabled),
.ant-input-outlined.ant-input-status-error:not(.ant-input-disabled):focus {
  border-color: var(--component-input-error-border-color);
}

.ant-input-outlined.ant-input-status-error:not(.ant-input-disabled):focus {
  border-color: var(--component-input-focus-border-color);
}

.ant-input-number-outlined:focus,
.ant-input-number-outlined:focus-within {
  border-color: var(--component-input-focus-border-color);
}

.ant-input-number .ant-input-number-input {
  font-family: var(--font-family-1-name);
}

.login-input {
  height: var(--component-input-height);
  border-color: var(--component-input-border-color);
  font-family: var(--font-family-1-name);

  &.ant-input-number-focused:not([disabled]) {
    border-color: var(--component-input-focus-border-color);
  }
}

.login-input:not(input):not(textarea):not(.ant-input-affix-wrapper) {
  & :hover {
    border-color: var(--component-input-hover-border-color);
  }
  & :disabled {
    background-color: var(--component-input-disabled-background-color);
  }
  & :active {
    border-color: var(--component-input-active-border-color);
  }

  & :focus,
  & :hover {
    box-shadow: none;
  }

  & :focus:not([disabled]) {
    border-color: var(--component-input-focus-border-color);
  }
}

/* Input.Password of Antd has an different structure */
.ant-input-affix-wrapper.login-input {
  &:hover {
    border-color: var(--component-input-hover-border-color);
  }
  &.ant-input-disabled {
    background-color: var(--component-input-disabled-background-color);
  }

  &:active {
    border-color: var(--component-input-active-border-color);
  }

  &.ant-input-affix-wrapper-focused {
    border-color: var(--component-input-focus-border-color);
  }

  &:focus,
  &:hover {
    box-shadow: none;
  }
}

input.login-input,
textarea.login-input {
  &:hover:not([disabled]) {
    border-color: var(--component-input-hover-border-color);
  }

  &:disabled {
    background-color: var(--component-input-disabled-background-color);
  }

  &:active {
    border-color: var(--component-input-active-border-color);
  }

  &:focus,
  &:hover {
    box-shadow: none;
  }

  &:focus:not([disabled]) {
    border-color: var(--component-input-focus-border-color);
  }
}

.login-input .ant-input-number-input-wrap {
  height: 100%;

  input {
    height: 100%;
  }
}

.ant-input-number-outlined {
  width: 100%;
}

.passcode-input > div > input {
  font-family: var(--font-family-1-name);
  border: 1px solid var(--dashed-border-color);
}

.passcode-input > div > input:last-child {
  border: 1px solid var(--dashed-border-color);
}

.passcode-input > div > input:first-child {
  border: 1px solid var(--dashed-border-color);
}

.passcode-input > div > input:focus + input {
  border: 1px solid var(--dashed-border-color);
}

@media screen and (max-width: 595px) {
  .ant-input {
    font-size: var(--component-input-font-size-sm, 1rem);
  }
}