:host {
  @apply text-black no-underline grid p-5 gap-x-4 gap-y-1;
  grid-template-columns: 3.75rem auto;
  grid-template-rows: auto;
  grid-template-areas:
    "item-thumbnail item-contributors item-price-stock"
    "item-thumbnail item-title item-price-stock"
    "item-thumbnail item-format item-format"
    "item-thumbnail item-info actions";
}

button {
  @apply p-0;
}

.item-thumbnail {
  grid-area: item-thumbnail;
  @apply mr-8 w-[3.75rem] h-[5.9375rem];
  img {
    @apply w-[3.75rem] max-h-[5.9375rem] rounded shadow-cta;
  }
}

.item-contributors {
  grid-area: item-contributors;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 600px;
  white-space: nowrap;

  a {
    @apply text-[#0556B4] font-bold no-underline;
  }
}

.item-title {
  grid-area: item-title;

  a {
    @apply text-black no-underline;
  }
}

.item-format {
  grid-area: item-format;
  @apply flex flex-row items-center font-bold text-p2 whitespace-nowrap;

  img {
    @apply mr-2;
  }
}

.item-price-stock {
  grid-area: item-price-stock;
  @apply text-right;

  .quantity {
    @apply flex flex-row justify-end items-center;
  }

  .quantity-error {
    @apply text-dark-goldenrod font-bold text-p3 whitespace-nowrap;
  }

  ui-quantity-dropdown {
    @apply flex justify-end mt-2 font-normal;
  }
}

.item-stock {
  grid-area: item-stock;
  @apply flex flex-row justify-end items-baseline font-bold text-lg;

  ui-icon {
    @apply text-active-customer mr-1;
  }
}

.item-info {
  grid-area: item-info;

  .item-date {
    @apply font-bold;
  }

  .item-availability-message {
    @apply text-dark-goldenrod font-bold text-p3 whitespace-nowrap;
  }
}

.actions {
  @apply flex items-end justify-end;
  grid-area: actions;

  button {
    @apply bg-transparent text-brand font-bold text-lg outline-none border-none;

    &:disabled {
      @apply text-disabled-customer;
    }
  }
}

.availability-changed {
  @apply text-dark-goldenrod;
}

::ng-deep page-shopping-cart-item ui-quantity-dropdown {
  .current-quantity {
    font-weight: normal !important;
  }
}

::ng-deep page-shopping-cart-item .ava-loader ui-icon {
  left: 0 !important;
}
