:host {
  @apply text-black no-underline grid p-4;
  grid-template-columns: 102px 50% auto;
  grid-template-rows: auto;
  grid-template-areas:
    'item-thumbnail item-contributors item-contributors'
    'item-thumbnail item-title item-price-stock'
    'item-thumbnail item-format item-price-stock'
    'item-thumbnail item-info actions'
    'item-thumbnail item-date actions'
    'item-thumbnail item-ssc actions'
    'item-thumbnail item-availability actions';
}

button {
  @apply p-0;
}

.item-thumbnail {
  grid-area: item-thumbnail;
  width: 70px;
  @apply mr-8;
  img {
    max-width: 100%;
    max-height: 150px;
    @apply rounded-card shadow-cta;
  }
}

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

  a {
    @apply text-active-customer font-bold no-underline;
  }
}

.item-title {
  grid-area: item-title;
  @apply font-bold text-lg mb-4;
  max-height: 64px;

  a {
    @apply text-active-customer no-underline;
  }
}

.item-title.xl {
  @apply font-bold text-xl;
}

.item-title.lg {
  @apply font-bold text-lg;
}

.item-title.md {
  @apply font-bold text-base;
}

.item-title.sm {
  @apply font-bold text-sm;
}

.item-title.xs {
  @apply font-bold text-xs;
}

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

  img {
    @apply mr-2;
  }
}

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

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

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

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

.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-2;
  }
}

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

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

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

.item-availability {
  @apply flex flex-row items-center mt-4;
  grid-area: item-availability;

  .fetching {
    @apply w-52 h-px-20;
    background-color: #e6eff9;
    animation: load 0.75s linear infinite;
  }

  span {
    @apply mr-4;
  }

  ui-icon {
    @apply text-dark-cerulean mx-1;
  }

  div {
    @apply ml-2 flex items-center;
  }

  .truck {
    @apply -mb-px-5 -mt-px-5;
  }
}

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

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

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