:host {
  @apply block mb-[0.125rem];
}

.page-pickup-shelf-details-header__edit-cta {
  &:disabled {
    @apply text-inactive-customer;
  }
}

.page-pickup-shelf-details-header__paid-marker {
  @apply font-bold flex items-center justify-end;
}

.page-pickup-shelf-details-header__details {
  @apply grid grid-flow-row pt-4;
}

.page-pickup-shelf-details-header__details-header {
  @apply flex flex-row justify-between font-bold w-full;
}

.page-pickup-shelf-details-header__details-wrapper {
  @apply grid grid-flow-row gap-x-6 gap-y-[0.375rem];
  grid-template-columns: 50% auto;
  grid-template-areas:
    "buyernumber ."
    "ordernumber ."
    "orderdate processingstatus"
    "ordersource changedate"
    "dignotification pickup";

  .detail {
    shared-icon {
      @apply flex items-center;
    }

    .loader {
      width: 130px;
    }
  }
}

.page-pickup-shelf-details-header__buyer-number {
  grid-area: buyernumber;
}
.page-pickup-shelf-details-header__order-number {
  grid-area: ordernumber;
}
.page-pickup-shelf-details-header__order-date {
  grid-area: orderdate;
}
.page-pickup-shelf-details-header__processing-status {
  grid-area: processingstatus;
}
.page-pickup-shelf-details-header__order-source {
  grid-area: ordersource;
}
.page-pickup-shelf-details-header__change-date {
  grid-area: changedate;
}
.page-pickup-shelf-details-header__pick-up {
  grid-area: pickup;
}
.page-pickup-shelf-details-header__dig-and-notification {
  grid-area: dignotification;
}

.cta-status-dropdown,
.cta-datepicker,
.cta-pickup-deadline,
.cta-pickup-preferred {
  @apply flex flex-row border-none outline-none text-p2 font-bold bg-transparent items-center px-0 mx-0;

  &:disabled {
    @apply text-disabled-customer cursor-not-allowed;

    shared-icon {
      @apply text-disabled-customer;
    }
  }
}

.fetch-wrapper {
  @apply grid grid-flow-col gap-4;
}

.fetching {
  @apply w-24 h-px-20 bg-customer;
  animation: load 0.75s linear infinite;
}
