:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  // Wrapper
  --neeto-ui-input-wrapper-flex-grow: 1;

  // Label Wrapper
  --neeto-ui-input-label-wrapper-gap: 0.5rem;

  // Label
  --neeto-ui-input-label-overflow-wrap: break-word;
  --neeto-ui-input-label-margin: 0.5rem;

  // Max Length
  --neeto-ui-input-max-length-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-input-max-length-color: rgb(var(--neeto-ui-gray-700));
  --neeto-ui-input-max-length-line-height: 1;

  // Input
  --neeto-ui-input-padding-x: 0px;
  --neeto-ui-input-padding-y: 0px;
  --neeto-ui-input-min-height: 0px;
  --neeto-ui-input-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-input-border-width: 1px;
  --neeto-ui-input-border-color: rgb(var(--neeto-ui-gray-400));
  --neeto-ui-input-border-radius: var(--neeto-ui-rounded);
  --neeto-ui-input-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-input-bg-color: rgb(var(--neeto-ui-white));
  --neeto-ui-input-line-height: 1.2;

  // Textarea
  --neeto-ui-textarea-padding-x: 0px;
  --neeto-ui-textarea-padding-y: 0px;
  --neeto-ui-textarea-line-height: 1.5;
  --neeto-ui-textarea-max-height: 14rem;

  // Placeholder
  --neeto-ui-input-placeholder-color: rgb(var(--neeto-ui-gray-400));

  // Focus
  --neeto-ui-input-focus-outline-color: transparent;

  // Hover
  --neeto-ui-input-hover-border-color: rgb(var(--neeto-ui-gray-700));

  // Focus Within
  --neeto-ui-input-focus-within-border-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-input-focus-within-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-primary-500), 15%);

  // Prefix & Suffix
  --neeto-ui-input-prefix-suffix-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-input-prefix-suffix-color: rgb(var(--neeto-ui-gray-700));
  --neeto-ui-input-prefix-suffix-bg-color: transparent;
  --neeto-ui-input-prefix-suffix-line-height: 1;
  --neeto-ui-input-prefix-suffix-icon-size: 1rem;
  --neeto-ui-input-prefix-suffix-margin: 0px;
  --neeto-ui-input-prefix-suffix-padding-x: 0px;
  --neeto-ui-input-prefix-suffix-border-width: 0px;
  --neeto-ui-input-prefix-suffix-border-color: transparent;

  // Help Text
  --neeto-ui-input-help-text-margin: 0.5rem;
  --neeto-ui-input-help-text-font-size: var(--neeto-ui-text-xs);
  --neeto-ui-input-help-text-color: rgb(var(--neeto-ui-gray-700));
  --neeto-ui-input-help-text-line-height: 1.1;

  // Warning Text
  --neeto-ui-input-warning-text-margin: 0.5rem;
  --neeto-ui-input-warning-text-font-size: var(--neeto-ui-text-xs);
  --neeto-ui-input-warning-text-color: rgb(var(--neeto-ui-warning-800));
  --neeto-ui-input-warning-text-line-height: 1.1;

  // Error Text
  --neeto-ui-input-error-text-margin: 0.5rem;
  --neeto-ui-input-error-text-font-size: var(--neeto-ui-text-xs);
  --neeto-ui-input-error-text-color: rgb(var(--neeto-ui-error-800));
  --neeto-ui-input-error-text-line-height: 1.1;
}

