:host {
  @apply grid grid-flow-row gap-0.5 relative;
}

button {
  @apply px-1;
}

.goods-in-out-order-details-features {
  @apply absolute grid grid-flow-col gap-2 -top-1 right-6;

  img {
    width: 48px;
    height: 48px;
    z-index: 1;
  }
}

.goods-in-out-order-details-item {
  @apply grid gap-8 bg-white p-4;
  grid-template-columns: auto 1fr;
}

.goods-in-out-order-details-item-thumbnail {
  img {
    @apply rounded-card shadow-cta;
    width: 53px;
    height: 85px;
  }
}

.goods-in-out-order-details-item-details {
  @apply relative;

  h3 {
    @apply mt-0 font-bold;
  }

  .detail {
    @apply grid gap-4 my-2;
    grid-template-columns: auto 1fr auto;

    .label {
      width: 130px;
    }

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

      .format-icon {
        @apply mr-2;
      }
    }

    .overall-quantity {
      @apply ml-2;
    }
  }
}

.goods-in-out-order-details-item-comment {
  @apply flex flex-row items-start p-4 bg-white text-base font-bold;

  textarea {
    @apply flex-grow bg-transparent border-none outline-none text-base mx-4;
    resize: none;
  }

  textarea.inactive {
    @apply text-warning font-bold;
    @apply flex-grow bg-transparent border-none outline-none text-base mx-4 text-warning font-bold;
    // ipad color fix
    -webkit-text-fill-color: rgb(190, 129, 0);
    opacity: 1;
  }

  input {
    @apply flex-grow bg-transparent border-none outline-none text-base mx-4;
  }

  input.inactive {
    @apply text-warning font-bold;
    @apply flex-grow bg-transparent border-none outline-none text-base mx-4 text-warning font-bold;
    // ipad color fix
    -webkit-text-fill-color: rgb(190, 129, 0);
    opacity: 1;
  }

  button {
    @apply bg-transparent text-brand font-bold text-base outline-none border-none;
  }

  button.clear {
    @apply text-inactive-customer;
  }

  .comment-actions {
    @apply flex justify-center items-center;
  }
}

.cta-more {
  @apply flex flex-row items-center font-bold text-base bg-transparent outline-none border-none text-inactive-customer;

  ui-icon {
    @apply ml-2;
  }

  ui-icon.less {
    @apply transform ml-0 mr-2 rotate-180;
  }
}

.history-wrapper {
  @apply text-right;
}

.cta-history {
  @apply text-base font-bold text-brand outline-none border-none bg-transparent -mr-1;
}

.cta-edit,
.cta-save {
  @apply -mr-1;
}

::ng-deep .branch shared-goods-in-out-order-details-item {
  .cta-more {
    @apply text-inactive-branch;
  }
}

ui-select-bullet {
  @apply absolute top-20 right-0 p-5;
}

.receipt-header {
  @apply mb-1;
}
