/* Styles for wrapper that is created */
.aura-input {
  display: var(--aura-display-flex);
  flex-direction: var(--aura-flex-direction-column);
  justify-content: var(--aura-justify-end);
  position: var(--aura-position-relative);
  height: var(--aura-unit-54-px);
  gap: var(--aura-unit-2-px);
}

/* Styles for native input element */
.aura-input__field {
  padding-left: var(--aura-unit-0-px);
  font-size: var(--aura-unit-18-px);
  font-family: var(--aura-font-family-book);
  color: var(--aura-secondary);
  border: var(--aura-border-type-none);
  outline: var(--aura-outline-none);
  padding-bottom: var(--aura-unit-8-px);
  padding-top: var(--aura-unit-0-px);
  border-bottom: var(--aura-unit-1-px) solid var(--aura-dark-gray);
  box-sizing: var(--aura-border-box);
}

.aura-input__field:focus-within {
  border-bottom: var(--aura-unit-2-px) solid var(--aura-gray-800);
}

/* Styles for native input element placeholder text */
/* !! Placeholder is not being used this style */
/* !! is if a user wants to use a placeholder */
.aura-input__field::placeholder {
  color: var(--aura-label-color);
  font-size: var(--aura-unit-18-px);
}

/* Styles for the floating label element */
.aura-input__floating-label {
  position: var(--aura-position-absolute);
  font-size: var(--aura-unit-18-px);
  font-family: var(--aura-font-family-book);
  line-height: var(--aura-unit-24-px);
  padding-bottom: var(--aura-unit-8-px);
  color: var(--aura-label-color);
  transition: var(--aura-transition-all) var(--aura-transition-time-point-three)
    var(--aura-transition-ease);
  pointer-events: var(--aura-pointer-event-none);
}

.aura-input__field:not(:placeholder-shown) ~ .aura-input__floating-label,
.aura-input:focus-within .aura-input__floating-label,
.aura-input:focus-within label.aura-input__floating-label,
.aura-input__field.aura-input__field--error ~ .aura-input__floating-label {
  transform: translateY(-87%);
  color: var(--aura-gray-700);
  font-size: var(--aura-unit-14-px);
  line-height: var(--aura-unit-20-px);
  letter-spacing: 0.16px;
  font-family: var(--aura-font-family-semibold);
}

/* Styles for static title element */
.aura-input__title {
  position: var(--aura-position-absolute);
  bottom: var(--aura-unit-33-px);
  color: var(--aura-gray-700);
  font-size: var(--aura-unit-14-px);
  line-height: var(--aura-unit-20-px);
  letter-spacing: 0.16px;
  font-family: var(--aura-font-family-semibold);
}

/* Styles for error state behavior */

.aura-input__field.aura-input__field--error {
  border-bottom: var(--aura-unit-2-px) var(--aura-border-type-solid)
    var(--aura-red-hover);
}

.aura-input__field.aura-input__field--error:focus-within {
  border-bottom: var(--aura-unit-2-px) var(--aura-border-type-solid)
    var(--aura-red-hover);
}

.aura-input__field.aura-input__field--error {
  padding-left: var(--aura-unit-24-px);
  background: var(--aura-input-error-alert) no-repeat;
  background-position-y: var(--aura-unit-3-px);
}

.aura-input__field-error-icon {
  align-items: var(--aura-align-items-center);
}

/* Styles for disabled state behavior */
.aura-input--disabled {
  pointer-events: var(--aura-pointer-event-none);
}

.aura-input__field.aura-input__field--disabled {
  color: var(--aura-label-color);
  border-bottom: var(--aura-unit-1-px) var(--aura-border-type-solid)
    var(--aura-matte-gray);
}

.aura-input__field::placeholder.aura-input__field--disabled {
  color: var(--aura-label-color);
}