.neeto-ui-input__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: var(--neeto-ui-input-wrapper-flex-grow);

  .neeto-ui-input__label-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: var(--neeto-ui-input-label-wrapper-gap);

    .neeto-ui-label {
      flex-grow: 1;
      overflow-wrap: var(--neeto-ui-input-label-overflow-wrap);
    }

    .neeto-ui-input__max-length {
      font-size: var(--neeto-ui-input-max-length-font-size);
      color: var(--neeto-ui-input-max-length-color);
      line-height: var(--neeto-ui-input-max-length-line-height);
      margin-bottom: var(--neeto-ui-input-label-margin);
      margin-left: auto;

      &.neeto-ui-input__max-length--error {
        --neeto-ui-input-max-length-color: rgb(var(--neeto-ui-error-800));
      }
    }
  }

  .neeto-ui-label {
    margin-bottom: var(--neeto-ui-input-label-margin);
  }

  .neeto-ui-input {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--neeto-ui-input-font-size);
    transition: var(--neeto-ui-transition);
    border-radius: var(--neeto-ui-input-border-radius);
    border: var(--neeto-ui-input-border-width) solid var(--neeto-ui-input-border-color);
    background-color: var(--neeto-ui-input-bg-color);
    color: var(--neeto-ui-input-color);
    overflow: hidden;

    input,
    textarea {
      width: 100%;
      background-color: transparent;
      color: inherit;
      border: none;
      font-size: inherit;
      box-shadow: none;
      outline: none;

      &::placeholder {
        color: var(--neeto-ui-input-placeholder-color);
      }

      &:focus {
        outline-color: var(--neeto-ui-input-focus-outline-color);
      }
    }

    input {
      line-height: var(--neeto-ui-input-line-height);
      padding: var(--neeto-ui-input-padding-y) var(--neeto-ui-input-padding-x);
      min-height: var(--neeto-ui-input-min-height);
    }

    textarea {
      padding: 0px;
      max-height: var(--neeto-ui-textarea-max-height);
      overflow-y: auto;
      line-height: var(--neeto-ui-input-line-height);
      resize: vertical;
    }

    &.neeto-ui-input--textarea {
      &.neeto-ui-input--resize--none{
        textarea {
          resize: none;
        }
      }

      padding: var(--neeto-ui-textarea-padding-y) var(--neeto-ui-textarea-padding-x);
      align-items: flex-start;

      .neeto-ui-input__prefix,
      .neeto-ui-input__suffix {
        margin: 0;
        padding: 0;
        min-height: 0;
      }
    }

    &:hover:not(.neeto-ui-input--naked, .neeto-ui-input--error, .neeto-ui-input--disabled) {
      border-color: var(--neeto-ui-input-hover-border-color);
    }

    &:focus-within:not(.neeto-ui-input--naked) {
      border-color: var(--neeto-ui-input-focus-within-border-color);
      box-shadow: var(--neeto-ui-input-focus-within-box-shadow);

      .neeto-ui-input__prefix,
      .neeto-ui-input__suffix {
        --neeto-ui-input-prefix-suffix-color: rgb(var(--neeto-ui-gray-800));
      }
    }

    &.neeto-ui-input--error {
      --neeto-ui-input-border-color: rgb(var(--neeto-ui-error-500));
      --neeto-ui-input-focus-within-border-color: rgb(var(--neeto-ui-error-500));
      --neeto-ui-input-focus-within-box-shadow: 0 0 0 3px rgb(var(--neeto-ui-error-100));

      textarea {
        resize: none;
      }
    }

    &.neeto-ui-input--disabled {
      --neeto-ui-input-bg-color: rgb(var(--neeto-ui-gray-100));
      cursor: not-allowed;

      input {
        cursor: not-allowed;
      }

      textarea {
        cursor: not-allowed;
      }
    }

    &.neeto-ui-input--small {
      --neeto-ui-input-padding-x: 0.5rem;
      --neeto-ui-input-padding-y: 0.25rem;
      --neeto-ui-input-min-height: 1.625rem;

      --neeto-ui-input-prefix-suffix-margin: 0.5rem;

      --neeto-ui-textarea-padding-x: 0.5rem;
      --neeto-ui-textarea-padding-y: 0.25rem;
    }

    &.neeto-ui-input--medium {
      --neeto-ui-input-padding-x: 0.5rem;
      --neeto-ui-input-padding-y: 0.3125rem;
      --neeto-ui-input-min-height: 1.875rem;

      --neeto-ui-input-prefix-suffix-margin: 0.5rem;

      --neeto-ui-textarea-padding-x: 0.5rem;
      --neeto-ui-textarea-padding-y: 0.5rem;
    }

    &.neeto-ui-input--large {
      --neeto-ui-input-padding-x: 0.75rem;
      --neeto-ui-input-padding-y: 0.5rem;
      --neeto-ui-input-min-height: 2.375rem;

      --neeto-ui-input-prefix-suffix-margin: 0.75rem;

      --neeto-ui-textarea-padding-x: 0.75rem;
      --neeto-ui-textarea-padding-y: 0.75rem;
    }

    &.neeto-ui-input--naked {
      --neeto-ui-input-border-width: 0px;
      --neeto-ui-input-padding-x: 0px;
      --neeto-ui-input-padding-y: 0px;

      --neeto-ui-input-prefix-suffix-margin: 0px;

      --neeto-ui-textarea-padding-x: 0px;
      --neeto-ui-textarea-padding-y: 0px;
    }

    &.neeto-ui-input--block-add-on {
      --neeto-ui-input-prefix-suffix-margin: 0px;
      --neeto-ui-input-prefix-suffix-padding-x: 0.75rem;
      --neeto-ui-input-prefix-suffix-bg-color: rgb(var(--neeto-ui-gray-100));
      --neeto-ui-input-prefix-suffix-border-width: 1px;
      --neeto-ui-input-prefix-suffix-border-color: rgb(var(--neeto-ui-gray-400));
    }
  }

  .neeto-ui-input__prefix,
  .neeto-ui-input__suffix {
    display: flex;
    white-space: nowrap !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--neeto-ui-input-prefix-suffix-font-size);
    color: var(--neeto-ui-input-prefix-suffix-color);
    background-color: var(--neeto-ui-input-prefix-suffix-bg-color);
    padding: 4px var(--neeto-ui-input-prefix-suffix-padding-x);
    line-height: var(--neeto-ui-input-prefix-suffix-line-height);
    min-height: var(--neeto-ui-input-min-height);

    svg {
      width: var(--neeto-ui-input-prefix-suffix-icon-size);
      height: var(--neeto-ui-input-prefix-suffix-icon-size);
    }
  }

  .neeto-ui-input__prefix {
    margin-left: var(--neeto-ui-input-prefix-suffix-margin);
    border-right: var(--neeto-ui-input-prefix-suffix-border-width) solid var(--neeto-ui-input-prefix-suffix-border-color);
  }

  .neeto-ui-input__suffix {
    margin-right: var(--neeto-ui-input-prefix-suffix-margin);
    border-left: var(--neeto-ui-input-prefix-suffix-border-width) solid var(--neeto-ui-input-prefix-suffix-border-color);
  }
}

