.nu-text-field-wrapper {
  display: flex;
  margin: 4px 12px;
  box-sizing: border-box;
  align-items: flex-start;
  justify-items: flex-start;
  --focused-color: var(--primary);
}

.nu-text-field-container {
  cursor: text;
  position: relative;
  box-sizing: border-box;
}

.nu-text-field {
  outline: none;
  border: none;
  height: 40px;
  font-size: 16px;
  min-height: 40px;
  padding: 0px 16px;
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--text-color);
  background: var(--bg-color);
  box-shadow: var(--box-shadow-inset);
  transition: box-shadow 0.2s ease-in-out;
}

.nu-text-field.nu-text-field-text-area {
  resize: vertical;
  padding: 11px 16px 9px 16px;
}

.nu-text-field-container.nu-text-field-container--disabled {
  opacity: 0.6;
  user-select: none;
  pointer-events: none;
  color: var(--disabled-color);
}

.nu-text-field-container--dense .nu-text-field {
  height: 32px;
  min-height: 32px;
  padding: 0px 16px;
}

.nu-text-field-container--dense .nu-text-field.nu-text-field-text-area {
  height: 32px;
  min-height: 32px;
  padding: 7px 16px 5px 16px;
}

.nu-text-field.nu-text-field--light {
  --bg-color: var(--light-bg);
  --selector-bg: var(--text-secondary);
  --text-color: var(--g-text-color-light);
  --border-color: var(--light-bg-light-shadow);
  --text-secondary: var(--g-text-color-secondary-light);
  --disabled-color: var(--g-text-color-disabled-light);
  --box-shadow-inset: inset 2px 2px 5px var(--light-bg-dark-shadow),
    inset -2px -2px 6px var(--light-bg-light-shadow);
  --box-shadow-inset-thin: inset 1px 1px 2px var(--light-bg-dark-shadow),
    inset -1px -1px 2px var(--light-bg-light-shadow);
}

.nu-text-field.nu-text-field--dark {
  --bg-color: var(--dark-bg);
  --selector-bg: var(--text-secondary);
  --text-color: var(--g-text-color-dark);
  --border-color: var(--dark-bg-light-shadow);
  --text-secondary: var(--g-text-color-secondary-dark);
  --disabled-color: var(--g-text-color-disabled-dark);
  --box-shadow-inset: inset 2px 2px 5px var(--dark-bg-dark-shadow),
    inset -2px -2px 6px var(--dark-bg-light-shadow);
  --box-shadow-inset-thin: inset 1px 1px 2px var(--dark-bg-dark-shadow),
    inset -1px -1px 2px var(--dark-bg-light-shadow);
}

.nu-text-field.nu-text-field--disabled::placeholder,
.nu-text-field.nu-text-field--disabled {
  user-select: none;
  pointer-events: none;
  color: var(--disabled-color);
}

.nu-text-field.nu-text-field--disabled {
  box-shadow: var(--box-shadow-inset);
}

.nu-text-field.nu-text-field--bordered {
  border: 1px solid var(--border-color);
}

.nu-text-field.nu-text-field--rounded,
.nu-text-field-container.nu-text-field-container--rounded {
  border-radius: 24px;
}

/* hover and focus */
.nu-text-field:hover,
.nu-text-field:focus {
  box-shadow: var(--box-shadow-inset-thin);
}

.nu-text-field.nu-text-field--outlined:hover,
.nu-text-field.nu-text-field--outlined:focus {
  --selector-bg: var(--text-color);
}

.nu-text-field.nu-text-field--outlined,
.nu-text-field.nu-text-field--outlined:hover {
  box-shadow: none !important;
  border: 1px solid var(--selector-bg);
}

.nu-text-field.nu-text-field--outlined:focus {
  --selector-bg: var(--primary);
  transition: none;
  border: 1.5px solid var(--selector-bg);
}

.nu-text-field.nu-text-field--disabled:hover,
.nu-text-field.nu-text-field--disabled:focus {
  box-shadow: var(--box-shadow-inset);
}
/* end of hover and focus */

.nu-text-field-label {
  z-index: 2;
  top: 11px;
  left: 17px;
  right: auto;
  user-select: none;
  position: absolute;
  cursor: text !important;
}

.nu-text-field-container--dense .nu-text-field-label {
  top: 6px;
}

.nu-text-field-caption-wrapper {
  width: 100%;
  display: flex;
  margin-top: 4px;
  align-items: center;
  justify-content: space-between;
}

.nu-text-field-error,
.nu-text-field-hint {
  height: 12px;
  padding-left: 16px;
  transition: none !important;
  transition: all 0.3s ease-in-out;
}

.nu-text-field-error {
  color: var(--error);
}

.nu-text-field-counter {
  padding-left: 8px;
  padding-right: 16px;
}

.nu-text-field-loading {
  top: -2px;
  left: 50%;
  position: absolute;
  width: calc(100% - 16px);
  transform: translateX(-50%);
}

.nu-text-field-container--rounded .nu-text-field-loading {
  width: calc(100% - 36px);
}

.nu-text-field-prepend,
.nu-text-field-append {
  padding-top: 8px;
}

.nu-text-field-append {
  padding-left: 16px;
}
.nu-text-field-prepend {
  padding-right: 16px;
}
