:host {
  @apply block overflow-y-scroll;
}

.wrapper {
  @apply block bg-white shadow-card rounded-card pt-6;

  .header {
    @apply text-right;

    .headline {
      @apply text-center;

      .title {
        @apply text-2xl text-page-heading font-bold;
      }

      .paragraph {
        @apply text-2xl mt-1 mb-0;
      }
    }
  }

  form {
    @apply px-20;

    .control-row {
      @apply flex flex-row gap-8;

      ui-form-control {
        width: 50%;
      }
    }

    ui-searchbox {
      @apply mt-4 shadow-none border-0 border-solid rounded-none;
      border-bottom-width: 2px;
      border-color: #e1ebf5;
    }

    .datepicker {
      @apply border-0 border-solid justify-end;
      border-bottom-width: 2px;
      border-color: #e1ebf5;

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

      .content-selected {
        @apply flex-row justify-end;
      }

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

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

    .cta-primary {
      @apply bg-brand text-white font-bold text-lg outline-none border-brand border-solid border-2 rounded-full px-6 py-3;

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

    .cta-secondary {
      @apply bg-white text-brand border-brand font-bold text-lg outline-none border-solid border-2 rounded-full px-6 py-3 mr-4;

      &:disabled {
        @apply bg-inactive-customer border-inactive-customer text-white;
      }
    }
  }
}

::ng-deep page-checkout-dummy ui-select ui-icon {
  @apply text-inactive-customer;
}

::ng-deep page-checkout-dummy ui-select .ui-icon {
  @apply w-px-20 h-px-20;
}

::ng-deep page-checkout-dummy .datepicker .input-wrapper {
  flex-grow: 0;
}

::ng-deep page-checkout-dummy ui-searchbox .ui-searchbox-input {
  padding-left: 0 !important;
}

::ng-deep page-checkout-dummy ui-searchbox .hint {
  @apply mr-10;
}

::ng-deep page-checkout-dummy .price .suffix {
  margin-top: 7.5px;
}

::ng-deep page-checkout-dummy .searchbox-control .input-wrapper {
  @apply block;
}

::ng-deep page-checkout-dummy .mwst-dropdown .ui-select-options {
  max-height: 5.5rem !important;
}

::ng-deep page-checkout-dummy .supplier-dropdown .ui-select-options {
  max-height: 10rem !important;
}