.neeto-ui-input__help-text {
  margin-top: var(--neeto-ui-input-help-text-margin);
  font-size: var(--neeto-ui-input-help-text-font-size);
  color: var(--neeto-ui-input-help-text-color);
  line-height: var(--neeto-ui-input-help-text-line-height);
}

.neeto-ui-input__error {
  margin-top: var(--neeto-ui-input-error-text-margin);
  font-size: var(--neeto-ui-input-error-text-font-size);
  color: var(--neeto-ui-input-error-text-color);
  line-height: var(--neeto-ui-input-error-text-line-height);
}

.neeto-ui-input__warning {
  margin-top: var(--neeto-ui-input-warning-text-margin);
  font-size: var(--neeto-ui-input-warning-text-font-size);
  color: var(--neeto-ui-input-warning-text-color);
  line-height: var(--neeto-ui-input-warning-text-line-height);
}

.neetix-input {
  --neeto-ui-input-border-radius: var(--neeto-ui-rounded-none);
  --neeto-ui-input-focus-within-border-color: rgb(var(--neeto-ui-success-500));
  --neeto-ui-input-focus-within-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-success-500), 15%);
}

.neetix-textarea {
  --neeto-ui-input-border-radius: var(--neeto-ui-rounded-none);
  --neeto-ui-input-focus-within-border-color: rgb(var(--neeto-ui-success-500));
  --neeto-ui-input-focus-within-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-success-500), 15%);
}
