/* src/input/src/Input.css */
.o-ui {
  --o-ui-input-padding: var(--hop-space-inset-squish-md);
  --o-ui-input-padding-with-icon: var(--hop-space-inset-xl);
  --o-ui-input-padding-with-button: 2.5rem;
  --o-ui-input-padding-loading: 2.5rem;
  --o-ui-input-sm-padding: var(--hop-space-inset-squish-sm);
  --o-ui-input-border-color: var(--hop-neutral-border);
  --o-ui-input-border-radius: var(--hop-shape-rounded-md);
  --o-ui-input-background-color: var(--hop-neutral-surface);
  --o-ui-input-height: 2.5rem;
  --o-ui-input-sm-height: 2rem;
}
.o-ui-input {
  display: inline-flex;
  position: relative;
  transition: var(--o-ui-focus-ring-transition);
  color: var(--hop-neutral-text);
  font-family: var(--hop-body-md-font-family);
  font-size: var(--hop-body-md-font-size);
  width: 20rem;
  align-items: center;
}
.o-ui-input input {
  -webkit-appearance: none;
  font-family: inherit;
  font-size: inherit;
  outline: transparent;
  border: none;
  width: 100%;
  background-color: inherit;
  color: var(--hop-neutral-text);
  min-height: calc(var(--o-ui-input-height) - 2px);
  margin: 0;
  padding: 0;
}
.o-ui-input-sm input {
  min-height: calc(var(--o-ui-input-sm-height) - 2px);
}
.o-ui-input textarea {
  width: 100%;
}
.o-ui-input[type=text]::-ms-clear,
.o-ui-input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.o-ui-text-input,
.o-ui-text-area textarea,
.o-ui-number-input {
  font-size: var(--hop-body-md-font-size);
  padding: 0;
  border-radius: var(--o-ui-input-border-radius);
  border: 1px solid var(--o-ui-input-border-color);
  background-color: var(--o-ui-input-background-color);
  transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive), padding 0s linear;
  line-height: inherit;
  font-family: inherit;
}
.o-ui-text-input.o-ui-input-sm {
  font-size: var(--hop-body-sm-font-size);
}
.o-ui-text-input input,
.o-ui-text-area textarea,
.o-ui-number-input input {
  padding: var(--o-ui-input-padding);
}
.o-ui-text-input.o-ui-input-sm input {
  padding: var(--o-ui-input-sm-padding);
}
.o-ui-text-input input,
.o-ui-text-area {
  border-radius: var(--o-ui-input-border-radius);
}
.o-ui-number-input input {
  border-top-left-radius: var(--o-ui-input-border-radius);
  border-bottom-left-radius: var(--o-ui-input-border-radius);
}
.o-ui-text-input.o-ui-input-has-button input {
  padding-right: 0.25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.o-ui-text-input.o-ui-input-has-icon input,
.o-ui-number-input.o-ui-input-has-icon input {
  padding-left: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.o-ui-input input::selection,
.o-ui-input textarea::selection {
  background-color: var(--hop-primary-surface-selected);
}
.o-ui-input input:-webkit-autofill,
.o-ui-input textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--hop-primary-surface-weak) inset !important;
  -webkit-text-fill-color: var(--hop-neutral-text) !important;
}
.o-ui-input input::placeholder,
.o-ui-input textarea::placeholder {
  color: var(--hop-neutral-text-weakest);
  opacity: 1;
  font-size: inherit;
}
.o-ui-input-disabled input::placeholder,
.o-ui-input textarea:disabled::placeholder {
  color: var(--hop-neutral-text-disabled);
}
.o-ui-input.o-ui-input-fluid {
  width: 100%;
}
.o-ui-input-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  color: var(--hop-neutral-icon);
}
.o-ui-input-has-icon {
  padding-left: 0;
}
.o-ui-text-input .o-ui-input-button,
.o-ui-number-input .o-ui-input-button {
  display: flex;
  text-align: center;
  margin-right: .625rem;
  margin-left: .625rem;
}
.o-ui-input-has-button.o-ui-text-input,
.o-ui-input-has-button.o-ui-number-input {
  padding-right: 0;
}
.o-ui-input:not(.o-ui-input-disabled):hover,
.o-ui-input:hover textarea:not(:disabled),
.o-ui-input-hover:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled) {
  --o-ui-input-border-color: var(--hop-neutral-border-hover);
  --o-ui-input-background-color: var(--hop-neutral-surface-hover);
}
.o-ui-text-input:not(.o-ui-input-disabled).o-ui-input-has-focus,
.o-ui-number-input:not(.o-ui-input-disabled):focus-within,
.o-ui-text-area:not(.o-ui-input-disabled).o-ui-input-has-focus textarea,
.o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled) {
  --o-ui-input-border-color: var(--hop-primary-border-focus);
  --o-ui-input-background-color: var(--hop-neutral-surface);
  outline: none;
}
.o-ui-text-input:not(.o-ui-input-disabled).o-ui-input-has-focus:hover,
.o-ui-text-input:not(.o-ui-input-disabled).o-ui-input-focus.o-ui-input-hover,
.o-ui-number-input:not(.o-ui-input-disabled):focus-within:hover,
.o-ui-text-area:not(.o-ui-input-disabled).o-ui-input-has-focus textarea:hover,
.o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled):hover,
.o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled).o-ui-input-hover {
  --o-ui-input-border-color: var(--hop-primary-border-focus);
}
.o-ui-text-input.o-ui-input-disabled,
.o-ui-number-input.o-ui-input-disabled,
.o-ui-input textarea:disabled {
  --o-ui-input-background-color: var(--hop-neutral-surface-disabled);
  --o-ui-input-border-color: var(--hop-neutral-border-disabled);
  cursor: not-allowed;
}
.o-ui-input-disabled > * {
  cursor: not-allowed;
}
.o-ui-input-invalid:not(.o-ui-input-disabled),
.o-ui-input-invalid textarea:not(:disabled) {
  --o-ui-input-border-color: var(--hop-danger-border-strong);
}
.o-ui-input.o-ui-input-invalid:not(.o-ui-input-focus):not(.o-ui-input-disabled):hover,
.o-ui-input.o-ui-input-invalid:not(.o-ui-input-focus):hover textarea:not(:disabled),
.o-ui-input-hover.o-ui-input-invalid:not(.o-ui-input-focus):not(.o-ui-input-disabled) {
  --o-ui-input-border-color: var(--hop-danger-border-strong);
}
.o-ui-input-invalid.o-ui-text-input:not(.o-ui-input-disabled).o-ui-input-has-focus,
.o-ui-input-invalid.o-ui-number-input:not(.o-ui-input-disabled):focus-within,
.o-ui-input-invalid.o-ui-text-area:not(.o-ui-input-disabled).o-ui-input-has-focus textarea,
.o-ui-input-invalid.o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled) {
  --o-ui-input-border-color: var(--hop-primary-border-focus);
}
.o-ui-input-invalid.o-ui-text-input:not(.o-ui-input-disabled).o-ui-input-has-focus:hover,
.o-ui-input-invalid.o-ui-text-input:not(.o-ui-input-disabled).o-ui-input-focus.o-ui-input-hover,
.o-ui-input-invalid.o-ui-number-input:not(.o-ui-input-disabled):focus-within:hover,
.o-ui-input-invalid.o-ui-text-area:not(.o-ui-input-disabled).o-ui-input-has-focus textarea:hover,
.o-ui-input-invalid.o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled):hover,
.o-ui-input-invalid.o-ui-input-focus:not(.o-ui-input-disabled):not(.o-ui-has-button-disabled).o-ui-input-hover {
  --o-ui-input-border-color: var(--hop-primary-border-focus);
}
@keyframes o-ui-input-spinner {
  0% {
    transform: translate(0, -50%) rotate(0deg);
  }
  100% {
    transform: translate(0, -50%) rotate(360deg);
  }
}
.o-ui-input-spinner {
  position: absolute;
  right: calc((var(--o-ui-input-padding-with-button) - var(--o-ui-sp-5)) / 2);
  z-index: 1;
}
.o-ui-input-loading .o-ui-button {
  display: none;
}
.o-ui-text-input.o-ui-input-loading,
.o-ui-number-input.o-ui-input-loading,
.o-ui-text-area.o-ui-input-loading textarea {
  padding-right: var(--o-ui-input-padding-loading);
}

/* src/input/src/index.css */