@use "pix-design-tokens/typography";
@use "component-state/form";

.pix-input-password {
  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;
  }

  &__container {
    @extend %pix-form-element-state;

    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--pix-neutral-500);
    border-radius: var(--pix-spacing-1x);

    &--error {
      @extend %pix-form-error-state;

      padding-right: var(--pix-spacing-6x);
    }

    &--success {
      @extend %pix-form-success-state;

      padding-right: var(--pix-spacing-6x);
    }

    input {
      @extend %pix-input-default;
      @extend %pix-monospace;

      flex-grow: 1;
      background-color: transparent;
      border: none;
      outline: none;
    }
  }

  &__with-prefix {
    input {
      padding-left: 0;
    }
  }

  &__prefix {
    padding: 0 var(--pix-spacing-1x) 0 var(--pix-spacing-2x);
  }

  &__button {
    margin-right: var(--pix-spacing-1x);

    &:hover,
    &:active,
    &:focus {
      color: var(--pix-neutral-900);
      background-color: transparent;
    }
  }

  &__icon {
    position: absolute;
    right: 12px;
    width: 1rem;
    height: 1rem;
    padding: 2px;
    color: var(--pix-neutral-0);
    border-radius: 50%;
  }

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

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

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