@use "component-state/form";

.pix-search-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;
  }

  &__input-container {
    position: relative;

    svg {
      position: absolute;
      bottom: calc(50% - 0.8rem);
      left: var(--pix-spacing-2x);
      fill: var(--pix-neutral-500);
    }
  }

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

    width: 100%;
    padding-left: var(--pix-spacing-10x) !important;
    border: 1px solid var(--pix-neutral-500);
  }
}