:host {
  @apply inline-block;
}

.ui-switch-wrapper {
  @apply flex flex-row items-center border-2 border-solid border-active-customer rounded-full;
}

.ui-switch-btn {
  @apply text-ucla-blue bg-transparent text-base rounded-full border-none outline-none px-3 py-1;
}

.ui-switch-btn-unset {
  @apply border-2 border-solid border-transparent;
}

.ui-switch-unset .ui-switch-btn-unset {
  @apply border-2 border-solid border-active-customer h-5;
}

.ui-switch-btn-on {
  margin-left: -1px;
}

.ui-switch-on .ui-switch-btn-on {
  @apply text-white bg-active-customer;
}

.ui-switch-btn-off {
  margin-right: -1px;
}

.ui-switch-off .ui-switch-btn-off {
  @apply text-white bg-active-customer;
}

::ng-deep .branch ui-switch {
  .ui-switch-wrapper {
    @apply border-ucla-blue;
  }

  .ui-switch-unset .ui-switch-btn-unset {
    @apply border-cool-grey;
  }

  .ui-switch-on .ui-switch-btn-on {
    @apply text-white bg-cool-grey;
  }

  .ui-switch-off .ui-switch-btn-off {
    @apply text-white bg-cool-grey;
  }
}
