:host {
  @apply rounded-t-card p-4 h-full;
}

form {
  @apply mb-16;
}

.header {
  @apply py-6 px-5 my-1 bg-white text-card-heading font-bold;
}

ui-form-control {
  @apply py-6 px-5 my-1 bg-white;
}

// ipad color fix
input {
  -webkit-text-fill-color: black;
  opacity: 1;
}

::ng-deep shared-goods-in-out-order-edit ui-form-control label {
  @apply mr-6;
}

::ng-deep shared-goods-in-out-order-edit ui-form-control .status {
  @apply text-inactive-customer;
}

::ng-deep .branch shared-goods-in-out-order-edit ui-form-control .status {
  @apply text-inactive-branch;
}

.item-header-wrapper {
  @apply flex flex-row justify-between items-center my-1 py-7 px-5 bg-white;

  .cta-expand {
    @apply outline-none bg-transparent border-none;
  }

  .item-header {
    @apply flex items-center;

    .cover {
      @apply shadow-lg rounded-md;
      max-height: 111px;
      max-width: 59px;
    }

    .title {
      @apply ml-5 font-bold;
    }
  }
}

.date-btn {
  @apply flex flex-row items-center p-0 w-full text-right outline-none border-none bg-transparent text-lg;
}

.dp-button-icon {
  @apply inline-flex ml-2;
  transition: transform 200ms ease-in-out;
}

.actions {
  @apply flex justify-center items-center fixed left-0 right-0;
  bottom: 110px;

  .cta-close {
    @apply border-2 border-solid border-brand bg-white text-brand font-bold text-cta-l py-3 px-6 rounded-full mr-8;
  }

  .cta-save {
    @apply border-2 border-solid border-brand bg-brand text-white font-bold text-cta-l py-3 px-6 rounded-full;

    &:disabled {
      @apply bg-inactive-branch border-inactive-branch;
    }
  }
}

.ssc-wrapper {
  @apply flex flex-row relative;

  .ssc {
    @apply my-0 flex-grow;
  }

  .ssc-text {
    @apply absolute bg-white border-none outline-none text-lg font-bold text-black overflow-ellipsis whitespace-nowrap;
    width: 450px;
    left: 202px;
    top: 22px;
  }
}

.special-comment {
  textarea {
    @apply flex-grow bg-transparent border-none outline-none text-lg mx-4 font-bold;
    resize: none;
  }
}

::ng-deep shared-goods-in-out-order-edit .price .input-wrapper input {
  width: 50px !important;
}

::ng-deep shared-goods-in-out-order-edit .ssc .input-wrapper .ssc-input {
  width: 32px !important;
}

::ng-deep shared-goods-in-out-order-edit .ssc .input-wrapper .hint {
  z-index: 1;
}

::ng-deep shared-goods-in-out-order-edit .price .suffix,
::ng-deep shared-goods-in-out-order-edit .ssc .suffix {
  display: flex !important;
  flex-grow: 10000 !important;
}

::ng-deep shared-goods-in-out-order-edit .datepicker .input-wrapper {
  flex-grow: 0 !important;
}

::ng-deep shared-goods-in-out-order-edit .datepicker label {
  flex: none !important;
}

::ng-deep shared-goods-in-out-order-edit .datepicker ui-datepicker .dp {
  top: 2rem;
}

::ng-deep shared-goods-in-out-order-edit ui-select .ui-select-value {
  flex-grow: 0 !important;
}

::ng-deep shared-goods-in-out-order-edit ui-select .ui-select-toggle {
  margin-left: 1rem !important;
}

::ng-deep shared-goods-in-out-order-edit ui-select .ui-select-options {
  width: max-content !important;
}

::ng-deep shared-goods-in-out-order-edit shared-notification-channel-control label {
  font-weight: normal !important;
}
