:host {
  @apply flex flex-col w-full h-[13.25rem] desktop-small:h-[11.3125rem];
}

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

.page-search-result-item__item-grid-container {
  @apply grid grid-flow-row gap-y-[0.375rem] gap-x-6;
  grid-template-areas:
    "contributors contributors contributors"
    "title title price"
    "title title price"
    "title title select"
    "format format select"
    "manufacturer manufacturer stock"
    "misc ssc ssc";
}

.page-search-result-item__item-grid-container-primary {
  @apply gap-x-4;
  grid-template-rows: 1.3125rem 1.3125rem auto;
  grid-template-columns: 37.5% 32.5% 20% auto;
  grid-template-areas:
    "contributors format price ."
    "title manufacturer stock select"
    "title misc ssc .";
}

.page-search-result-item__item-contributors {
  grid-area: contributors;
}

.page-search-result-item__item-price {
  grid-area: price;
}

.page-search-result-item__item-price-primary {
  @apply justify-self-start;
}

.page-search-result-item__item-title {
  grid-area: title;
}

.page-search-result-item__item-format {
  grid-area: format;
}

.page-search-result-item__item-manufacturer {
  grid-area: manufacturer;
}

.page-search-result-item__item-misc {
  grid-area: misc;
}

.page-search-result-item__item-select-bullet {
  grid-area: select;
}

.page-search-result-item__item-stock {
  grid-area: stock;
}

.page-search-result-item__item-ssc {
  grid-area: ssc;
}

.page-search-result-item__item-ssc:hover {
  .page-search-result-item__item-ssc-tooltip {
    @apply absolute whitespace-normal w-[25%] block rounded bg-white z-tooltip p-2 -mt-[2rem] -ml-[4rem] text-p2 shadow;
  }
}

.page-search-result-item__item-ssc-primary {
  @apply text-left overflow-hidden text-ellipsis whitespace-nowrap;
}

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

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

  .page-search-result-item__item-select-bullet {
    .isa-select-bullet::before {
      @apply bg-[#fff];
    }

    .isa-select-bullet:checked:before {
      @apply bg-[#596470];
    }

    .isa-select-bullet:hover::before {
      @apply bg-[#778490];
    }
  }
}
