:host {
  @apply block bg-white rounded-t p-4;
}

.goods-in-out-header-wrapper {
  @apply flex flex-col;
}

.goods-in-out-header-header {
  @apply flex flex-row justify-between items-center;
}

.goods-in-out-header-features {
  @apply grid grid-flow-col gap-4 items-center;
}

.goods-in-out-header-feature {
  @apply grid grid-flow-col gap-2 items-center font-bold text-inactive-customer;
}

.goods-in-out-header-edit-cta {
  @apply bg-transparent text-brand text-p2 font-bold border-none px-1 -mr-1;

  &:disabled {
    @apply text-inactive-customer;
  }
}

.goods-in-out-header-details-paid-marker {
  @apply font-bold flex items-center justify-end;

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

.goods-in-out-header-details {
  @apply grid grid-flow-row gap-4 pt-4;
}

.goods-in-out-header-details-header {
  @apply flex flex-row justify-between m-0 font-bold;
}

.goods-in-out-header-details-wrapper {
  @apply grid grid-cols-2;

  .detail {
    @apply flex flex-row my-1;

    .label {
      width: 10rem;
    }

    .value {
      @apply flex flex-row font-bold pr-2;

      ui-icon {
        @apply flex items-center;
      }
    }

    .loader {
      width: 130px;
    }
  }
}

.status-icon {
  @apply mr-2 text-inactive-customer;
}

.justify-space-between {
  @apply justify-between;
}

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

  ui-icon {
    @apply text-inactive-customer ml-2;
  }

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

    ui-icon {
      @apply text-disabled-customer ml-2;
    }
  }
}

.goods-in-out-header-select {
  @apply flex flex-col items-end;
}

.goods-in-out-header-additional-information {
  @apply flex flex-row items-end relative pt-4;

  .goods-in-out-header-additional-feature {
    @apply flex flex-row items-center mr-3;

    ui-icon {
      @apply mr-[9px];
    }

    p {
      @apply font-bold text-lg;
    }
  }

  .goods-in-out-header-additional-addresses {
    .goods-in-out-header-addresses-button {
      @apply bg-white text-[#0556B4];
    }

    .goods-in-out-header-addresses-popover {
      @apply absolute inset-x-0 -mx-4 top-12 bottom-0 z-popover;

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

      .goods-in-out-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);

        .goods-in-out-header-addresses-popover-delivery {
          @apply grid mb-6;
          grid-template-columns: 153px auto;

          .goods-in-out-header-addresses-popover-delivery-data {
            p {
              @apply font-bold;
            }
          }
        }

        .goods-in-out-header-addresses-popover-billing {
          @apply grid;
          grid-template-columns: 153px auto;

          .goods-in-out-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 px-4 py-4 -mr-4;
}

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

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

::ng-deep .branch shared-goods-in-out-order-details-header {
  .goods-in-out-header-edit-cta {
    &:disabled {
      @apply text-inactive-branch;
    }
  }

  .goods-in-out-header-feature {
    @apply text-inactive-branch;
  }

  .fetching {
    @apply bg-inactive-branch;
  }

  .cta-status-dropdown,
  .cta-datepicker,
  .cta-pickup-deadline,
  .cta-pickup-preferred {
    ui-icon {
      color: #9ca5b0 !important;
    }

    &:disabled {
      @apply text-inactive-branch;
    }
  }
}
