@use "component-state/form";

.pix-input {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--pix-spacing-1x);

  &--inline {
    flex-direction: row;
    gap: var(--pix-spacing-2x);
    align-items: center;
  }

  &--full-width {
    width: 100%;
  }

  &__container {
    position: relative;
  }

  &__field-container {
    flex-grow: 1;
  }

  svg {
    position: absolute;
    right: 12px;
    bottom: calc(50% - 7px); // height/2 + padding
    width: 1rem;
    height: 1rem;
    padding: 2px;
    border-radius: 50%;
    fill: var(--pix-neutral-0);

    &.pix-input__error-icon {
      background: var(--pix-error-700);
    }

    &.pix-input__success-icon {
      background: var(--pix-success-700);
    }
  }

  &__error-message {
    @extend %pix-input-error-message;
  }

  &__input {
    @extend %pix-input-default;
    @extend %pix-form-element-state;

    width: 100%;
    border: 1px solid var(--pix-neutral-500);

    &::placeholder {
      color: var(--pix-neutral-500);
    }
  }
}

.pix-input .pix-input__input--error {
  @extend %pix-form-error-state;

  padding-right: 2rem;
}

.pix-input .pix-input__input--success {
  @extend %pix-form-success-state;

  padding-right: 2rem;
}