/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  --input-color: var(--joy-color-neutral-60);
  --input-focus-color: var(--joy-color-secondary-30);
  --input-hover-color: var(--joy-color-neutral-60);
  --input-hover-border-color: var(--joy-color-state-hover);
  --input-focus-border-color: var(--joy-color-state-focus);
  --input-border-color: var(--joy-color-neutral-30);
  --input-bg-color: white;
  --input-color-disabled: var(--joy-color-neutral-40);
  --input-border-color-disabled: var(--joy-color-neutral-30);
  --input-bg-color-disabled: var(--joy-color-neutral-10);
  --input-color-invalid: var(--joy-color-error-50);
  --input-color-invalid-hover: var(--joy-color-error-90);
  --input-icon-color: var(--joy-color-neutral-50);
  --input-transition-duration: var(--joy-transition-duration-default);
  display: block;
}

:host(.joy-input--small) {
  --input-height: var(--joy-form-field-height-small);
  --input-radius: var(--joy-form-field-radius-small);
  --input-padding: var(--joy-core-spacing-1) var(--joy-core-spacing-5);
  --input-font-size: var(--joy-font-size-primary-300);
  --input-unit-height: 32px;
}

:host(.joy-input--medium) {
  --input-height: var(--joy-form-field-height-medium);
  --input-radius: var(--joy-form-field-radius-medium);
  --input-padding: var(--joy-core-spacing-1) var(--joy-core-spacing-5);
  --input-font-size: var(--joy-font-size-primary-400);
  --input-unit-height: 40px;
}

:host(.joy-input--large) {
  --input-height: var(--joy-form-field-height-large);
  --input-radius: var(--joy-form-field-radius-large);
  --input-padding: var(--joy-core-spacing-1) var(--joy-core-spacing-5);
  --input-font-size: var(--joy-font-size-primary-400);
  --input-unit-height: 56px;
}

.joy-input {
  position: relative;
  font-family: var(--joy-font-family-base);
}
.joy-input input {
  position: relative;
  font-family: inherit;
  margin: 0;
  z-index: 1;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--input-bg-color);
  border-width: var(--joy-form-border-width);
  border-style: solid;
  border-color: var(--input-border-color);
  transition: all var(--input-transition-duration) var(--joy-transition-timing-function);
  border-radius: var(--input-radius);
  height: var(--input-height);
  color: var(--input-color);
  font-size: var(--input-font-size);
  padding: var(--input-padding);
  outline: none;
}
.joy-input input::-webkit-input-placeholder {
  font-family: inherit;
  color: var(--joy-color-neutral-40);
  line-height: normal !important;
  padding: 4px 0;
}
.joy-input input::-webkit-outer-spin-button, .joy-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.joy-input input::-webkit-search-cancel-button {
  appearance: none;
}
.joy-input input[type=number] {
  -moz-appearance: textfield;
}
.joy-input input[type=password] {
  font-family: Verdana;
  letter-spacing: 0.125em;
}
.joy-input input {
  transition: border-color var(--joy-transition-duration-default) var(--joy-transition-timing-function);
}
.joy-input input:hover {
  border-color: var(--joy-color-state-hover);
}
.joy-input input:hover ~ joy-icon {
  color: var(--input-hover-color);
}
.joy-input input:hover ~ .joy-input--unit {
  border-color: var(--input-hover-color);
}
.joy-input input {
  transition: border-color var(--joy-transition-duration-default) var(--joy-transition-timing-function);
}
.joy-input input:focus {
  border-color: var(--joy-color-state-focus);
}
.joy-input input:focus ~ joy-icon {
  color: var(--input-focus-color);
}
.joy-input input:focus ~ .joy-input--unit {
  border-color: var(--input-focus-border-color);
}
.joy-input joy-icon {
  color: var(--input-color);
}
.joy-input .joy-input--password-icon {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  right: var(--joy-core-spacing-4);
}
.joy-input .joy-input--wrapper {
  display: flex;
  align-items: center;
  position: relative;
}
.joy-input .joy-input--wrapper-margin {
  margin-bottom: var(--joy-core-spacing-4);
}
.joy-input .joy-input--wrapper-has-icon joy-icon {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  left: var(--joy-core-spacing-4);
}
.joy-input .joy-input--wrapper-has-icon input {
  padding-left: var(--joy-core-spacing-10);
}
.joy-input .joy-input--wrapper-unit input {
  border-right: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.joy-input .joy-input--unit {
  display: flex;
  align-items: center;
  padding-right: 4px;
  cursor: default;
  position: relative;
  background-color: var(--input-bg-color);
  height: var(--input-height);
  border-radius: 0 var(--input-height) var(--input-height) 0;
  text-align: center;
  font-style: normal;
  flex-shrink: 0;
  box-sizing: border-box;
  border-width: var(--joy-form-border-width);
  border-style: solid;
  border-color: var(--input-border-color);
  transition: all var(--input-transition-duration) var(--joy-transition-timing-function);
  border-left: 0;
}
.joy-input .joy-input--unit:before {
  content: attr(data-unit);
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: var(--joy-color-secondary-10);
  border-radius: var(--input-unit-height);
  font-size: var(--input-font-size);
  height: var(--input-unit-height);
  min-width: var(--input-unit-height);
  padding: 0 var(--joy-core-spacing-3);
  color: var(--joy-color-secondary-50);
}
.joy-input input:disabled, .joy-input input:disabled:hover {
  cursor: not-allowed;
  background-color: var(--input-bg-color-disabled);
  border-color: var(--input-border-color-disabled);
  color: var(--input-color-disabled);
}
.joy-input input:disabled ~ joy-icon, .joy-input input:disabled:hover ~ joy-icon {
  color: var(--input-color-disabled);
}
.joy-input input:disabled ~ .joy-input--unit, .joy-input input:disabled:hover ~ .joy-input--unit {
  background-color: var(--input-bg-color-disabled);
  border-color: var(--input-border-color-disabled);
}
.joy-input input.joy-input--field-invalid {
  border-color: var(--input-color-invalid);
  color: var(--input-color-invalid);
}
.joy-input input.joy-input--field-invalid ~ joy-icon {
  color: var(--input-color-invalid);
}
.joy-input input.joy-input--field-invalid ~ .joy-input--unit {
  border-color: var(--input-color-invalid);
}
.joy-input input.joy-input--field-invalid:hover, .joy-input input.joy-input--field-invalid:focus {
  border-color: var(--input-color-invalid-hover);
  /*color: var(--input-color-invalid-hover);*/
}
.joy-input input.joy-input--field-invalid:hover ~ joy-icon, .joy-input input.joy-input--field-invalid:focus ~ joy-icon {
  color: var(--input-color-invalid-hover);
}
.joy-input input.joy-input--field-invalid:hover ~ .joy-input--unit, .joy-input input.joy-input--field-invalid:focus ~ .joy-input--unit {
  border-color: var(--input-color-invalid-hover);
}
.joy-input--wrapper---clearable input {
  padding-right: var(--joy-core-spacing-10);
}
.joy-input--clear {
  cursor: pointer;
  position: absolute;
  top: 50%;
  z-index: 2;
  right: var(--joy-core-spacing-5);
  transform: translateY(-50%);
}