:host {
  @apply flex flex-col w-full;
}

.page-pickup-shelf-list-item__item-card {
  @apply grid grid-flow-col;
  grid-template-columns: auto;
  box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5);
}

.page-pickup-shelf-list-item__item-grid-container {
  @apply grid grid-flow-row gap-y-[0.375rem] gap-x-4;
  grid-template-columns: 3.125rem auto;
  grid-template-rows: 2rem auto;
  grid-template-areas:
    "extras extras extras"
    "thumbnail details details"
    ". info select"
    ". comment comment";
}

.page-pickup-shelf-list-item__item-grid-container-main {
  @apply gap-x-6;
  grid-template-rows: auto;
  grid-template-columns: 3.125rem 35% auto auto 3rem;
  grid-template-areas:
    "thumbnail details info extras select"
    ". comment comment . .";
}

.page-pickup-shelf-list-item__item-grid-container-secondary {
  @apply gap-x-6;
  grid-template-rows: auto;
  grid-template-columns: 3.125rem 35% auto;
  grid-template-areas:
    "thumbnail details info extras"
    ". comment comment .";
}

.page-pickup-shelf-list-item__item-thumbnail {
  grid-area: thumbnail;
  @apply flex flex-col items-center gap-2;
}

.page-pickup-shelf-list-item__item-image {
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.197935);
}

.page-pickup-shelf-list-item__item-title-bigger-text-size {
  @apply text-p1;
}

.page-pickup-shelf-list-item__item-title-contributors {
  grid-area: details;
}

.page-pickup-shelf-list-item__item-ean-quantity-changed {
  grid-area: info;
}

.page-pickup-shelf-list-item__item-order-number-processing-status-paid {
  grid-area: extras;
}

.page-pickup-shelf-list-item__item-select-bullet {
  grid-area: select;
}

.page-pickup-shelf-list-item__item-select-bullet-primary {
  @apply self-end;
}

.page-pickup-shelf-list-item__item-special-comment {
  grid-area: comment;
}

.active,
.hover:hover {
  @apply bg-[#D8DFE5] border border-solid border-[#0556B4];
}

.page-pickup-shelf-list-item__item-select-bullet.isa-select-bullet::before {
  @apply bg-[#fff];
}

.page-pickup-shelf-list-item__item-select-bullet.isa-select-bullet:checked:before {
  @apply bg-[#596470];
}

.page-pickup-shelf-list-item__item-select-bullet.isa-select-bullet:hover::before {
  @apply bg-[#778490];
}
