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

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

.page-customer-order-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 2rem 10px auto;
  grid-template-areas:
    "ordernumber status"
    "ordernumber status"
    "separator separator"
    "thumbnail title"
    "thumbnail comment";
}

.page-customer-order-item__item-grid-container-main {
  @apply gap-x-4;
  grid-template-rows: auto;
  grid-template-columns: 3.125rem 25% 15% 25% auto;
  grid-template-areas:
    "thumbnail title format date ordernumber"
    "thumbnail title ean quantity status"
    "thumbnail comment price target status";
}

.page-customer-order-item__item-thumbnail {
  grid-area: thumbnail;
}

.page-customer-order-item__separator {
  grid-area: separator;
}

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

.page-customer-order-item__item-price {
  grid-area: price;
}

.page-customer-order-item__item-title {
  grid-area: title;
}

.page-customer-order-item__item-format {
  grid-area: format;
}

.page-customer-order-item__item-ean {
  grid-area: ean;
}

.page-customer-order-item__item-target-branch {
  grid-area: target;
}

.page-customer-order-item__item-changed {
  grid-area: date;
}

.page-customer-order-item__item-quantity {
  grid-area: quantity;
}

.page-customer-order-item__item-order-number {
  grid-area: ordernumber;
}

.page-customer-order-item__item-special-comment {
  grid-area: comment;
}

.page-customer-order-item__item-order-number-main {
  @apply justify-self-start self-center;
}

.page-customer-order-item__item-processing-paid-status {
  grid-area: status;
}

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