:host {
  @apply block box-border;
}

.card {
  @apply bg-white rounded-card shadow-card overflow-scroll;
  height: calc(100vh - 410px);
}

.order-header {
  @apply text-center text-3xl my-2 mb-2 font-bold;
}

.order-info {
  @apply text-center text-lg my-0 mb-2;
}

.order-number {
  @apply font-bold text-active-customer no-underline;
}

.check-icon-wrapper {
  @apply flex flex-row justify-center;

  .icon-circle {
    @apply mt-px-40 mb-1;
    background-color: #26830c;
    border-radius: 50%;
    width: 34px;
  }

  .check-icon {
    @apply mx-auto text-white;
    width: 18px;
  }
}

.row {
  @apply flex flex-row items-center mx-8 my-4;

  .sub-row {
    @apply flex flex-row flex-grow items-center;
    width: 55%;
  }

  .small {
    width: 45%;
  }

  .label {
    width: 140px;
  }

  .value {
    @apply ml-4 text-right;
  }

  .order-customer {
    @apply font-bold text-2xl;
  }

  .grow {
    @apply flex-grow;
  }

  .cta-print {
    @apply bg-transparent text-brand font-bold text-xl outline-none border-none pr-0;
  }

  .cta-print:disabled {
    @apply text-cool-grey;
  }
}

.top-line {
  @apply mt-8;
}

.order-details {
  @apply mt-4;
}

.product-name {
  @apply flex flex-row;

  .thumbnail {
    @apply mr-2;
    width: 30px;
  }

  .name {
    @apply font-bold whitespace-nowrap overflow-ellipsis overflow-hidden mx-2 text-active-customer no-underline;
    width: 170px;
  }
}

.product-details {
  @apply flex flex-col whitespace-nowrap overflow-ellipsis overflow-hidden;
  width: 320px;

  .info-row {
    @apply flex items-center whitespace-nowrap overflow-ellipsis overflow-hidden;
  }

  .order-icon {
    @apply w-px-15 text-ucla-blue;
    height: 18px;
    width: 35px;
  }

  .format {
    @apply w-px-40;
  }

  .contributors {
    @apply whitespace-nowrap overflow-ellipsis overflow-hidden;
  }
}

.delivery-row {
  .order-type {
    @apply w-px-100 font-bold;
  }

  .supplier {
    @apply ml-2;
  }
}

.product-price {
  @apply whitespace-nowrap ml-4;

  .quantity {
    @apply w-px-30 text-right font-semibold;
  }

  .price {
    @apply w-px-100 font-bold text-right ml-4;
  }
}

.footer {
  @apply flex flex-col justify-center items-center h-px-100 bg-white;
  box-shadow: 0px -2px 24px 0px #dce2e9;

  .overview {
    @apply flex flex-row items-center justify-end;
    width: 95%;
  }

  .promotion-points {
    @apply text-ucla-blue text-regular font-bold flex-grow;
  }

  .total-price {
    @apply font-bold text-cta-l;
  }

  .price-info {
    @apply text-right text-sm;
  }

  .actions {
    .cta-goods-out {
      @apply bg-brand text-white font-bold text-lg outline-none border-none rounded-full px-6 py-3 ml-2;
    }
  }
}

hr {
  height: 2px;
  @apply bg-disabled-customer;
}

.between {
  @apply justify-between;
}

.start {
  @apply items-start;
}

.separator {
  @apply mx-1;
}
