:host {
  @apply box-border flex justify-center items-center;
  min-height: 30px;
}

.order-by-filter-button-wrapper {
  @apply flex flex-row items-center justify-center;
}

.order-by-filter-button {
  @apply bg-transparent outline-none border-none text-regular font-bold flex flex-row justify-center items-center m-0 py-2 px-2;
}

::ng-deep .tablet ui-order-by-filter .order-by-filter-button {
  @apply mx-0;
}

ui-icon {
  @apply hidden transform ml-2 rounded-full p-1;
  transition: 250ms all ease-in-out;
}

ui-icon.asc,
ui-icon.desc {
  @apply flex rounded-full visible text-white;
}

ui-icon.asc {
  @apply -rotate-90;
}

ui-icon.desc {
  @apply rotate-90;
}

::ng-deep .customer ui-order-by-filter {
  ui-icon {
    @apply bg-active-customer;
  }

  .order-by-filter-button {
    @apply text-active-customer;
  }
}

::ng-deep .branch ui-order-by-filter {
  ui-icon {
    @apply bg-active-branch;
  }

  .order-by-filter-button {
    @apply text-active-branch;
  }
}
