@use "component-state/form";

.pix-filterable-and-searchable-select {
  display: flex;
  max-width: 100%;
  border-radius: var(--pix-spacing-1x);

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

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

  .pix-select {
    flex: 1 1 0%;
  }

  .pix-multi-select {
    [role="menu"] {
      width: fit-content;
    }
  }

  &__pix-multi-select {
    position: relative;
    border-right: none;
    border-radius: var(--pix-spacing-1x) 0 0 var(--pix-spacing-1x);

    &:after {
      position: absolute;
      right: -2px;
      z-index: 1;
      width: 2px;
      height: 22px;
      background-color: var(--pix-neutral-100);
      border-radius: 50px;
      content: '';
    }
  }

  &__pix-select {
    width: 100%;
    border-left: none;
    border-radius: 0 var(--pix-spacing-1x) var(--pix-spacing-1x) 0;
  }
}