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

.inputs {
  @apply flex flex-col;

  .ui-input {
    @apply flex flex-row items-center outline-none p-4  text-lg bg-white text-black text-left rounded transition transform mr-2;
    box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5);
  }

  .ui-input.active {
    @apply text-black bg-white font-bold pr-6 mr-0 rounded-r-none border-none;
    box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
  }

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

  .grow {
    @apply flex-grow;
  }
}

.has-options {
  @apply text-black bg-white font-bold;
  span {
    @apply text-black;
  }
}

.shared-filter-input {
  box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
}

::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;
  }
}
