:host {
  @apply flex flex-col pt-4 pb-6 px-5;
}

.header {
  @apply w-full flex flex-col;
  min-height: 60px;

  .instruction {
    @apply text-base text-warning text-right;
  }

  .info {
    @apply flex flex-row justify-between;

    .customer {
      @apply flex flex-col;

      .name {
        @apply mr-6 mt-px-10 mb-4;
        max-width: 550px;
      }

      .buyer-number {
        @apply text-base;
      }
    }

    .ssc {
      @apply mt-px-10;
      min-width: 155px;
    }
  }
}

.grid-container {
  @apply grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: 'cover title' 'cover comment' 'cover details';
}

.cover {
  grid-area: cover;

  .thumbnail {
    max-width: 59px;
    max-height: 111px;
    box-shadow: 0 0 18px 0 #b8b3b7;
    border-radius: 6px;
  }
}

.comment {
  grid-area: comment;
  margin-bottom: 15px;
  font-size: 20px;
  color: rgba(190, 129, 0, 1);
}

.title {
  @apply flex justify-between;
  grid-area: title;
  margin-bottom: 3px;
}

.details {
  @apply grid grid-flow-row gap-1;
  grid-template-columns: 40% 60%;
  grid-template-areas: 'format supplier' 'ean item-id' 'price status' 'quantity order-date' 'empty date';
  grid-area: details;
}

.format {
  @apply flex items-center;
  grid-area: format;

  .format-icon {
    @apply mr-2;
  }
}

.supplier {
  grid-area: supplier;
}

.ean {
  grid-area: ean;
}

.item-id {
  grid-area: item-id;
}

.price {
  grid-area: price;
}

.status {
  @apply flex;
  grid-area: status;
}

.quantity {
  grid-area: quantity;
}

.order-date {
  grid-area: order-date;
}

.date {
  grid-area: date;
}

.spec {
  @apply flex;

  span:nth-child(1) {
    min-width: 150px;
  }

  strong {
    @apply break-all;
  }
}

.processing-status {
  @apply flex flex-row items-center;

  .close ::ng-deep img {
    @apply h-3 w-3;
  }

  ui-icon {
    @apply mr-2;
  }
}

.footer {
  @apply flex justify-end mt-6;

  .cta-reorder {
    @apply border-none bg-brand text-white rounded-full py-3 px-6 font-bold text-lg outline-none self-end;

    &:disabled {
      @apply bg-inactive-branch border-inactive-branch;
    }
  }
}

.ssc-wrapper {
  @apply absolute flex flex-col w-28 right-5;

  label {
    @apply font-semibold text-small mb-1;
  }

  .ssc-input {
    @apply border-r-0 border-l-0 border-t-0 border-disabled-branch outline-none font-semibold text-cta-l;
    border-bottom-width: 2px;
  }

  .ssc-input:focus {
    @apply border-active-branch;
  }
}

.err-border {
  @apply border-brand;
}

.err-border:focus {
  @apply border-brand;
}

.ssc-text {
  @apply mt-3;
  font-size: 13px;
}

.err {
  @apply text-brand;
}

h3 {
  @apply font-bold;
}

@media (min-width: 1025px) {
  .header {
    .customer-name {
      max-width: 745px;
    }
  }
}
