.backdrop {
  @apply fixed w-screen h-screen z-modalBackdrop left-0 top-0;
}

.wrapper {
  @apply z-modal;
}

.select-wrapper {
  @apply w-full;
  .select-button {
    @apply flex justify-between w-full py-px-5 px-px-10 items-center border-none outline-none bg-white;
  }

  .select-button-selected {
    @apply bg-disabled-customer;

    .arrow-icon {
      @apply -rotate-90;
    }
  }

  span {
    @apply block whitespace-nowrap overflow-hidden overflow-ellipsis text-xl font-bold;
    max-width: 202px;
  }

  .arrow-icon {
    @apply inline-block transform rotate-90 ml-2;
    color: #557596;
  }
}

.dropdown-wrapper {
  @apply relative bg-white m-0 rounded-md p-0;
  left: -30px;
  max-width: 345px;
  box-shadow: 0px -2px 24px 0px #dce2e9;

  .search-input {
    @apply flex items-center px-px-15 pt-px-15 pb-px-8;
  }

  .searchbox {
    @apply outline-none border-none w-full text-base;
  }

  .searchbox::placeholder {
    @apply font-bold;
    color: #557596;
  }

  .search-icon {
    @apply cursor-pointer justify-between text-red-700 bg-white border-none outline-none;
  }

  .list {
    @apply px-0 m-0 list-none overflow-x-hidden overflow-y-scroll rounded-b-md;
    max-height: 175px;
  }
}
