:host {
  @apply grid box-border items-center gap-4 cursor-pointer;
  grid-template-columns: auto 1fr;

  &.checked ::ng-deep {
    @apply font-bold;
  }

  &.disabled {
    @apply cursor-not-allowed;
  }

  &.style-filled {
    ui-icon[icon='checked'] {
      @apply rounded-sm;
    }
  }
}

::ng-deep .customer ui-checkbox {
  ui-icon {
    @apply text-active-customer;
  }

  &.disabled {
    @apply text-ucla-blue;
  }

  &.style-filled {
    ui-icon[icon='checked'] {
      @apply text-white bg-active-customer;
    }
  }
}

::ng-deep .branch ui-checkbox {
  ui-icon {
    @apply text-active-branch;
  }

  &.disabled ::ng-deep {
    @apply text-cool-grey;
  }

  &.style-filled {
    ui-icon[icon='checked'] {
      @apply text-white bg-active-branch;
    }
  }
}
