:host {
  @apply block bg-white p-4;
}

.goods-in-out-order-details-tags-wrapper {
  @apply grid grid-flow-col justify-center gap-2 w-auto mx-auto;
}

.goods-in-out-order-details-tag {
  @apply w-auto text-base border border-solid bg-white border-inactive-customer py-px-10 px-5 font-bold text-inactive-customer rounded-full;

  &:focus:not(.selected) {
    @apply bg-white border-inactive-customer text-inactive-customer;
  }

  &.selected,
  &:focus-within {
    @apply bg-inactive-customer text-white;
  }

  input {
    @apply border-none outline-none text-base font-bold w-auto text-center text-inactive-customer bg-transparent p-0 m-0;
  }

  input::placeholder {
    @apply text-inactive-customer;
  }

  input:focus {
    @apply text-white;
  }

  input:focus::placeholder {
    @apply text-white;
  }

  &.selected input:not(:focus) {
    @apply text-white;
  }
}

::ng-deep .branch shared-goods-in-out-order-details-tags {
  .goods-in-out-order-details-tag {
    @apply border-inactive-branch text-inactive-branch;

    &:focus:not(.selected) {
      @apply border-inactive-branch text-inactive-branch;
    }

    &.selected,
    &:focus-within {
      @apply bg-inactive-branch;
    }

    input::placeholder {
      @apply text-inactive-branch;
    }
  }
}
