// NGX Ui Switch
// https://github.com/webcat12345/ngx-ui-switch

// Set default customise component variables here,
// Override it in theme variables files
$sw-sm-knob-size: 18px;

@import "~ngx-ui-switch/ui-switch.component";

$sw-sm-min-width: 26px;  // This Var need to be after `@import` because ui-switch didn't add `!default` to it.


.x-switch {
  @extend %cursor-pointer,
          %font-size-sm,
          %d-inline-flex,
          %mb-0,
          %text-grey,
          %font-weight-bold,
          %align-items-center;

  > * {
    @extend %d-flex;
    &:not(:last-child) {
      @extend %mr-2;
    }
  }

  .switch {
    @extend .border;
    outline: 0;

    .bg-dark & {
      @extend .border-light-transparent;
    }

    &:not(.checked) {
      @extend %bg-light-secondary;

      .bg-dark & {
        @extend %bg-light-transparent;
      }
    }

  }
}