@import '@angular/material';

// Material checkbox mixin
@mixin mat-checkbox-override($theme) {
  $primary: map-get($theme, primary);
  $is-dark: map-get($theme, is-dark);

  $borderColor: black;
  @if $is-dark {
    $borderColor: white;
  }

  .mat-mdc-checkbox {
    .mdc-form-field {
      letter-spacing: normal;
    }
    .mdc-checkbox:hover .mdc-checkbox__native-control:not([disabled]) ~ .mdc-checkbox__ripple,
    .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__ripple {
      background-color: map-get($primary, 50);
      outline: $borderColor solid 2px;
      opacity: 1 !important;
    }
  }
}
