:host {
  @apply grid grid-flow-col gap-2;
  grid-template-columns: 240px 1fr;
}

ui-icon {
  @apply transition transform text-cool-grey;
}

.inputs {
  @apply grid grid-flow-row gap-2;

  .ui-input {
    @apply flex flex-row items-center border-none outline-none p-4 font-bold text-base bg-white text-black text-left rounded-card transition transform;
  }

  .has-options {
    @apply text-white bg-active-customer;

    ui-icon {
      @apply text-white;
    }
  }

  .ui-input.active {
    @apply text-black bg-white pr-6 -mr-2 rounded-r-none;

    ui-icon {
      @apply rotate-180 text-cool-grey;
    }
  }

  .space-right {
    @apply mr-4;
  }

  .grow {
    @apply flex-grow;
  }
}

::ng-deep ui-filter-filter-group-filter .input-options-wrapper {
  min-height: 150px;
}

::ng-deep ui-filter-filter-group-filter .remove-rounded-top-left .input-options-wrapper {
  @apply rounded-tl-none;
}

::ng-deep .branch ui-filter-filter-group-filter {
  .inputs {
    .ui-input.has-options {
      @apply text-white bg-active-branch;

      ui-icon {
        @apply text-white;
      }
    }

    .ui-input.active {
      @apply text-black bg-white pr-6 -mr-2 rounded-r-none;

      ui-icon {
        @apply rotate-180 text-active-branch;
      }
    }
  }
}

::ng-deep .branch ui-filter-input-options {
  .has-options {
    @apply bg-cool-grey;
  }
}
