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

button {
  @apply px-1;
}

.page-pickup-shelf-details-item__features {
  @apply absolute grid grid-flow-col gap-2 -top-1 right-24;

  img {
    @apply w-12 h-12;
    z-index: 1;
  }
}

.page-pickup-shelf-details-item__item-container {
  @apply grid gap-8 bg-white p-4;
  grid-template-columns: auto 1fr;
}

.page-pickup-shelf-details-item__thumbnail {
  @apply flex flex-col items-center gap-2;

  img {
    @apply rounded shadow-cta w-[3.625rem] max-h-[5.9375rem];
  }
}

.page-pickup-shelf-details-item__details {
  @apply relative;

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

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

    .label {
      @apply w-[8.125rem];
    }

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

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

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

.page-pickup-shelf-details-item__comment {
  textarea {
    @apply w-full flex-grow rounded bg-[#EDEFF0] border-[#AEB7C1] border border-solid outline-none text-p2 p-4;
    resize: none;
    height: auto !important;
  }

  textarea.inactive {
    @apply text-warning font-bold;
    @apply w-full flex-grow rounded bg-[#EDEFF0] border-[#AEB7C1] border border-solid outline-none text-p2 p-4 text-warning font-bold;
    // ipad color fix
    -webkit-text-fill-color: rgb(190, 129, 0);
    opacity: 1;
  }

  textarea::placeholder,
  textarea.inactive::placeholder {
    @apply text-[#89949E] font-normal;
    -webkit-text-fill-color: #89949e;
  }

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

  input.inactive {
    @apply text-warning font-bold;
    @apply flex-grow bg-transparent border-none outline-none text-p2 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-p2 outline-none border-none;
  }

  button.clear {
    @apply text-black;
  }

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

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

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

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

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