:host {
  @apply block bg-white rounded-t-card 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-base 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: 145px;
    }

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

      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 {
  @apply flex flex-row border-none outline-none text-base font-bold bg-transparent items-center px-0 mx-0;

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

.goods-in-out-header-actions {
  @apply text-right;
}

.cta-select-all {
  @apply text-brand bg-transparent text-base 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 {
    ui-icon {
      color: #9ca5b0 !important;
    }
  }
}
