:host {
  @apply block;
}

.input-desription {
  @apply my-0 px-4 font-bold text-base;
}

.input-options-wrapper {
  grid-template-rows: auto 1fr;
  @apply grid bg-white rounded-card;
}

.hidden-overflow {
  @apply overflow-hidden;
}

.input-options-header {
  @apply grid grid-flow-col justify-end items-center mb-2;

  button {
    @apply bg-transparent p-4 text-base outline-none border-none font-semibold text-inactive-customer;
  }

  &.header-shadow {
    @apply shadow-card;
  }
}

.input-options-wrapper {
  @apply relative;
}

.input-options {
  @apply overflow-scroll;
}

.cta-scroll {
  @apply absolute bottom-4 right-4 shadow-cta border-none outline-none bg-white w-10 h-10 rounded-full grid items-center justify-center text-active-customer;

  ui-icon {
    @apply transition-transform transform rotate-90;
  }

  &.up ui-icon {
    @apply -rotate-90;
  }
}

::ng-deep .branch ui-filter-input-options {
  .cta-scroll {
    @apply text-cool-grey;
  }

  .input-options-header {
    button {
      @apply text-cool-grey;
    }
  }
}
