:host {
  @apply grid grid-flow-row bg-white p-4 gap-2;
}

.goods-in-out-order-group-item-compartment {
  @apply text-right font-bold;
}

.goods-in-out-order-group-item-paid {
  @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-order-group-item-details {
  @apply flex flex-row items-start;
}

.goods-in-out-order-group-item-details-thumbnail {
  @apply text-center mr-6;
  width: 78px;
  img {
    @apply rounded-card w-auto h-auto;
    width: 60px;
    box-shadow: 0 0 18px 0 #b8b3b7;
  }
}

.goods-in-out-order-group-item-details-data {
  @apply grid grid-flow-row flex-grow;

  .item-top-row {
    @apply flex flex-row justify-between items-center;
  }

  .item-title {
    @apply font-bold text-lg;
  }

  .item-format {
    @apply font-bold flex flex-row items-center;

    img {
      @apply mr-2;
    }
  }

  .label-value {
    @apply flex flex-row items-center;
    .label {
      width: 130px;
    }

    .value {
      @apply font-bold;
      max-width: 170px;
    }
  }

  .item-processing-status {
    @apply font-bold flex items-center text-inactive-customer text-lg whitespace-nowrap;

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

  .item-data-comment {
    @apply text-warning font-bold text-lg py-1;

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

  .item-data-wrapper {
    @apply flex flex-row items-center;
  }

  .item-data {
    @apply grid gap-1 flex-grow items-start;
    grid-template-columns: auto 300px;
  }

  .extended-informations {
    @apply flex flex-col h-24;

    ui-spinner {
      @apply p-4;
      margin-left: 1.3rem;
    }
  }

  .item-stock {
    @apply flex flex-row justify-end items-center;

    ui-icon {
      @apply text-ucla-blue;
    }

    span {
      @apply ml-1 font-bold text-lg;
      padding-top: 5px;
    }
  }

  .item-data-selector {
    @apply flex-grow-0 text-right;
    width: 90px;
  }
}

ui-select-bullet {
  @apply p-5;
}

ui-quantity-dropdown {
  height: 22px;
}

::ng-deep .branch shared-goods-in-out-order-group-item .goods-in-out-order-group-item-details-data .item-processing-status {
  color: #9ca5b0 !important;
}
