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

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

.page-customer-order-details-header__paid-marker {
  @apply font-bold flex items-center justify-end;

  shared-icon {
    @apply mr-2 text-white bg-green-600 w-px-25 h-px-25 flex items-center justify-center rounded-full;
  }
}

.page-customer-order-details-header__details {
  @apply grid grid-flow-row pt-4;
}

.page-customer-order-details-header__details-header {
  @apply flex flex-row justify-between font-bold;
}

.page-customer-order-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-customer-order-details-header__buyer-number {
  grid-area: buyernumber;
}
.page-customer-order-details-header__order-number {
  grid-area: ordernumber;
}
.page-customer-order-details-header__order-date {
  grid-area: orderdate;
}
.page-customer-order-details-header__processing-status {
  grid-area: processingstatus;
}
.page-customer-order-details-header__order-source {
  grid-area: ordersource;
}
.page-customer-order-details-header__change-date {
  grid-area: changedate;
}
.page-customer-order-details-header__pick-up {
  grid-area: pickup;
}
.page-customer-order-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;
    }
  }
}

.page-customer-order-details-header__select {
  @apply flex flex-col items-end;
}

.page-customer-order-details-header__additional-addresses {
  .page-customer-order-details-header__addresses-popover {
    @apply absolute inset-x-0 top-16 bottom-0 z-popover;

    .close {
      @apply bg-white absolute right-0 p-6;
    }

    .page-customer-order-details-header__addresses-popover-data {
      @apply flex flex-col bg-white p-6 z-popover min-h-[200px];
      box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);

      .page-customer-order-details-header__addresses-popover-delivery {
        @apply grid mb-6;
        grid-template-columns: 9.5625rem auto;

        .page-customer-order-details-header__addresses-popover-delivery-data {
          p {
            @apply font-bold;
          }
        }
      }

      .page-customer-order-details-header__addresses-popover-billing {
        @apply grid;
        grid-template-columns: 9.5625rem auto;

        .page-customer-order-details-header__addresses-popover-billing-data {
          p {
            @apply font-bold;
          }
        }
      }
    }
  }
}

.cta-select-all {
  @apply text-brand bg-transparent text-p2 font-bold outline-none border-none;
}

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

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