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

.page-pickup-shelf-details-tags__wrapper {
  @apply grid grid-flow-col justify-center gap-2 w-auto mx-auto;
}

.page-pickup-shelf-details-tags__tag {
  @apply w-auto text-p2 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-p2 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;
  }
}
