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

.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 {
  @apply font-bold no-underline;
  grid-area: item-contributors;
  height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 600px;
  white-space: nowrap;
}

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

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

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

  .info-tooltip-button {
    @apply border-font-customer border-solid border-2 bg-white rounded-full text-base font-bold mr-3;
    border-style: outset;
    width: 31px;
    height: 31px;
    margin-left: 10px;
  }

  .quantity-btn {
    @apply flex flex-row items-center p-0 w-full text-right outline-none border-none bg-transparent text-lg;
  }

  .quantity-btn-icon {
    @apply inline-flex ml-2;
    transition: transform 200ms ease-in-out;
  }

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

    &.disabled {
      @apply cursor-not-allowed bg-inactive-branch;
    }
  }
}

.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-availability {
  @apply flex flex-row items-center mt-4 whitespace-nowrap text-sm;
  grid-area: item-availability;

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

  span {
    @apply mr-4;
  }

  .instock {
    @apply mr-2 font-bold;
  }

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

  div {
    @apply mr-4 flex items-center;
  }

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

  .truck-b2b {
    @apply -mb-px-10 -mt-px-10;
  }
}

.item-can-add {
  @apply text-xl text-dark-goldenrod font-semibold;
  grid-area: item-can-add;
}

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

  ui-select-bullet {
    @apply cursor-pointer p-4 -m-4 z-dropdown;

    &.disabled {
      @apply cursor-not-allowed;
    }
  }
}

.hint {
  @apply text-xl text-dark-goldenrod font-semibold;
}

@screen desktop {
  .item-availability {
    @apply text-base;
  }
}
